SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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
场景：垂直人体剖面，一颗拟人化"饭团"沿消化道移动。 口腔：
移开即停止播放
```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 =
移动下面的卡片区域往下，不要遮挡住按钮。其他都保持不变
广告
Ads移开即停止播放
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
"这一次，你不是陪跑",
请生成一个【适配移动端竖屏（9:16）的可交互 SVG 动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画配置常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
const PRIMARY_COLOR = '#38bdf8'; // Sky blue
const ACCENT_COLOR = '#a855f7'; // Purple
const SUCCESS_COLOR = '#22c55e'; // Green
const TEXT_COLOR = '#e2e8f0';
// 依赖服务元数据
const SERVICES_DATA = [
{ id: 'auth', name: 'AuthService', color: '#f43f5e', icon: '🛡️' },
{ id: 'db', name: 'Database', color: '#3b82f6', icon: '💾' },
{ id: 'log
生成一个解释依赖注入原理的动画。依赖注入的常规做法是，创建一
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
// 调色板
const COLORS = {
bg: '#0f172a',
storeFloor: '#1e293b',
storeWall: '#334155',
table: '#f3e3ce', // 枫木色
device: '#e2e8f0',
screenOn: '#0ea5e9',
poster: '#000000',
locker: '#475569',
lockerActive: '#10b981', // Green for active
jdRed: '#ef4444',
mtYellow: '#f59e0b',
rider: '#06b6d4', // Cyan
path: '#64748b',
text: '#94a3b8',
highlight: '#fffff
描绘的场景：苹果授权的乡镇零售店，店内有专业的苹果桌子，桌面
移开即停止播放
```tsx
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// Constants & Configuration
// ----------------------------------------------------------------------
const VIEW_WIDTH = 600;
const VIEW_HEIGHT = 1000; // 竖屏
const CYCLE_DURATION = 16000; // 完整动画周期 ms
// Color Palette
const COLORS = {
bg: '#0f172a', // Slate 900
ground: '#1e293b', // Slate 800
grid: '#334155', // Slate 700
co
45° 俯视结合轻轴测（isometric-like）视角的
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// 动画阶段定义
const STAGES = {
IDLE: 0, // 初始状态
CAR_ENTER: 1, // 车辆入场
BLOCKED: 2, // 遇到闸机，显示无法通行
ZOOM_IN: 3, // 切换到呼叫柱特写
PRESS_BTN: 4, // 按下按钮
CALLING: 5, // 呼叫中
CENTER: 6, // 远程中心接通
BACK_SCENE: 7, // 切回场景
GATE_OPEN: 8, // 抬杆
CAR_EXIT: 9, // 车辆离开
};
// 视觉常量
const VIEW_W = 360;
const VIEW_H = 640;
const COLOR_BG = "#0f172a"; // Slate 900
const COLOR_FLOOR = "#1e293b"; //