SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// --- 常量定义 ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const GRID_SIZE = 20;
const BG_COLOR = '#0f172a';
const COMPONENT_SIZE = 80;
// 模拟参数
const BATTERY_VOLTAGE = 3.0; // 3V
const BULB_RESISTANCE = 10; // 10 Ohm
const WIRE_RESISTANCE = 0.1;
// --- 音效处理 (AudioContext) ---
// 使用 useRef 保持 AudioContext 实例，避免重复创建
const useSound = () => {
const audioCtxRef = useRef(null);
const playTon
制作一个中职串联电路的闯关式模拟仿真学习系统 要求： 1.
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 配置常量与工具函数
// ==========================================
const VIEW_WIDTH = 1280;
const VIEW_HEIGHT = 720;
const FPS = 60;
// 颜色定义
const COLORS = {
bg: '#0f172a', // 墨蓝深底
wall: '#1e293b',
wallHighlight: '#334155',
ground: '#020617',
operator: '#0f0f0f', // 哑光黑
gearHighlight: '#27272a',
nvgLight: '#10b981', // 夜视仪绿/青
laser: '#ef4444', // 激光红
flashl
场景设定在光线昏暗、充满工业质感的废弃仓库走廊，墙面布满斑驳
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Color Palette based on requirements
const BG_BASE = '#326fa4'; // User specified
const BG_DARK = '#1e4b75';
const ACCENT_CYAN = '#67e8f9';
const ACCENT_YELLOW = '#fde047';
const GLASS_WHITE = 'rgba(255, 255, 255, 0.15)';
const TEXT_WHITE = '#ffffff';
// Floating floating symbols (Mixed EN/CN for context)
const SYMBOLS = [
{ text: 'A', type: 'en' }, { text:
帮我创建一个美国孩子学习中文的网站ui，包括登录页、注册页、
移开即停止播放
```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
第一幕：最大的气泡开始“上浮” 动画开始： 【聚焦框出现】
移开即停止播放
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:
创建一个明朝皇帝世袭年表的动画，要标注每一位皇帝名字、封号、
广告
Ads移开即停止播放
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
生成一个讲解中医原理的动画
移开即停止播放
'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