animateメソッドで、アニメーションをつける方法(javascript)

javascriptでアニメーションを実装する方法を知りたい

今回はjavascriptのanimate()メソッドで、簡単なアニメーションの実装方法を紹介します。

コード

まずはシンプルに、boxが上から下に落ちてくるアニメーションです。

右下の「Rerun」または画面リロードで、アニメーションが発火します。

See the Pen Untitled by YT (@YT-the-scripter) on CodePen.

$('.box').animate({
    'marginTop': '200px'
  },1000);

第一引数＝marginTopに200pxを付与

第二引数(duration)＝1000ミリ秒＝1秒

つまり、1秒かけて200px下に落下するアニメーションができました。

easingで挙動を調整

次に第三引数を設定してみます。

第三引数には、easingを設定できます。

easingとは、アニメーションの挙動を調整するオプションです。下記二つを設定できます。

• linear：一定の速度でアニメーションが進行する
• swing：始めは遅く、途中は速く、最後は遅くアニメーションが進行する

実際のコードがこちらです。青が「swing」赤が「linear」です。

右下の「Rerun」または画面リロードで、アニメーションが発火します。

See the Pen Untitled by YT (@YT-the-scripter) on CodePen.

swingの初動が遅いのがわかります。

まとめ

以上animateメソッドでした。

今回は基礎的な部分のみ紹介しました。

その他にもできることは、たくさんあるのでまた記事にしたいと思います。