Lottieの作成からコーディングまで実装方法をまるっと解説

After Effectsのプラグイン「Bodymovin」をインストールします。

作成したアニメーションをJSONファイルに書き出すのに必要になります。

インストールページへ移動します。リンクは下記ボタンから。

Bodymovinをインストール

今回は事前にアニメーションの素材ファイルを用意し、読み込ませて作成します。

アニメーションさせたい素材を用意してください。※ページ下にサンプル素材をダウンロードできます。

※素材を用意せずともAfter Effectsで直接オブジェクトを編集して作成する方法もあります。

コンポジションを設定します。対象を動かす、アートボードのようなものです。

画面中央の「新規コンポジション」を選択します。

「コンポジション設定」のウィンドウが開くので、サイズの設定と背景色を設定し「OK」をクリックします。

主に画面上がアートボード、画面下がタイムラインです。

タイムラインに表示されているレイヤーをメインに操作します。

Lottieに対応させるため、Aiデータからシェイプに変換させます。

レイヤーを展開するとプロパティとタイムラインが表示されるのでキーフレームを打っていきます。

各レイヤーをクリックすると「コンテンツ」「トランスフォーム」が展開されます。

今回は主に「トランスフォーム」を使ってキーフレームを打ちます。

レイヤーの展開同様に矢印「＞」をクリックします。するとさらに以下のように展開されます。

今回はサンプル素材の「尾」を動かしてキーフレームを打ちます。

「tail~」から始まるシェイプレイヤーをクリック。

回転させオブジェクトを動かすのですが、回転軸が画面中央に寄っているので変更します。

画面上「アンカーポイントツール（Y）」をクリックし、ポイントを尾の根本にドラッグしてください。

青色のインジケーターを動かし始めたい箇所にドラッグまたは、プレビュー時間に入力してください。

「回転」左横のストップウォッチのアイコンをクリックします。

動き始めを設定したので、次に動きが完了を設定します。

インジケーターを動かし、「回転」の数値上でドラッグまたはダブルクリックで数値を入力します。

この工程を連続で繰り返すことでより動きをつけることが可能になります。

これで開始位置から完了位置まで動くようになります。

画面右のプレビューから再生してみてください。

画面上「ウィンドウ」→「エクステンション」→「Bodymovin」を選ぶとウィンドウが表示されます。

書き出すコンポジション、保存名、保存する場所を指定してください。

「Render」をクリックし、書き出しを開始します。

「done」という表示が出たら書き出しが完了し、閉じることができます。

Lottieへ移動する

アップロード後、少し待つとアニメーションのプレビューが表示され完成です。

LottieをWeb上に実装したい方はページ下に進んでください。

埋め込むコードを生成するため、LottieFilesのサイト内にある「Lottie Web Player」のページへ移動します。

移動は下記ボタンから。

Lottie Web Player

「YOUR LOTTIE JSON URL〜」と始める入力欄にサイトに埋め込みたいアニメーションのURLを入力します。

好きなlottieを選択してください。

クリックすると詳細のポップアップが表示されるので末尾に「~.json」と付くURLをコピーし、先程の入力欄にペーストしてください。

https://lottie.host/6aa43497-0225-40b5-91f2-08d1dd962dfe/7DRsVryMxt.json

画面右側のPREVIEWにアニメーションが表示されます。

Web上に表示するための設定を行うことができます。

設定内容は以下の通りです。

設定内容はGENERATED CODEのコードに反映されます。

GENERATED CODEのコードを「Copy Code」のボタンを押してコピーします。

コピーしたコードをHTML上にペーストします。

ペーストしたコードが設定通り動いていれば実装完了です。

HTMLとJSファイルを用意したら、CDNをコピーして貼り付けます。

または、ターミナルからnpmをインストールした後、lottie-webをインストールします。

※最新のCDNコードは下記リンクから。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>

npm install lottie-web

import lottieWeb from "lottie-web";

Lottieが動作する基本コードを入力します。

<div id="container"></div>

const container = document.getElementById('container'); //アニメーションを格納するDOM要素 

lottieWeb.loadAnimation({
  container: container,// アニメーションを格納するDOM要素 
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // JSONファイルのパス
});

お疲れ様でした。これでLottieが再生されるようになりました。

トリガーの設定に興味がある方は下へ進んでください。

アニメーションを再生するために、トリガーを設定します。

オブジェクトのloopとautoplayのプロパティの値がfalseの場合、静止状態で表示されます。

今回は、ボタンがクリックされたときにアニメーションが再生されるように設定してみましょう。

const container = document.getElementById('container'); //アニメーションを格納する dom 要素 

var animation = lottieWeb.loadAnimation({
  container: container,//アニメーションを格納する dom 要素 
  path: 'JSONのパス',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: " Cat Animation",
});

//クリックした時に0~100の間を再生する
container.addEventListener('click', () => {
  animation.playSegments([0, 100], true); 
});