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

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。

（你可能想调整曲线......）

或者，without using '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

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

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