LottieFilesでできること、できないこと
LottieFilesでできること、できないこと
軽量アニメーションをAfterEffectsで作ってウェブに実装できる夢のようなソリューションLottieFilesですが、サポートされている制作内容、再生内容が条件によって細かく異なります。
その対応表をLottieFilesのサイトで見つけた ので翻訳してみました。
それとAfterEffectsは英語にしておいたほうが問題が少ないようです。
トラブルシューティングの書き込みをみていると、とりあえずに英語にしろというものをよく見ます。
あと、トリッキーなのが色を選択するときは必ずRGBでせよという書き込み。
カラーピッカーで必ず一回RGBのラジオボタンを押したほうが良いようです。
シェイプ
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
|---|---|---|---|---|---|---|
| シェイプ |  |
|
|
|
|
|
| 楕円 | |
|
|
|
|
|
| 四角 | |
|
|
|
|
|
| 角丸四角 | |
|
|
|
|
|
| 星 | |
|
️️️️️️️️ |
|
|
|
| グループ | |
|
|
|
|
|
| リピーター | |
|
|
|
|
|
| パスのトリム（単体） | |
|
️️️️️️️️ |
|
|
|
| パスのトリム（同時に） | |
|
|
|
|
|
塗り
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
| カラー | |
|
|
|
|
|
| 透明度 | |
|
|
|
|
|
| 塗りのルール | |
|
|
|
|
|
| 円形グラデーション | |
|
️️️️️️️️ |
|
|
|
| 線形グラデーション | |
|
️️️️️️️️ |
|
|
|
経験上、グラデーションはMacでできてWindowsでできないという珍現象が起きたりするかもしれないです。なんでも保存場所も影響するようです。
線
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
| カラー | |
|
|
|
|
|
| 不透明度 | |
|
|
|
|
|
| 線幅 | |
|
|
|
|
|
| 線端 | |
|
|
|
|
|
| 線の結合 | |
|
|
|
|
|
| 角の比率 | |
|
|
|
|
|
| 破線 | |
|
|
|
|
|
| グラデーション | |
️️️️️️️️ |
️️️️️️️️ |
|
|
|
変形
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
| 位置 | |
|
|
|
|
|
| 位置（次元を分離） | |
|
|
|
|
|
| スケール | |
|
|
|
|
|
| 回転 | |
|
|
|
|
|
| アンカーポイント | |
|
|
|
|
|
| 透明度 | |
|
|
|
|
|
| ペアレント | |
|
|
|
|
|
| Auto Orient | |
|
|
|
|
|
| 歪曲 |  |
|
|
|
|
|
キーフレーム補間
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
| リニア | |
|
|
|
|
|
| ベジェ | |
|
|
|
|
|
| 停止 | |
|
|
|
|
|
| 空間補間のベジェ | |
|
|
|
|
|
| 時間ロービング | |
|
|
|
|
|
マスク
| Masks | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| マスクパス | |
|
|
|
|
|
| マスク透明度 | |
|
|
|
|
|
| 加算 | |
|
|
|
|
|
| 減算 | |
|
|
|
|
|
| 交差 | |
|
|
️ |
|
|
| 明るく | |
|
|
|
|
|
| 暗く | |
|
|
|
|
|
| 差 | |
|
|
|
|
|
| マスクの拡張 | |
|
|
|
|
|
| マスクのぼかし | |
|
|
|
|
|
マット
| Mattes | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| アルファマット | |
|
|
|
|
|
| アルファマット反転 | |
|
|
|
|
|
| ルミナンスマット | |
|
|
 |
|
|
| ルミナンスマット反転 | |
|
|
|
|
|
パスを結合
| Merge Paths | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 結合 | |
|
|
|
|
|
| 追加 | |
|
|
|
|
|
| 型抜き | |
|
|
|
|
|
| 交差 | |
|
|
|
|
|
| 中マド | |
|
|
|
|
|
エフェクト
実質的に全滅と考えてよいと思いますが、ガウシアンブラー は今のところどのデバイスでも正しく表示できています。
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
| 塗り | |
|
|
|
|
|
| 線 | |
|
|
|
|
|
| 色被り補正 | |
|
|
|
|
|
| トライトーン | |
|
|
|
|
|
| レベル（個々の制御） | |
|
|
|
|
|
テキスト
テキスト周りは意外にも問題になることが多いです。文字部分はフォントのままにしておかず、シェイプとして扱うのが安全です。
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
| グリフ | |
|
|
|
|
|
| フォント | |
|
|
|
|
|
| トランスフォーム | |
|
|
|
|
|
| 塗り | |
|
|
|
|
|
| 線 | |
|
|
|
|
|
| トラッキング | |
|
|
|
|
|
| アンカーポイントのグループ化 | |
|
|
|
|
|
| テキストパス | |
|
|
|
|
|
| 文字単位の3D | |
|
|
|
|
|
| レンジセレクター (Units) | |
|
|
|
|
|
| レンジセレクター (Based on) | |
|
|
|
|
|
| レンジセレクター (Amount) | |
|
|
|
|
|
| レンジセレクター (Shape) | |
|
|
|
|
|
| レンジセレクター(Ease High) | |
|
|
|
|
|
| レンジセレクター(Ease Low) | |
|
|
|
|
|
| レンジセレクター (Randomize order) | |
|
|
|
|
|
| エクスプレッションセレクター | |
|
|
|
|
|
その他
| Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) | |
| エクスプレッション | |
|
|
|
|
|
| 画像 | |
|
|
|
|
|
| プリコンプ | |
|
|
|
|
|
| タイムストレッチ | |
|
|
|
|
|
| タイムリマップ | |
|
|
|
|
|
| マーカー | |
|
|
|
|
|
-
LottieFilesでできること、できないことの関連リンク
