如何在波浪路徑上動畫對象

使用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

回答