jquery - 如何在波浪路径上为对象设置动画

Question

使用jquery，如何使对象以波浪形的路径移动，水平方向，波浪的高度逐渐降低！

Answer 1

您可以使用 TweenMax '引擎'。然后你可以写一行代码。

TweenMax.to(img, 5, {css:{bezier:{type:"soft", values:[{x:250, y:250}, {x:350, y:0}, {x:400, y:100}], autoRotate:false}}, ease:Power1.easeInOut});

示例JSFiddle。

（您可能想要调整曲线...）

或者，不使用 'bezier'：

TweenMax.to(img, 5, {x: 300, ease:Power1.easeInOut});
TweenMax.to(img, 5, {y: 150, ease:Elastic.easeOut.config(3, 0.15)});

Answer 2

正如我在评论中提到的，您可以animate()在循环中使用 jQuery 的函数来实现这一点，但这并不是很好。

您应该考虑使用 CSS3 过渡和动画。这是一个有用的起点 > http://csspathanimation.calyptus.eu/