javascript - 如何创建一个平滑的动画来缓和目标

标签 javascript animation requestanimationframe

如何创建一个平滑的动画,在目标改变位置时缓和它?

As this jsFiddle shows ,动画在 moveTarget() 期间停止或被阻止,而不是继续朝向新的目标坐标。

达到预期效果的理想实现/结构是什么?

最佳答案

好的,在这里回答我自己的问题,以防其他人遇到这个问题。

不是在每次 moveTarget() 触发时计算 change (change = finish - begin),而是在 中不断计算>onEnterFrame()。所以moveTarget()只负责获取新的X和Y位置。

这可以使值朝着目标缓和。

我还把缓动函数的时间值永久设置为1:

easeIn(1, begin, change, duration);

示例答案在此版本 jsFiddle 中:http://jsfiddle.net/dannygarcia/LqP2R/45/

关于javascript - 如何创建一个平滑的动画来缓和目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9302135/

相关文章:

javascript - knockout 绑定(bind) for every 尝试操作 foreach 循环中的单个元素

javascript - 如何减少 Firebase bundle 的大小?

javascript - 在 requestAnimationFrame 中设置正确的 this-value

javascript - 将二进制数据转换为base-64 javaScript

javascript - 替换字符串中的所有匹配项并避免 RegExp 转义

javascript - 单个滚动部分的动画

WPF:如何平滑起点为透明的 ColorAnimation?

ios - 动画图标变化

javascript - 'this' 的速度与 javascript 中的缓存变量的对比?

javascript - 如何使用 requestAnimationFrame 传递参数?