SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义
const COLORS = {
bg: '#0f172a',
text: '#f8fafc',
a: '#38bdf8', // 蓝色
b: '#fbbf24', // 金色
c: '#f472b6', // 粉色
accent: '#10b981', // 绿色
line: '#475569'
};
const DistributiveLaw = () => {
const [frame, setFrame] = useState(0);
const requestRef = useRef<number>();
const startTimeRef = useRef<number>(Date.now());
// 动画状态控制
// 0: 初始展示
生成一个数学中乘法分配律的动画讲解，包括括号中的加减法
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画配置常量
const CONFIG = {
viewWidth: 800,
viewHeight: 450,
bubbleSize: 60,
gap: 30,
animationSpeed: 800, // 交换动画时长 ms
stepDelay: 1000, // 每步停顿 ms
colors: {
bg: '#0f172a',
primary: '#38bdf8', // 蓝色
locked: '#fbbf24', // 金色
frame: '#60a5fa', // 聚焦框颜色
success: '#4ade80', // 比较正确（绿色）
text: '#ffffff'
}
};
// 气泡数据接口
interface BubbleData {
id: number;
v
第一幕：最大的气泡开始“上浮” 动画开始： 【聚焦框出现】
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 遗传学配色方案
const COLORS = {
bg: '#ffffff',
primary: '#2563EB', // 蓝色
secondary: '#059669', // 绿色
accent: '#7C3AED', // 紫色
text: '#1F2937',
grid: '#E5E7EB',
bases: {
A: '#EF4444', // 腺嘌呤 - 红
T: '#3B82F6', // 胸腺嘧啶 - 蓝
C: '#10B981', // 胞嘧啶 - 绿
G: '#F59E0B', // 鸟嘌呤 - 黄
}
};
// 碱基配对规则
const BASE_PAIRS = [
{ left: 'A', right: 'T' },
生成一份高中生物遗传学相关知识的动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 600;
const VIEW_HEIGHT = 1000;
const FPS = 60;
const SCENE_DURATION = 240; // 4 seconds per scene
const TOTAL_SCENES = 6; // Intro, 4 types, Outro
const TOTAL_FRAMES = TOTAL_SCENES * SCENE_DURATION;
// Color Palette
const COLORS = {
bg: '#0f172a',
primary: '#06b6d4', // Cyan
secondary: '#3b82f6', // Blue
accent: '#f59e0b', // Amber
danger: '#ef4444', // Red
success: '#10b981', // Emerald
text:
英克司兰适合谁。最近英克司兰非常火，不单单是因为它的效果好、
移开即停止播放
```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: '生化、承载',
生成一个讲解中医原理的动画
移开即停止播放
'use client';
import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import * as Lucide from 'lucide-react';
// 中医五行颜色配置
const COLORS = {
wood: '#4ade80', // 木 - 绿
fire: '#f87171', // 火 - 红
earth: '#fbbf24', // 土 - 黄
metal: '#94a3b8', // 金 - 银灰
water: '#60a5fa', // 水 - 蓝
ink: '#292524', // 墨
paper: '#fcf9f2' // 纸
};
// 五行数据
const ELEMENTS = [
{ name: '木', label: 'Wood', color: COLORS.wood, angle: 0 },
{ name: '火', label: 'Fire', color: COLORS.fir
生成一个讲解中医原理的动画
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
// 动画数据定义
const SCENES = [
{
id: 0,
year: "1956",
era: "The Awakening",
title: "启蒙时代",
subtitle: "The Birth of AI",
desc: "达特茅斯会议正式提出 Artificial Intelligence 概念。图灵测试 (Turing Test) 定义了机器智能的边界，符号主义开始萌芽。",
icon: "Binary",
shape: "circle"
},
{
id: 1,
year: "1980s",
era: "Symbolic
生成一个讲解AI发展历史的动画，分几幕依次讲解，每一幕播放2
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
export const FirewallBreach = () => {
const [progress, setProgress] = useState(0);
const [status, setStatus] = useState('SCANNING'); // SCANNING, INJECTING, BREACHED
const [logs, setLogs] = useState([]);
const [activeNodes, setActiveNodes] = useState([]);
// Refs for animation loop values to avoid re-rend
制作一个黑客攻破系统防火墙的动画
移开即停止播放
'use client';
import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import { Scale, Activity, Droplets, Leaf, Wind, Snowflake, Flame, Mountain } from 'lucide-react';
// -----------------------------------------------------------------------------
// 子组件：太极符号 (SVG)
// -----------------------------------------------------------------------------
const TaijiSymbol = () => {
return (
<motion.div
style={{
width: 120,
height: 120,
borderRa
讲解一下中医的理论基础
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 配置常量
const VIEW_WIDTH = 1920;
const VIEW_HEIGHT = 1080;
const BG_COLOR = '#3b3b3b';
// 管线类型定义
const PIPELINE_TYPES = {
ELECTRICITY: { id: 'elec', label: '电力管网', color: '#00ffff', speed: 20 }, // 青色/快
GAS: { id: 'gas', label: '燃气管网', color: '#ffaa00', speed: 35 }, // 橙色/中
HEAT: { id: 'heat', label: '热力管网', color: '#ff3366', speed: 45 }, // 红色/慢
WATER: { id: 'water', label: '给排水网', color: '#0088ff', s