发现一个动画生成神器，直接把自然语言转化成酷炫Lottie动效

下面视频演示的效果都可以一次直出，很牛逼 （提示词指南放评论区了，可以直接喂给AI帮你写好高质量提示词）

把它和HyperFrames这类视频制作工具结合，又会有不少玩法

终端一键安装： $ npx skills add diffusionstudio/lottie

仓库链接：https://github.com/diffusionstudio/lottie…

diffusionstudio/lottie

Source: https://github.com/diffusionstudio/lottie

Text-to-lottie is an open-source harness for generating production ready Lottie animations with claude code/codex or any other coding agent supporting skills.

Created with Text-to-Lottie

Quick Start

Install the skill:

npx skills add diffusionstudio/lottie

Then ask your coding agent to generate a Lottie animation using text-to-lottie.

Example prompt:

Create a Lottie animation from the SVG path in https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg. Reveal the path with an animation that follows the natural path direction. Apply a premium apple themed gradient to the path. Use ease-in-out timing, a transparent background, and preserve the original SVG geometry.

The agent will setup a harness that allows you to inspect/edit the generated lottie with the included player.

Prompt guide

1. Ground the model

Provide SVGs, real-world data, or screenshots whenever possible. Results are significantly better when the animation is based on concrete assets.

2. Use motion design terminology

Describe timing and movement using motion design language like ease-in, ease-out, and ease-in-out.

3. Think like a camera operator

Professional motion graphics often rely on camera movement. Include camera pushes, pans, zooms, and rig-like motion in your prompt. The agent can simulate these through group transforms.

4. Request the controls you need

By default, outputs usually only expose a background color control. If you want to customize other properties, explicitly ask the agent to create controls for them.

5. Specify FPS and duration

If your animation requires a specific frame rate or length, include the desired FPS and total frame count in the prompt.

Using the Generated Animation

Generated animations can be used directly as Lottie JSON files or imported into After Effects for further refinement.

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

import LottieView from "lottie-react-native";

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

Alternatively, React Native Skia can also render Lottie animations via its Skottie module, including on the web. It lets you customize animation properties, assets, and typographies at runtime, and since Skottie is a regular Skia drawing, it can be composed into a larger Skia scene alongside shaders, effects, and masks.

import { Skia, Canvas, Skottie, useClock } from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

const animation = Skia.Skottie.Make(JSON.stringify(require("./animation.json")));

export default function Loader() {
  const clock = useClock();
  const frame = useDerivedValue(
    () => ((clock.value / 1000) % animation.duration()) * animation.fps()
  );
  return (
    <Canvas style={{ width: 200, height: 200 }}>
      <Skottie animation={animation} frame={frame} />
    </Canvas>
  );
}

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')

Sac (@Saccc_c): 如果你在2009年低点买了20万英伟达，现在你将身价过亿

用HyperFrames+Lottie skill做了下面这个英伟达股价回顾史