マイクロインタラクション/After Effects/Lottie

---

マイクロインタラクションとは

「マイクロインタラクション UI/UXデザインの神が宿る細部」著者、Dan Saffer（ダン・サファー）氏によると、マイクロインタラクションについて以下のように書かれています。

電気製品のスイッチを入れる、オンラインサービスに接続する、モバイルアプリで天気予報を見るなど、私たちは日々さまざまな場面で「マイクロインタラクション」をしています。マイクロインタラクションとは、ある作業をひとつだけこなす最小単位のインタラクション（機器のやりとり）のことです。
「マイクロインタラクション UI/UXデザインの神が宿る細部」「まえがき『本書の概要』」オライリー・ジャパン2014年3月20日初版第1刷発行

After EffectsとLottieを使う

マイクロインタラクションの作り方は、いろいろありますが、今回は、After EffectsとLottieの組み合わせで作っていきます。
After Effectsで作ったアニメーションをjsonではきだし（拡張機能Bodymovin使用）、Lottieで実装するので、この組み合わせは必須です。
文字列なので（json）データサイズが軽く、かつ、ベクターデータなので、拡大しても荒れが出ません。

Lottieとは

Airbnb, Inc.が開発したiOS・Android・React Nativeに対応したアニメーション用のライブラリで、After Effectsアニメーションをリアルタイムで描き出し、使用できるようにします。

After Effectsでアニメーションを作る

After Effectsでアニメーションを作る方法は、「マイクロインタラクション/After Effects/ Loading Animation基礎」
今回はBodymovin（拡張機能）で出力する際に、After Effectsで使えない機能を紹介します。
Android・iOS・Windows・Web (SVG)・Web (Canvas)・Web (HTML)全てで利用可能なのは、以下のみです。
・Fills/塗り
・Strokes/線
・Interpolation/補間法
これら、以外は、使えないものがあるので、作る前に確認する事をおすすめします。
公式ページの対応表はこちら、「Supported After effects Features」。
After Effects日本語版の各名称に、置き換えたものは、「Supported After effects Features 日本語メモ」をご参照ください。

Bodymovin

BodyMovinをインストールするには、「ZXPInstaller」が必要なので、未インストールの場合は、先にこれをインストールしておく。
BodyMovinのインストールは、githubからzipをダウンロードする。

zipを解凍してフォルダbuild>extension内のbodymovin.zxpをZXPInstallerにドロップしてインストール完了です。

ここに「bodymovin.zxp」をドロップ！

AfterEffectからjsonファイルを書き出す

After Effect＞ウィンドウ＞拡張機能からBodyMovinを選択

該当のコンポジションを「Selected」し、「Settings」する

「Settings」で「Demo」を選ぶと、HTMLで書き出されるので、プレビューできる

「Standard」を選んで、jsonを書き出す

「Settings」が終了したら、「Render」を押すと書き出し完了

実装

（１）JavaScriptを使って表示させる方法

まずは、「Preview, test and share Lottie animations」に、ダウンロードしたjsonをドロップして、プレビューします。
プレビューして問題なければ、「Asset Link」のURLをコピーしておく。微調整なら、「Edit Animation」でも可能です。

Preview, test and share Lottie animations

Edit Animation

HTML

<!-- ここにアニメーションが表示されます -->
<div id="lottie(任意のidまたはclass名)"></div>

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js" crossorigin></script>
<script type="text/javascript">
  const params = {
    container : document.querySelector('#lottie（任意のidまたはclass名）'),
    renderer  : 'svg',
    loop      : true,
    autoplay  : true,
    //先ほどコピーしたURLをペースト
    path      : 'https://~~~.json'
  };
  const anim = lottie.loadAnimation(params);
</script>

これで、表示できました↓

（２）JavaScriptを使わずに表示させる方法
「Preview, test and share Lottie animations」に、ダウンロードしたjsonをドロップして、プレビューします。
プレビューして問題なければ、「Asset Link」のURLをコピーし、「Embed Lottie animations on your website」 に先ほどコピーしたURLをペーストし、各種設定をしたら下のCopy Codeをクリック！
あとはwebサイトにコードを貼り付けたら表示できます。

「controls」を削除すれば、コントローラーは消せます。