Lottie

🤸🏿‍♀️.jsonから.lottieへ

• 独自の拡張子でサイズを圧縮
• アイデンティティの確立
• 保存コストの削減
• アセットとまとめて総ファイルサイズの削減
 

🌿ロードマップ

• オーディオレイヤーのサポート [近日公開？]

• ビデオレイヤーのサポート [近日公開？]

• 言語の簡略化

• 一般的なスクリプトエンジン

• マウスとタッチのインタラクティブ性をサポート

• キーボードのインタラクティブ性をサポート

• センサー（コンパス、加速度）のインタラクティブ性をサポート

• ハプティクスのサポート

• ネットワークアクセス対応

• 3D対応 [いつか]

💣不具合

• Chrome、Safariで正しく表示されないバージョンを確認
• Safariで勝手にリサイズ・動作不良（未解決 ）
• Chromeはアップデートで解決？
Safariでは古いバージョンだとアニメーションしない場合も（12.0.1）2021/1/2 11:142021/1/2 11:14

• スムーズな動作がかなわない
• ファイルサイズが小さくても描写が追いつかない？

• グラデーション問題

• ワードプレスで正しく動作しない

• AEでテキストレイヤーのまま書き出すと位置情報バグることが多い

• フレームとフレームの間（12.5fとか）にキーフレームがあるとバグるらしい

👁️参考

• 特定のセグメントでアニメーション再生

• アニメーションの特定の位置にリンクを置く
• レイヤー名をクラスやID名にしてしまう

• 画像アセットの表示
• 外部ファイル：ファイルとして個別に格納されているアセットへの相対パス。
• データ URI としてインラインで使用：画像ファイルのバイナリにBase64エンコーディングを適用すると、元のファイルサイズに比べてファイルサイズが非常に大きくなります。
• URL：アセットはどこにでもホストされ、実行時にそのURLを介してロードされます。

• ファイルサイズを減らす
• レイヤー名の短縮
• AIで作成したパスをAEのシェイプ レイヤーに変換する
• 小数のデータを減らす