【10分】Lottieを使ってwebにおしゃれなアニメーションを簡単に実装する - inokawablog

    【10分】Lottieを使ってwebにおしゃれなアニメーションを簡単に実装する

    Lottieとは?

    そもそもLottieとはairbnbが開発したもので、ライブラリを使い、JSONファイルを組込むことで軽量に、かつ簡単に高品質のアニメーションを実装することができるめっちゃ便利なものです。

    さらに、ネイティブアプリにも高品質のアニメーションを簡単に作成することができます。

    Lottieを使うことでエンジニアでも、綺麗なアニメーションを実装することができます。

     

    今回は3パターン実装します。

    1つはロード画面です。Lottieではすでにおしゃれで可愛いロードアニメーションが豊富に用意されています。

    もう一つは、ブラウザが読み込まれたら一回だけアニメーションします。

    最後は、クリックしたらアニメーションが起こる場合を実装します。例えば、お問い合わせフォームを送信したら、完了のアニメーションとか、です。

     

    早速やっていきましょう。

     

    こちらから好きなアニメーションを選択して下さい。

    アニメーションを選択すると右上にJSONファイルをダウンロードする部分があるのでそこをクリックして下さい。また、このダウンロードページの下部には”Edit Layer Colors“というボタンがあり、そこをクリックするとアニメーションの色を自由自在に設定することができます。

    lottieアニメーションダウンロード

     

    そして、Lottieを実行するためのlottie.min.jsまたはlottie.jsファイルをこちらからダウンロードしてください。lottie-web-master  >  build  >  playerにlottie.min.jsが入っています。

     

    <script src="lottie.min.jsまでのパス"></script>

    これを<head></head>の中に書いて下さい。

     

    ロードアニメーション

    ロードアニメーションの場合、ループをさせるので、loopのオプションをtrueにします。

     

    表示部分は全て共通です。

    表示部

    <div id="animation" class="lottie-animation"></div>

     

    script

    var animationTivel = lottie.loadAnimation({
    	container: document.getElementById('animation'),
    	renderer: 'svg',
    	loop: true,
    	autoplay: true,
    	path: "{.jsonまでのパス}"
    });

    idを指定するだけで簡単に実装できてしまいます!

    このようなループするアニメーションになります。これは実際にこのサイトのお問い合わせフォームで送信完了のアニメーションとして使っています。

    一回だけアニメーション

    次は、ブラウザが読み込まれたら一回だけアニメーションが再生されます。

    var animationTivel = lottie.loadAnimation({
    	container: document.getElementById('animation'),
    	renderer: 'svg',
    	loop: false,
    	autoplay: true,
    	path: "{.jsonまでのパス}"
    });

    先ほどの設定とほとんど同じで、違うのはloopの部分です。falseにすることで1回だけアニメーションをします。

    設定を変更することで簡単にアニメーションを制御できるのはとてもありがたいですね。

     

    クリックアニメーション

    最後はクリックアニメーションです。

    表示部にボタンを追加して下さい。

    <button type="button" name="button" id="button">アニメーションボタン</button>

     

    script

    var animationTivel = lottie.loadAnimation({
    	container: document.getElementById('animation'),
    	renderer: 'svg',
    	loop: false,
    	autoplay: false,
    	path: "{.jsonまでのパス}"
    });
    document.getElementById("button").onclick = function() {
      animationTivel.play();
      animationTivel.playSegments([30,75],true);
    };

     

    loopとautoplayをfalseにしておきます。autoplayをfalseにすることで勝手にアニメーションが再生されなくなります。

    ボタンがクリックされたらplayでアニメーションを実行します。またstopでアニメーションを止めることもできます。

    animationTivel.playSegments([30,75],true);でアニメーションが再生される時間の範囲を指定しています。

    下のボタンをクリックしてみて下さい。

     

     

     

     

    以上になります。とっても簡単に実装することができました。Lottieを使うことでwebサイトをリッチにすることができます。

    もっと細かい設定はこちらのgithubから確認することができます。

    ぜひ使ってみて下さい。

     

    Vue Native・React Nativeで実装したものをこちらにまとめてあります。

    Vue NativeでHello World!!までのチュートリアルを解説【所要時間30分】

     

    おまけ

    アイコンのアニメーションとかAfter Effectで作るのって面倒ですよね?

    そんな時にはこのサイト

    超便利です。今回実装したような方法で簡単にアイコンのアニメーションをリッチにすることができます!!

    よかったらのぞいてみて下さい。みてるだけでも楽しいです。特にSocial Mediaのアイコンをみて見てください。めちゃめちゃ可愛いです。