基于Gemini3.0 Pro

AI SVG 动画生成器一句话生成高质量矢量动画

无需编写代码，无需学习专业软件，输入知识点，AI即刻为您生成高精度的SVG矢量图动画
从免费试用开始
0/2000
查看全部SVG动画案例
移开即停止播放
```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // Constants & Data // ----------------------------------------------------------------------------- const TAIPING_PATH = [ { name: "金田村", year: 1851, type: "uprisin

绘制一个太平天国运动轨迹动画，把最开始一幕金田村补上，其他不

移开即停止播放
'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // --- Constants & Config --- const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const UNIT = 40; // Pixel size of one grid unit const A_VAL = 5; // Units for a const B_VAL = 3; // Units for b const COLORS = { bg: '#0f172a', // Slate 900 grid: '#1e293b', // Slate 800 gridLine: '#334155', // Slate 700 a: '#06b6d4', // Cyan 500 (a component) b: '#d946ef', // Fuchsia 500 (b componen

做一个讲解完全平方公式的几何证明动画

移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CYCLE_DURATION = 24000; // 24 seconds for a full 24h cycle const FPS = 60; // Utility for color interpolation const interpolateColor = (color1, color2, factor) => { const result = color1.slice(1).match(/.{2}/g).map((hex, i) => { return Math.round(parseInt(hex, 16) + factor * (parseInt(color2.slice(1).match(/.{2}/g)[i], 16) - parseInt(hex, 16))); }); return `#${

生成一个昼夜循环的动画

移开即停止播放
```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; const MingDynastyTimeline = () => { // --------------------------------------------------------------------------- // 1. 数据配置 (Data Configuration) // --------------------------------------------------------------------------- const EMPERORS = useMemo(() => [ { name: "朱元璋", temple: "太祖", era: "洪武", start: 1368, end: 1398, desc: "驱逐胡虏，恢复中华，立纲陈纪，救济斯民" }, { name: "朱允炆", temple: "惠宗", era: "建文", start:

创建一个明朝皇帝世袭年表的动画，要标注每一位皇帝名字、封号、

移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = 400; // 将主图稍微偏左，右侧留给文字 const CENTER_Y = 300; const RADIUS = 180; // 五行配置 const ELEMENTS = [ { id: 'wood', name: '木', label: 'Wood', color: '#10B981', desc: '生发、条达', organ: '肝 (Liver)' }, { id: 'fire', name: '火', label: 'Fire', color: '#EF4444', desc: '温热、升腾', organ: '心 (Heart)' }, { id: 'earth', name: '土', label: 'Earth', color: '#F59E0B', desc: '生化、承载',

生成一个讲解中医原理的动画

移开即停止播放
```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // ---------------------------------------------------------------------- // 1. 配置与数据生成 (Configuration & Data) // ---------------------------------------------------------------------- const VIEW_WIDTH = 1400; const VIEW_HEIGHT = 800; const CELL_SIZE = 44; // 稍微增大一点 const GAP = 6; // 计算表格总宽度: 18列 * (44+6) - 6 = 894 // 居中计算: (1400 - 894) / 2 = 253 const START_X = 253; const START_Y = 140; // 元素分类

画一个完整的元素周期表

移开即停止播放
'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ========================================== // 常量与配置 // ========================================== const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 600; const BG_COLOR = '#7b92c6'; const DISK_COLORS = ['#FF6B6B', '#FFD93D', '#6BCB77', '#4D96FF', '#9D4EDD']; const DISK_COUNT = 4; // 碟子数量 const ANIMATION_SPEED = 1.5; // 速度系数 // 贝塞尔缓动函数 const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2

作一個和河內塔遞回解析的動畫

移开即停止播放
'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 常量定义 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const FPS = 60; const PLAYER_SPEED = 4; const LASER_SPEED = 12; const ENEMY_SPEED = 2.5; const SPAWN_RATE = 0.02; // 颜色定义 const COLORS = { bg: '#0f172a', player: '#38bdf8', // 天蓝 playerLaser: '#ef4444', // 义军红色激光 enemy: '#94a3b8', // 帝国灰 enemyLaser: '#22c55e', // 帝国绿色激光 star: '#ffffff', hud: '#0ea5e9', explosion: '#fbbf24', }; // 类型定义 ty

Generate a Star Wars game animation

移开即停止播放
```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 常量定义 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const MOON_RADIUS = 120; const CENTER_X = 350; // 月球中心X const CENTER_Y = 300; // 月球中心Y // 目标农历日期 const TARGET_DAYS = [1, 3, 5, 7, 10, 15, 18, 20, 23, 25, 27, 30]; // 辅助函数：生成星星 const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math

月相的变化，设置农历初一、初三、初五、初七、初十、十五、十八

SVG Animate Logo深受用户喜爱的AI SVG动画创作产品

4000+
用户量
6000+
SVG动画数量
400+
免费案例集数量

常见问题

1什么是SVG动画？

SVG 动画是让矢量图形运动起来形成的动画。SVG 本身是用代码画出来的图形，不是图片，所以放大不会模糊。通过动画，可以让这些图形移动、旋转、变形或改变颜色，常用于网页里的图标动画、加载动画和数据可视化。

2什么是AI SVG动画生成器？

AI SVG动画生成器通过文字提示直接生成SVG动画，你描述需求和动效，它输出可直接播放和导出下载的SVG动画。

3需要编程基础吗？

不需要，你只要描述动效即可。懂一些设计概念会让结果更好，但不是必需。

4如何写出好的提示词？

写清主体、动作、风格、颜色、时长、缓动和循环。例如：'创建橙色心形图标，平滑放大缩小，1.5秒一次，ease-in-out，无限循环'。

5生成的SVG动画可以商用吗？

可以，生成的SVG动效完全归你所有，可用于商业或个人项目。

6可以导出哪些格式？

支持在线导出GIF图片和MP4视频文件两种格式。

7导出的文件出现异常怎么办？

如果导出视频无法播放或者与网站中看到的效果不一致，请选择导出视频菜单下的「直接录屏」功能，将进行所见即所得的录屏导出，推荐使用Chrome浏览器使用此项功能。

8我创作的动画会被别人看到吗？

系统保护您的隐私，除非您主动选择公开，否则您的动画只有您自己可以看到。

9生成结果不满意怎么办？

继续优化提示词，加入更清晰的动作、时长和风格描述，多次迭代会越来越接近预期。

10不适合生成哪些类型动画？

SVG动画是基于代码生成的动画，适合包括点、线、面、体等几何元素组成的图像，可以抽象表达事物，但不适合生成现实风格的图像