マイクロインタラクション/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」を押すと書き出し完了
実装
(1)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>
これで、表示できました↓
(2)JavaScriptを使わずに表示させる方法
「Preview, test and share Lottie animations」に、ダウンロードしたjsonをドロップして、プレビューします。
プレビューして問題なければ、「Asset Link」のURLをコピーし、「Embed Lottie animations on your website」 に先ほどコピーしたURLをペーストし、各種設定をしたら下のCopy Codeをクリック!
あとはwebサイトにコードを貼り付けたら表示できます。
「controls」を削除すれば、コントローラーは消せます。