カスタム軌道（ノンリニア）

Question

私は小さなWebアニメーションプロジェクト（Webページ内のdivを動かす）に取り組んでいます.jQueryやJavascriptや任意のライブラリでカスタム軌道を使いたいと思います。線を引くと、すべてのポジションをキャッチし、div要素をアニメーション化するために保存するために、マウスを使用します。

私は

私の目的はおそらく困難である（より充当することができる）キャンバスを使用したくありません。

jQueryはいくつかのことをすることができますが、リニアアニメーションです。

私はこれを行うにはアニメーション機能を使用することができます。

$(this).animate({left:+500}, 1500, function(){ //first move left 
    $(this).animate({right:500}, 1500); // then move right 
    //etc... but too many points, sorry for syntax errors 
}); 

カスタムの動きを記述することが明らかに長すぎます。

Answer 1

マウスの動きの値を配列に格納し、CSSアニメーションまたはチェーンを使用すると、jQuery .animate()またはElement.animate()のいずれかが配列の各要素を呼び出して期待される効果が得られます。