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