这是一个创建于 3081 天前的主题，其中的信息可能已经有所发展或是发生改变。
写了个例子 http://codepen.io/pinkyjie/pen/RRrRBN
想实现的效果是，三条线随机的移动
我的算法是：
1. 针对现有的点随机计算出一个新的横纵坐标
2. 计算现有点和新点之间的距离，将距离平均分成 60 份，每一帧移动一份
3. 60 帧后重复以上两步
问题是：
三条线是随机移动了，但总有一种不流畅的感觉，每 60 帧结束的时候总有一种碰撞的感觉，不知道怎么破。 60 帧之间的运动是很流畅的。
想实现的效果是，三条线随机的移动
我的算法是：
1. 针对现有的点随机计算出一个新的横纵坐标
2. 计算现有点和新点之间的距离，将距离平均分成 60 份，每一帧移动一份
3. 60 帧后重复以上两步
问题是：
三条线是随机移动了，但总有一种不流畅的感觉，每 60 帧结束的时候总有一种碰撞的感觉，不知道怎么破。 60 帧之间的运动是很流畅的。
 |
1
chairuosen 2016-06-09 21:28:30 +08:00
距离不是平均分 60 份就好，找个贝塞尔曲线
|
 |
2
YuJianrong 2016-06-09 21:52:47 +08:00
为什么看起来会跳？
你单拿 X 值出来说的话，就是 X 值随时间的函数 x=f(t) 一阶导不连续，怎样让 x=f(t)的一阶导连续，就要你自己去想办法了。 |
 |
3
Biwood 2016-06-09 22:05:46 +08:00
不知道设置这个 curFrame 变量有什么意义，这种运动方式设计的有问题，浏览器的 requestAnimationFrame 是每秒执行 60 帧，不代表你一定要用到 60 这个数字。你要知道帧与帧之间的时间间隔是固定的，你只需要控制每次递归移动的距离就好了，要实现随机移动应该是模拟布朗运动吧
|
 |
4
sd4399340 OP @YuJianrong 这个有点太数学了，不是很理解。关键是为什么在 60 帧左右的地方会有跳动的感觉，其他时候就没有呢？
|
|
5
sd4399340 OP @Biwood 60 这个数字不是主要问题吧，我设置这个参数的意义是我想通过这个参数控制动画的快慢，这个 fps 的准确含义是“每过多少帧计算一次新位置”，设成 60 就是每秒计算一次新位置，设成 120 就是每两秒计算一次。可能我变量取名不是很恰当。。。
|
|
6
YuJianrong 2016-06-10 11:31:47 +08:00
|
|
7
sd4399340 OP @YuJianrong 谢谢！我研究研究，数学都忘光了，你说这个才是根本原因啊。
|
Select Language