見出し画像

AfterEffects+Lottieを使ったアニメーションをWebサイトで表示させてみた

以前に書いた内容が埋もれてしまったこともあり、
改めて、AfterEffectsで作成したアニメーションをWebサイトで表示させてみました。

使用するもの

AfterEffects:Adobe製の映像制作ソフトです。(ver2019を使用)

Lottie:Airbnb製のアニメーションライブラリです。

サンプルもたくさんあります。

https://codepen.io/collection/nVYWZR/

Bodymovin:jsonファイルを出力できるようにするためのAfterEffectsのプラグインです。


手順

①AfterEffectsにBodymovinプラグインをインストール

プラグインをインストールできない場合は、下記のインストーラーを試してみてください。

AfterEffects > ウィンドウ > 拡張機能 内に Bodymovin があるかどうかで、インストールの確認ができます。


②AfterEffectsでアニメーション作成

画像1

繰り返しのアニメーションの場合は、アニメーション終了後に余白時間を設定しておくといいかもしれません。
また、AfterEffectsのすべての機能は再現できません。


③Bodymovinでjsonファイルを出力

ウィンドウ > 拡張機能 > Bodymovinを選択

画像2

出力先フォルダを選択

画像3

Settingsを選択し、設定を確認

画像4

設定内容(日本語訳)
Split:複数のJSONファイルでアニメーションをエクスポートしようとします。メインコンプに複数のレイヤーがある場合、エクスポーターはレイヤーが時間内に開始する場所を考慮してメインコンプをセグメント化します。

Glyphs:チェックすると、すべてのテキスト文字を図形に変換します。チェックされていない場合は、正しいフォントをレンダリングするためにフォントファイルまたはクラス名を提供する必要があります。
⇒基本的にチェックしています。

Hidden:チェックすると、すべての非表示レイヤーが含まれます。

Guided:チェックすると、すべてのガイド付きレイヤーが含まれます。

Extra Comps:アニメーションの一部としてエクスポートする追加のコンポジションを選択できます。

Original Assets Name: jpgなどのラスタライズされたアセットがある場合、元のソース名で画像フォルダーにエクスポートされます。

Standalone:チェックすると、アニメーションとプレーヤーがすべて1つのファイルにバンドルされてエクスポートされます。ページにアニメーションが1つしかない場合に便利です。たとえば、バナーを配信する場合。

Demo: demo.htmlファイルをエクスポートして、アニメーションを簡単にプレビューできるようにします。

④Renderを選択し出力

指定フォルダにjsonファイルが出力されます。


⑤jsonファイルの動作確認

出力されたjsonファイルをドラッグ&ドロップし、プレビューを確認できます。


⑥lottie.jsを使って実装

Webサイトで表示させるのでlottie-webを使用します。

今回、Nuxt.jsを使うので必要なパッケージをインストールします。

<!-- /components/lottie.vue -->
<template>
   <div ref="lottieRef"></div>
</template>

<script>
import lottie from 'lottie-web';
export default {
   props: {
       options: {
           type: Object,
       },
   },
   mounted () {
       this.lottie = lottie.loadAnimation({
           container: this.$refs.lottieRef,
           renderer: 'svg',
           loop:  true,
           autoplay: false,
           animationData: this.options.lottieData.default,
       });
       this.$emit('lottieCreated', this.lottie)
   }
}
</script>
<!-- /pages/index.vue -->
<template>
   <div>
       <lottie :options="lottieOptions" v-on:lottieCreated="initLottie" />
   </div>
</template>

<script>
import Lottie from "~/components/lottie.vue";
import * as lottieData from "~/assets/json/data.json";
export default {
   components: {
       Lottie
   },
   data () {
       return {
           lottie : [],
           lottieOptions: {
               lottieData: lottieData
           }
       }
   },
   methods: {
       initLottie (lottie) {
           this.lottie = lottie;
           setTimeout( () => {
               this.playLottie();
           }, 1000);
       },
       playLottie () {
           this.lottie.play();
       }
   },
}
</script>

(ソースコードは一部分です)

結果

ページ読み込み後、1秒後にアニメーションが実行されます。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
7
Japanese Web Developer / Front-End / Back-End / SIGNAL inc. / TOKYO /