
+

開発ワークフローを改善しましょう
Visual Studio Code用LottieFilesプラグインで
Visual Studio Marketplace経由で
動画を見る
VS Code内で手軽にLottieアニメーションを使用する

VS Code内でLottieファイルをプレビューする
LottieFilesの拡張機能を使用すれば、VS Codeアプリから離れることなく、LottieやdotLottieのファイルコンテンツをプレビューすることができます。

dotLottieコンテンツを表示する
VS Code内でdotLottieファイル(Lottieの圧縮ファイルフォーマット)を展開し、コンテンツを見る。

LottieFilesを検索する
「LottieFilesを検索」機能は、完璧なトグルを検索したり、アプリ向けのアニメーションを再生するのに便利です。このコマンドをVS Code内で実行して検索します。

Lottie JSONファイルを編集する
Lottieのコードエディターを使用すれば、付属のプレーヤーで変更を表示しながら、Lottie JSONファイルのフレームレート、 寸法、その他のプロパティを変更できます。
Lottieは、GIFより600%小さなファイルサイズです。つまり、ウェブサイトを低速化させることなくアニメーションを加えられるのです。
Lottieアニメーションはピクセル化を起こさずに拡大縮小できます。どのようなサイズでも、常に鮮明なままです。
AirbnbのデザインリーダーであるSalih Abdul-Karim氏と一緒に、アニメーションの原理やテクニック、After Effectsを使ってLottieアニメーションを作成する方法を学びましょう。
詳しくはサポートページをご覧ください。
簡単に作れるモーション
VS Code内で手軽にLottieアニメーションを使用する。