SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// V12 Firing Order (Example: 1-12-5-8-3-10-6-7-2-11-4-9)
// Defining offsets in degrees for when each cylinder hits Top Dead Center (Combustion)
// A 4-stroke cycle is 720 degrees. V12 fires every 60 degrees.
const FIRING_ORDER_OFFSETS = {
1: 0, 12: 60,
5: 120, 8: 180,
3: 240, 10: 300,
6: 360, 7: 420,
2: 480, 11: 540,
4: 600, 9: 660
};
// Cylinder Layo
制作一个V12发动机运动的过程
移开即停止播放
import React, { useEffect, useRef, useMemo } from 'react';
const NeuronSimulation = () => {
const canvasRef = useRef(null);
const containerRef = useRef(null);
// Animation state refs (mutable, no re-renders)
const stateRef = useRef({
pulses: [], // { type: 'dendrite'|'axon', pathIndex: 0, progress: 0, speed: 0.01 }
particles: [], // Background floating particles
energy: 0, // Soma energy accumulation
time: 0,
labels: [
{ text: "树突 (Dendrites)", sub: "信号接收 /
画一个神经元结构图，包括树突、轴突等结构
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 50; // 稍微下移，留出上方空间给控制面板
const SCALE = 30; // 1单位 = 30像素
// 颜色定义
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
axis: '#64748b',
primary: '#38bdf8', // 天蓝 - 曲线
secondary: '#f472b6', // 粉色 - 顶点
text: '#94a3b8',
sliderTrack: '#334155',
sliderThumb: '#e2e8f0',
};
// 工具函数：逻辑坐
创建一个可交互动画，上面显示一组按钮：a、b、c，分别显示为
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const TILE_SIZE = 40;
const GRID_W = VIEW_WIDTH / TILE_SIZE;
const GRID_H = VIEW_HEIGHT / TILE_SIZE;
const FPS = 60;
// Directions: 0: Up, 1: Right, 2: Down, 3: Left
const DIRS = [
{ x: 0, y: -1 },
{ x: 1, y: 0 },
{ x: 0, y: 1 },
{ x: -1, y: 0 },
];
// Game Entities Types
type EntityType = 'player' | 'enemy' | 'bullet' | 'base' | 'brick' |
生成一个红白机游戏动画：坦克大战，通过键盘上下左右键控制坦克
移开即停止播放
'use client';
import React, { useRef, useEffect, useState, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const TILE_SIZE = 40;
const COLS = VIEW_WIDTH / TILE_SIZE;
const ROWS = VIEW_HEIGHT / TILE_SIZE;
// 游戏常量
const GAME_SPEED = 2.5; // 玩家速度
const BULLET_SPEED = 6;
const ENEMY_SPEED = 1.5;
const ENEMY_SPAWN_RATE = 2000; // ms
const MAX_ENEMIES = 4;
// 方向枚举
const DIR = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3 };
const DX = [0, 1, 0, -1];
const DY = [-1, 0, 1, 0];
// 地图元
生成一个红白机游戏动画：坦克大战，通过键盘上下左右键控制坦克
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a'; // Slate-900
// Locations
const POS_UNTRUST = { x: 100, y: 300 };
const POS_FIREWALL = { x: 400, y: 300 };
const POS_SERVER = { x: 850, y: 300 };
模拟防火墙的工作过程,untrust区域的用户只能通过端口转
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const PRIMARY_COLOR = "#38bdf8"; // Cyan/Blue
const ACCENT_COLOR = "#facc15"; // Yellow (Nutrients)
const DANGER_COLOR = "#ef4444"; // Red (Acid/Heat)
const FOOD_COLOR_START = "#ffffff";
const FOOD_COLOR_STOMACH = "#fde047";
const FOOD_COLOR_POOP = "#5d4037";
// --- Math Helpers ---
const lerp = (start, end, t) => start * (1 - t) + end * t;
const ea
场景：垂直人体剖面，一颗拟人化"饭团"沿消化道移动。 口腔：
广告
Ads移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// CONFIG & DATA
// ==========================================
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 800;
const BG_COLOR = "#0f172a";
const CYCLE_DURATION = 18000; // 18 seconds for full journey
// Stages definition
const STAGES = [
{ id: 'oral', label: '口腔 (Oral Cavity)', desc: '咀嚼与唾液混合', start: 0, end: 0.10, color: '#fca5a5' },
{ id: 'pharynx', label: '咽
【口腔场景】 画面：食物颗粒进入口腔，牙齿上下咀嚼，唾液腺分
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义
const COLORS = {
bg: '#0f172a',
primary: '#38bdf8', // 天蓝 - 电流/科技
accent: '#facc15', // 黄色 - 切割/高能
danger: '#f43f5e', // 红色 - 凝血/热量
text: '#e2e8f0',
grid: '#1e293b',
tissue: '#fda4af', // 组织粉色
tissueDark: '#be123c', // 烧焦色
pad: '#94a3b8', // 负极板
};
// 粒子系统 helper
const createParticle = (x: number, y: number, type: 'spark' | 'smoke') =>
手术室高频电刀工作原理
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// --- 配置常量 ---
const VIEW_WIDTH = 360;
const VIEW_HEIGHT = 640;
const WHEEL_CENTER_X = VIEW_WIDTH / 2;
const WHEEL_CENTER_Y = VIEW_HEIGHT * 0.4; // 稍微上移一点点以保证整体平衡
const WHEEL_RADIUS = 130;
const TOTAL_SEGMENTS = 15;
const SEGMENT_ANGLE = 360 / TOTAL_SEGMENTS;
// 布局微调：按钮位置
const BUTTON_Y = WHEEL_CENTER_Y + WHEEL_RADIUS + 55;
// 布局微调：卡片位置 (下移至底部区域，避免遮挡按钮)
const CARD_CENTER_Y = VIEW_HEIGHT - 85;
const BLESSINGS =
移动下面的卡片区域往下，不要遮挡住按钮。其他都保持不变
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
const VIEW_WIDTH = 360;
const VIEW_HEIGHT = 640;
const WHEEL_CENTER_X = VIEW_WIDTH / 2;
const WHEEL_CENTER_Y = VIEW_HEIGHT * 0.42;
const WHEEL_RADIUS = 130;
const TOTAL_SEGMENTS = 15;
const SEGMENT_ANGLE = 360 / TOTAL_SEGMENTS;
// 祝福语配置
const BLESSINGS = [
"接下来这一年，会有人认真对你好", // 01
"你不用再一个人硬撑了", // 02
"你会等到一个明确的回应", // 03
"你正在靠近一个转折点", // 04
"有些好事，已经在路上了", // 05
"这一次，你不是陪跑",