【JavaScript】GSAPでばりぐっどくんが歩くアニメーションを作る

はじめに

今回は、GSAPというアニメーションライブラリを使って、キャラクターを歩かせるアニメーションを作成してみます。 React(Next)で動かしていますが、JavaScriptの環境があれば何でもいいと思います。

GSAP

GreenSock社が提供するアニメーションライブラリです。シンプルな記述で簡単にアニメーションを実現できます。プラグインを用いることで、スクロールに合わせた動き等さらに高度なアニメーションを作成することもできます。

一応完全無料ではないのですが、有料ソフトかつ複数人に販売する場合のみライセンス料金がかかるようです。料金もとても良心的です。

https://greensock.com/standard-license/

インストール

npm install gsap

インポート

import { gsap } from 'gsap';

完成系

マークアップ

htmlでアニメーションさせる画像を配置します(ここではvg.png）。画像はお好きなキャラのものを用意してください。 id="parent"とid="child"の要素をアニメーションさせる際の目印として利用します。

<div className="fixed bottom-0 w-full h-screen flex justify-center">
   <div id="parent" className="absolute bottom-4">
     <div id="child">
       <img src="/images/vg.png" alt="" className="w-80" />
     </div>
   </div>
</div>

横に移動させる

id="parent"の要素をx軸方向に移動させます。初期値を画面の右側にして、中央に向かって2秒かけて移動します。

gsap.fromTo('#parent',
    { x: 400, y: 120 },
    { x: 0, y: 120, duration: 2, ease: "linear" },
);

上下に振動させる

横に移動させるだけだと、スケートのように滑っているように見えるので、上下方向に振動させてみます。

上下の動きを３回繰り返すように記述しました。

gsap.timeline({ repeat: 3 })
    .fromTo('#child',
        { y: 0 },
        { y: 20, duration: 0.25 },
    )
    .fromTo('#child',
        { y: 20 },
        { y: 0, duration: 0.25 },
    );

細かく回転させる

上下の動きに加えて、細かく回転させるようにすると、より歩いているように見えると思います。

先ほどの上下の動きのコードに、rotationで角度を振動させるような記述を追加します。

gsap.timeline({ repeat: 3 })
    .fromTo('#child',
        { y: 0, rotation: 0 },
        { y: 20, rotation: 5, duration: 0.25 },
    )
    .fromTo('#child',
        { y: 20, rotation: 5 },
        { y: 0, rotation: 0, duration: 0.25 },
    );

完成

こんな感じで、ばりぐっどくんが歩いているようなアニメーションを作成できました。

おわりに

今回は、GSAPを用いてアニメーションを作成しました。

React向けのアニメーションライブラリには、framer-motion等便利なものもありますが、これらはコンポーネント指向設計を前提にしていることが多いです。 柔軟なアニメーションを実現したい場合には、古典的なアニメーションライブラリを利用することも考えたいですね。

GSAPは、比較的昔からあるアニメーションライブラリですが、高速性や機能性においては、最近のものに劣りません。 是非皆さんもGSAPを使ってみてください！