Lottieで少し遊ぶ

こちらは、 CAMエンジニア Advent Calendar 2019 21日目の記事です。
昨日は @tmyy さんのフロント歴一年未満エンジニアがYahoo Hack Dayに出たお話でした。

記事一覧
https://qiita.com/advent-calendar/2019/cam-inc

はじめに

最近いい感じに寒くてテンション上がりっぱなしのgucciNaです。
普段はフロントエンド触ってます。

今回は業務でアニメーションを実装する際お世話になったLottieを紹介します。

そもそもアニメーション

一口にアニメーションといっても、

• フェードインやスライダーといったロジック的なアニメーション(ex:アコーディオンの開閉、カルーセルの横移動)
• デザイナーが必要なロゴやアイコンのちょっとしたアニメーション(ex:twitterのファボ、ハンバーガーメニューの「三」→「X」)

など様々な種類があります。

今回はデザイナーが必要そうなアニメーションが対象です。

そういったアニメーションを実装しようとした時、さらに様々なアプローチ方法があると思います。

• transitionやanimationを使ってcssで
• ゴリゴリに計算して苦しみながらjsで
• gifやmp4形式をペタ貼りで
• svgをSMILで

大別するとこんなところでしょうか。
cssやjsを使った実装の場合、多くはデザイナーには明確な理想の動きがあって、それをエンジニアが再現する形になります。

そういうアニメーションを苦労して実装したのにデザイナーに「思ってたのと違う」「もっとこうして欲しい」と言われた経験がフロントとして生きているとあるかと思います。あります。
かといってデザイナーにアニメーションを作ってもらってgifや動画形式で実装する際、画質や制御タイミング、容量などの問題が出てきます。

そんな時に助けてくれるのが 「Lottie」 です

Lottieとは

iOSやAndroid, Webで使えるアニメーション用のライブラリ。
AfterEffectでアニメーションを作り、jsonを出力、JavaScriptでお手軽に制御し再生ができます。

実際どのくらい手軽かというと、
Lottieの環境を整えて、jsonデータさえ用意してしまえば...

See the Pen Lottie_sample by gucciNa (@gucciNa) on CodePen.

これだけで動きます。

Lottieの主な特徴として、「実装コストが低い」、**「軽量」**の2つが挙げられます。

上にもあるようにテンプレを少し書いただけでアニメーションを表示でき、
デザイナーが自分で動きを作ることができるので、エンジニアとデザイナー間に発生する余計な修正や確認作業がなくなることから、エンジニアがjsやcssで膨大なアニメーションを書くより実装コストは低くなります。

また、jsonをアニメーションのデータとして使用するのでmp4やmovの動画ファイルよりかなり軽量になります。

(個人的には、svgとして表示するので拡大や縮小をしてもアニメーションが劣化しないというのも大きめのメリットだと思ったのですが公式に書いてなかった...)

使い方

AfterEffectでアニメーションを作成し、jsonを書き出すまでの過程は今回は端折って、jsonが用意されてる前提で書きます。(アニメーションの作成からやりたい方はここ見て)

アニメーション用のjsonはLottiFilesで様々な方が公開してるので簡単に試せます。

フロントとしての特別な難しい作業は一切なく、インストールしてLottie用のテンプレを書くだけです。

npm install lottie-web

lottie.loadAnimation({
  container: element, // ex:document.querySelector('.LottieElm') 
  renderer: 'svg', // レンダリング形式('svg' / 'canvas' / 'html')
  loop: true,  // ループする
  autoplay: true, // 自動再生する
  path: 'data.json' // アニメーションのjsonのパス
});

アニメーション制御例

実際に再生のタイミングを指定したり、スピードを速めたりの制御を試してみました。
今回触れてないメソッドもいくつかありますが、かなり自由に制御できます。

See the Pen Lottie_asobub by gucciNa (@gucciNa) on CodePen.

最後に

Lottieを使えば凝ったアニメーションも簡単に質良く実装できます。

しかし、何でもかんでもアニメーションをLottieで実装すればいいというわけではないのでそこだけ注意が必要です。
あくまでデザイナーが動きを作った方が良いものだけにしないと、今度はデザイナーが稼働し過ぎて大変になってしまいます。

そういった見極めを出来るようになって、フロントは実装簡単、デザイナーは思い通りのアニメーションを作ることが出来る、といったWin-Winの関係を築いていけたらなと思います。

余談

先日同期の @tomomi_h が作ったアニメーションを手を抜きまくって再現してみました。
当初この再現してみた、っていうのをメインコンテンツにするつもりだったのですが、やっててLottieの守備範囲じゃないな、って思って急遽解説チックな記事にしました。

@tomomi_h さんの作ったもの

See the Pen ExaYbQE by ともみ (@tomomi0425) on CodePen.

今回再現したもの

AE少し触ったことがあるので今回アニメーションを一つくらいは自分で作ろうかと思ったんですが忙しくて断念しました。師走怖い...
実際触ってみてデザイナーがどのくらい稼働しないといけないのか見たかったんだけど...

理想のアニメーションがなかったり、見つけてもなぜか使えなかったりで素材探しに少し時間を取られましたが、それを省けばやったことはLottie用のテンプレをペタペタして、cssで微調整しただけです、20分もかからず雑に再現できました。
ってだけです。