canvas 中点如何平滑移动

2016 年 6 月 9 日
 sd4399340
写了个例子 http://codepen.io/pinkyjie/pen/RRrRBN

想实现的效果是,三条线随机的移动
我的算法是:

1. 针对现有的点随机计算出一个新的横纵坐标
2. 计算现有点和新点之间的距离,将距离平均分成 60 份,每一帧移动一份
3. 60 帧后重复以上两步

问题是:

三条线是随机移动了,但总有一种不流畅的感觉,每 60 帧结束的时候总有一种碰撞的感觉,不知道怎么破。 60 帧之间的运动是很流畅的。
3178 次点击
所在节点    问与答
7 条回复
chairuosen
2016 年 6 月 9 日
距离不是平均分 60 份就好,找个贝塞尔曲线
YuJianrong
2016 年 6 月 9 日
为什么看起来会跳?
你单拿 X 值出来说的话,就是 X 值随时间的函数 x=f(t) 一阶导不连续,怎样让 x=f(t)的一阶导连续,就要你自己去想办法了。
Biwood
2016 年 6 月 9 日
不知道设置这个 curFrame 变量有什么意义,这种运动方式设计的有问题,浏览器的 requestAnimationFrame 是每秒执行 60 帧,不代表你一定要用到 60 这个数字。你要知道帧与帧之间的时间间隔是固定的,你只需要控制每次递归移动的距离就好了,要实现随机移动应该是模拟布朗运动吧
sd4399340
2016 年 6 月 10 日
@YuJianrong 这个有点太数学了,不是很理解。关键是为什么在 60 帧左右的地方会有跳动的感觉,其他时候就没有呢?
sd4399340
2016 年 6 月 10 日
@Biwood 60 这个数字不是主要问题吧,我设置这个参数的意义是我想通过这个参数控制动画的快慢,这个 fps 的准确含义是“每过多少帧计算一次新位置”,设成 60 就是每秒计算一次新位置,设成 120 就是每两秒计算一次。可能我变量取名不是很恰当。。。
YuJianrong
2016 年 6 月 10 日
@sd4399340 因为在 60 帧的时候一阶导不连续啊!

这是微积分最初级的内容,现在高中就要教了吧我觉得一点都不"太"数学。
sd4399340
2016 年 6 月 10 日
@YuJianrong 谢谢!我研究研究,数学都忘光了,你说这个才是根本原因啊。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/284674

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX