使用 Claude Code 生成生产级 Lottie 动画

什么是 Text-to-Lottie？

Text-to-Lottie 是一个开源工具，可让您使用 Claude Code、Codex 或任何其他支持技能的编码代理生成生产就绪的 Lottie 动画。无需手动编写复杂的 JSON 或与 After Effects 关键帧搏斗，您只需用自然语言描述动画，让代理为您构建。

该项目由 diffusion.studio 构建，并在 GitHub 上以 diffusionstudio/lottie 提供。它已获得显著关注，拥有超过 1.9k 星标和 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 动画。使用沿自然路径方向显示的动画来揭示路径。为路径应用高级苹果主题渐变。使用缓入缓出时序、透明背景，并保留原始 SVG 几何形状。

代理将设置一个工具并提供一个内置播放器，以便您可以实时检查和编辑生成的动画。

提示指南

要获得最佳结果，请遵循以下五个原则：

1. 为模型提供依据

尽可能提供 SVG、真实世界数据或截图。基于具体资产而非抽象描述的动画结果显著更好。

2. 使用动效设计术语

使用标准动效设计语言描述时序和运动：ease-in、ease-out、ease-in-out。这些术语直接映射到动画曲线并产生可预测的结果。

3. 像摄影师一样思考

专业动态图形通常依赖于摄像机运动。在提示中包含摄像机推拉、平移、缩放和类似摇臂的运动。代理可以通过组变换模拟这些效果。

4. 请求您需要的控件

默认情况下，输出通常只暴露背景颜色控件。如果您想自定义其他属性——如描边宽度、颜色或不透明度——明确要求代理为它们创建控件。

5. 指定 FPS 和时长

如果您的动画需要特定的帧率或长度，请在提示中包含所需的 FPS 和总帧数。这确保输出符合项目的技术要求。

使用生成的动画

生成后，动画可以直接作为 Lottie JSON 文件使用，或导入 After Effects 进行进一步优化。

Web / 普通 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 动画