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

使用jquery，如何使对象在波浪路径中水平移动，其中波浪的高度逐渐减小！如何在波浪路径上动画对象

2013-02-19 Hazel

你将不得不使用'动画（）'一个循环内。最好使用CSS3转换和动画。 – BenM 2013-02-19 11:58:36

@BenM你可以通过发布代码来帮忙吗？ – Hazel 2013-02-19 12:03:39

请看我的答案。它有一个应该感兴趣的演示链接。 – BenM 2013-02-19 12:04:22

你可以使用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。

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

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

2013-02-19 12:27:02 strah

你能解释一下，这个TweenMax是什么？ – Hazel 2013-02-19 15:10:08

这是一个动画引擎。看看这里：http://www.greensock.com/gsap-js/ – strah 2013-02-19 15:19:20

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

你应该看看使用CSS3过渡和动画。这里有一个有用的开始点>http://csspathanimation.calyptus.eu/

2013-02-19 12:01:27 BenM

代码太长，我只需要5秒的动画，thnx的帮助，但这将是单调乏味的 – Hazel 2013-02-19 12:06:22

代码只是一个示例。你需要玩弄设置，并定义自己的路径。点击圆圈查看更简化的版本。 – BenM 2013-02-19 12:08:30

但是你真的通过右侧的完整代码？ – Hazel 2013-02-19 12:09:48

回答