JS：按照定义的轨迹/路径移动div

Question

我试图做动画：在水面上慢慢移动生命带，漂浮在海面上，穿越波浪和风。

对于代码，我想在路径后面创建一个div。我使用Popmotion移动和撤消动画（使用选项{yoyo: true}）。

我看到了这个例子，但是一个随机的位置有点棘手并创造了一个＆＃34;停止＆＃34;在再次运行动画之前，这不像实时随机轨迹 http://jsfiddle.net/Xw29r/375/

是否可以在javascript / SVG中执行此类操作？

Answer 1

我实际创建了Popmotion，所以我想在这里帮助你朝着正确的方向前进。

要获得非直线，您可以使用非对称缓动。例如，那里的第一个动作，如果你给y一个easeIn和x和easeOut这条线会弯曲，也许不完全符合你的喜好，但你可以玩不同的宽松优势，以获得良好的组合。

你也可以考虑使用Simulate动作而不是Tween，也许是具有较高初始x运动的弹簧物理，并使用spring和{{ 1}}属性。

您不必使用friction，您可以编写yoyo函数，使用新的随机属性再次启动actor。

希望其中一些提示对您有所帮助！