SVG动画案例库
浏览精选的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
广告
Ads移开即停止播放
```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
月相的变化，设置农历初一、初三、初五、初七、初十、十五、十八
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
export default function OpticalImagingAnimation() {
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Optical Constants
const FOCAL_LENGTH = 120; // Focal length (f)
const OBJ_HEIGHT = 80; // Height of the object
// Animation State
const [time, setTime] = useState(0);
// Animation Loop
useEffect(() => {
le
光影成像的科普动画
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export default function SciFiClock() {
const [time, setTime] = useState(new Date());
const [frame, setFrame] = useState(0);
// 动画循环
useEffect(() => {
let animationFrameId;
const animate = () => {
setTime(new Date());
setFrame(f => f + 1);
animationFrameId = requestAnimationFrame(animate);
};
animationFrameId = requestAnimationFrame(animate);
return () => cancelAni