保護中: Lottieテスト

Lottie とは？ WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】 - PhotoshopVIP を参考に Lottie は、Android、iOS、Web、Windows用アニメーションライブラリで、Airbnbが開発しています。拡張プラグインBodymovinを使用すれば、Adobe After Effectsで作成したアニメーションをjsonとしてエクスポートでき、モバイルおよびWeb上でアニメーションをレンダリングできます。Lottieの特長としては、これまで複雑だったアニメーションの実装が手軽にでき、動画などのmovファイルやGIFアニメーションに比べてファイルサイズも格段に軽量、SVGをつかっているので拡大縮小も自由自在という点です。http://photoshopvip.net/ 以下、メリットや方法、http://photoshopvip.net/ から抜粋してまとめ Lottie を使うメリット マルチプラットフォームに対応。iOS、Android、Web、React NativeでLottieファイルを変更せずに利用できる。SVGファイルで解像度を気にせずに拡大縮小が可能。ファイルサイズが動画ファイルに比べて圧倒的に軽量。ベクターシェイプを組み合わせることで、複数のプラットフォームやあらゆる解像度で高品質のアニメーションを実現できる。アニメーションのホバー再生や逆再生、ループ機能などアニメーションを制御できるパラメーターも公開されている。 Lottie サンプル 実装方法 Adobe After Effects でアニメーションを作成After Effectst の拡張機能をインストールするAfter Effectsの拡張機能「Bodymovin」プラグインをインストールするために、ZXP Installerをダウンロード、インストール http://aescripts.com/learn/zxp-installer/Bodymovin の最新版をダウンロード https://github.com/airbnb/lottie-web/tree/master/build/extensionインストールした ZXP installer を開き、Bodymoving 拡張機能（.zxpファイル）をドラッグ＆ドロップでウィンドウに移動。これで Bodymoving がインストールできる。After Effects でウィンドウ＞エクステンション＞Bodymovin を選択、json を書き出すhttps://lottiefiles.com/preview で json を変換https://lottiefiles.com/share/e6WrAY というような形になるので「Lottie Animation URL」をコピーhttps://lottiefiles.com/web-player で先程コピーした「Lottie Animation URL」を貼り付けて設定を調整し、埋め込みコードをコピー JSを自分で読み込む方法もあるが、まずはこの方法が簡単