Claude Codeで本番対応のLottieアニメーションを生成する | AIBit

Text-to-Lottieとは？

Text-to-Lottieは、Claude Code、Codex、またはスキルをサポートする任意のコーディングエージェントを使って、本番対応のLottieアニメーションを生成できるオープンソースのハーネスです。複雑なJSONを手作業で作成したり、After Effectsのキーフレームに苦労したりする代わりに、自然言語でアニメーションを説明し、エージェントに構築させます。

このプロジェクトはdiffusion.studioによって構築され、GitHubのdiffusionstudio/lottieで入手できます。すでに1,900以上のスターと95のフォークを獲得し、大きな注目を集めています。

なぜこれが重要なのか

Lottieアニメーションは、モバイルアプリのローディングスピナーからウェブ上のマイクロインタラクションまで、あらゆる場所で使用されています。しかし、従来の作成方法では以下のいずれかが必要でした：

After EffectsとBodymovinプラグインに関する深い専門知識
複雑なJSON構造の手動編集
モーションデザイナーの雇用

Text-to-Lottieはこれらの障壁を取り除きます。自然言語のプロンプトを通じてアニメーションの生成、プレビュー、反復が可能になり、モーションデザインをあらゆる開発者が利用できるようにします。

クイックスタート

開始は数秒です。次の単一のコマンドでスキルをインストールします：

npx skills add diffusionstudio/lottie

次に、コーディングエージェントにLottieアニメーションの生成を依頼します。以下はプロンプトの例です：

https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg のSVGパスからLottieアニメーションを作成してください。自然なパス方向に従ってパスを表示するアニメーションでパスを明らかにします。パスにプレミアムなApple風のグラデーションを適用します。イーズインアウトのタイミング、透明な背景を使用し、元のSVGジオメトリを保持します。

エージェントはハーネスをセットアップし、組み込みのプレーヤーを提供するため、生成されたアニメーションをリアルタイムで検査および編集できます。

プロンプトガイド

最良の結果を得るには、次の5つの原則に従ってください：

1. モデルに根拠を与える

可能な限りSVG、実世界のデータ、またはスクリーンショットを提供します。抽象的な説明よりも具体的なアセットに基づいたアニメーションの方が、結果は大幅に向上します。

2. モーションデザイン用語を使用する

標準的なモーションデザイン言語を使用してタイミングと動きを説明します：ease-in、ease-out、ease-in-out。これらの用語はアニメーションカーブに直接マッピングされ、予測可能な結果を生成します。

3. カメラオペレーターのように考える

プロフェッショナルなモーショングラフィックスは、しばしばカメラの動きに依存します。プロンプトにカメラの押し出し、パン、ズーム、リグのような動きを含めます。エージェントはグループ変換を通じてこれらをシミュレートできます。

4. 必要なコントロールを要求する

デフォルトでは、出力は通常、背景色のコントロールのみを公開します。ストローク幅、色、不透明度など他のプロパティをカスタマイズしたい場合は、明示的にエージェントにそれらのコントロールを作成するよう依頼します。

5. FPSと再生時間を指定する

アニメーションに特定のフレームレートや長さが必要な場合は、プロンプトに希望のFPSと総フレーム数を含めます。これにより、出力がプロジェクトの技術要件に一致することが保証されます。

生成されたアニメーションの使用

生成後、アニメーションはLottie JSONファイルとして直接使用するか、さらに調整するためにAfter Effectsにインポートできます。

Web / Vanilla HTML

<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>
<div id="anim"></div>
<script>
lottie.loadAnimation({
  container: document.getElementById("anim"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/animations/my-animation.json"
});
</script>

React Native

npm install lottie-react-native

import LottieView from "lottie-react-native";

export default function Loader() {
  return (
    <LottieView
      source={require("./animation.json")}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

iOS Swift

import Lottie

let animationView = LottieAnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
view.addSubview(animationView)
animationView.play()

Android Kotlin

val view = findViewById<LottieAnimationView>(R.id.animationView)
view.setAnimation(R.raw.animation)
view.loop(true)
view.playAnimation()

Flutter

dependencies:
  lottie: ^latest

import 'package:lottie/lottie.dart';

Lottie.asset('assets/animation.json')

結論

Text-to-Lottieは、モーションデザインを開発者のワークフローに取り込む強力なツールです。自然言語の表現力とコードの精度を組み合わせることで、高品質なアニメーションの迅速なプロトタイピングと制作を可能にします。モバイルアプリ、ウェブインターフェース、ゲームのいずれを構築している場合でも、このハーネスは手作業の時間を大幅に節約できます。

GitHubリポジトリをチェックして始め、Discordでコミュニティに参加してアップデートとサポートを受けましょう。

ソース

diffusionstudio/lottie: Claude CodeまたはCodexで本番対応のLottieアニメーションを生成する