SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
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
讲解一下中医的理论基础
移开即停止播放
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
创建一个 用于城市生命线项目中的背景动画，要求包含电力，天燃
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- 常量定义 ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const LEFT_CENTER_X = VIEW_WIDTH * 0.25;
const RIGHT_CENTER_X = VIEW_WIDTH * 0.75;
const CELL_Y = VIEW_HEIGHT / 2;
const DURATION = 45; // 延长一点以展示完整细节
// --- 数学工具 ---
const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
const smoothstep = (min, max, value) => {
const x = clamp((value - min) / (max
一定要体现出基因是选择性表达的合成了特殊的蛋白质。而不是一开
广告
Ads移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- 配置常量 ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const LEFT_CENTER_X = VIEW_WIDTH * 0.25;
const RIGHT_CENTER_X = VIEW_WIDTH * 0.75;
const CELL_Y = VIEW_HEIGHT / 2;
const DURATION = 35; // 延长动画时间以展示细节
// --- 数学工具函数 ---
const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
const smoothstep = (min, max, value) => {
const x = clamp((value - min) / (ma
早期都是一个骨髓造血干细胞，形态上都是球形，紫色。得到不同的
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER = { x: VIEW_WIDTH / 2, y: VIEW_HEIGHT / 2 };
const RADIUS = 220;
// Helper: Generate random range
const random = (min, max) => Math.random() * (max - min) + min;
// Agent Types configuration
const AGENT_CONFIGS = [
{ id: 0, role: 'Architect', label: '架构师', color: '#38bdf8', icon: 'A' },
{ id: 1, role: 'Developer', label: '开发者', color: '#818cf8'
帮我生成 AI 智能体，互相协作的动画
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 675; // 16:9 Aspect Ratio
const TOTAL_DURATION = 35000; // 35 seconds total
// Colors
const COLORS = {
bg: "#0f172a",
cellMembrane: "#cbd5e1", // Slate 300
nucleus: "rgba(255, 255, 255, 0.2)",
dnaStrand: "#94a3b8",
geneRed: "#ef4444", // Hemoglobin
geneBlue: "#3b82f6", // Muscle
geneGreen: "#22c55e", // Ner
1. 开场：受精卵细胞（5秒） 画面：一个圆润的受精卵细胞（
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const BLOCK_SIZE = 40;
const GRID_COLS = 14;
const GRID_ROWS = 5;
const TOTAL_BLOCKS = GRID_COLS * GRID_ROWS;
// 动画阶段枚举
const PHASE = {
RAINING: 0,
STABILIZE: 1,
SHOW_1x1: 2,
SHOW_2x2: 3,
RESET: 4,
};
export default function GeometryRain() {
// 渲染状态：用于触发组件重绘
// 我们只存储可视化的必要数据，避免冗余
const [blocks, setBlocks] = useState([]);
const [ph