jquery - 波状のパス上のオブジェクトをアニメートする方法

Question

jqueryを使用して、波の高さが徐々に減少する波状のパスを水平方向にオブジェクトを移動させる方法！

Answer 1

TweenMax の「エンジン」を使用できます。その後、文字通り 1 行のコードを記述できます。

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/