SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
text: '#cbd5e1',
highlight: '#38bdf8',
app: '#f472b6', // Pink
tcp: '#818cf8', // Indigo
ip: '#34d399', // Emerald
eth: '#fbbf24', // Amber
binary: '#00ffcc',
};
const LAYERS = [
{ id: 'app', name: 'Application', label: '应用层', y: 100, color: COLORS.app },
{ id: 'transport', name: 'Transport'
网络分包协议动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const DIALOGUE = [
{ id: 1, side: 'left', text: "Hello! Nice to meet you.", cn: "你好！很高兴见到你。" },
{ id: 2, side: 'right', text: "Hi there! I am Alice.", cn: "嗨！我是爱丽丝。" },
{ id: 3, side: 'left', text: "I am Bob. Do you speak English?", cn: "我是鲍勃。你会说英语吗？" },
{ id: 4, side: 'right', text: "Yes, I am learning it now.", cn: "是的，我现在正在学习。" },
{ id: 5, side: 'lef
生成两个小孩子在用英语对话的
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- 常量配置 ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
primary: '#06b6d4', // Cyan 500
secondary: '#8b5cf6',// Violet 500
accent: '#f43f5e', // Rose 500
success: '#10b981', // Emerald 500
warning: '#f59e0b', // Amber 500
textMain: '#f8fafc', // Slate 50
textDim: '#94a3b8', // Slat
显卡在计算机系统中负责渲染画面的完整工作流程，包括从CPU接
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLORS = {
bg: '#0f172a',
primary: '#06b6d4', // Cyan
secondary: '#8b5cf6', // Violet
accent: '#f43f5e', // Rose
text: '#e2e8f0',
grid: '#1e293b',
terminal: '#10b981' // Emerald
};
const STAGES = [
{
id: 'cpu',
title: '1. CPU 指令与数据',
desc: 'CPU 发送 Draw Call，准备顶点数据 (Vertices)',
tech: 'Command Buffer / Input Assembler'
},
显卡在计算机系统中负责渲染画面的完整工作流程，包括从CPU接
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Types & Constants ---
type Node = {
id: number;
value: number;
x: number;
y: number;
left?: number;
right?: number;
parent?: number;
depth: number;
};
type Edge = {
from: number;
to: number;
};
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 700;
const NODE_RADIUS = 22;
const ANIMATION_DELAY = 700;
// Colors
const COLORS = {
bg: '#0f172a', // Slate 900
nodeDefault: '#334155', // Sl
模拟一个二叉树遍历的过程，节点被访问的时候有颜色变化。可以选
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// -----------------------------------------------------------------------------
// CONSTANTS & CONFIGURATION
// -----------------------------------------------------------------------------
const PHASES = {
SOIL: { id: 0, text: '虫卵随粪便排出，在土壤中休眠', duration: 3000 },
INGEST: { id: 1, text: '不洗手抓取食物，虫卵被吞下', duration: 2500 },
HATCH: { id: 2, text
模拟一个人感染蛔虫的过程，卵随人类粪便排出后，可以在土壤中休
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 800;
// 调色板
const COLORS = {
bg: '#0f172a',
gold: '#fbbf24', // 金色
goldDim: '#b45309',
red: '#dc2626', // 朱红
ink: '#1e293b', // 墨色
text: '#f1f5f9', // 浅灰白
textDim: '#94a3b8'
};
// 官职数据
const LORDS = [
{ id: 'chengxiang', title: '丞相', role: '文官之首 · 行政', x: 250, y: 300, type: 'civil' },
{ id: 'taiwei', title: '太尉', role: '武官之首 · 军事', x: 500, y:
动画主题：三公九卿制度的建立与运作 整体风格 画面风格：中
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Configuration & Constants ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
const PRIMARY_COLOR = '#38bdf8'; // Sky blue
const ACCENT_COLOR = '#818cf8'; // Indigo
const SUCCESS_COLOR = '#34d399'; // Emerald
const TEXT_COLOR = '#f8fafc';
const NODE_Y = 300;
// Node Definitions
const NODES = [
{ id: 'user', label: 'User Client', ip: '192.168.1.10', x: 100, type: 'client' }
Animate X-Forwarded-For flow:
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：求解开普勒方程 M = E - e * sin(E)
// 使用牛顿迭代法求解偏近点角 E
const solveKepler = (M: number, e: number) => {
let E = M;
for (let i = 0; i < 5; i++) {
E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
}
return E;
};
export const KeplerLawAnimation = () => {
// 动画状态：Mean Anomaly (平近点角)，随时间线性增加
const [meanAnomaly, setMeanAnomaly] = useState(0);
Planetary elliptical orbit showing equal swept areas (Kepler's second law)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
export default function CvsJavaAnimation() {
// Animation phases:
// 0: Init
// 1: Java Showing Off (Kung Fu)
// 2: C Draws Weapon
// 3: C Fires (Beam)
// 4: Java Sliced (Impact)
// 5: Pause before reset
const [phase, setPhase] = useState(0);
const [time, setTime] = useState(0); // Used for continuous animations (waving)
// Animation Loop for continuous movement (Java's wavy motion)
useEffect(()
Stick-figure duel: C vs Java
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const EARTH_RADIUS = 140; // 稍微调大一点，更有气势
const ORBIT_RADIUS = 240;
// 3D 投影辅助函数
const project = (x: number, y: number, z: number) => {
const fov = 600;
const scale = fov / (fov + z);
return {
x: x * scale + VIEW_WIDTH / 2,
y: y * scale + VIEW_HEIGHT / 2,
scale: scale,
z: z
};
};
export default function NewsIntroAnimation() {
// 动画阶段: 0: