SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 600;
const BG_COLOR = "#0f172a";
// 颜色定义
const COLORS = {
brain: "rgba(56, 189, 248, 0.3)",
brainHighlight: "rgba(56, 189, 248, 0.8)",
dopamineNormal: "#38bdf8", // 淡蓝
dopamineHigh: "#fbbf24", // 金色
drug: "#a855f7", // 紫色
drugToxic: "#22c55e", // 毒性绿
receptor: "#94a3b8",
receptorActive: "#cbd5e1",
damaged: "#475569",
};
// 粒子类定义
class Particle {
construc
主体背景设定为半透明、具有科技感的深蓝色人体大脑剖面，重点高
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COIL_CENTER_X = VIEW_WIDTH / 2;
const COIL_CENTER_Y = VIEW_HEIGHT / 2;
const COIL_RADIUS = 70;
const COIL_LOOPS = 12;
const COIL_WIDTH = 300;
export default function ElectromagneticInduction() {
// 动画状态
const [animState, setAnimState] = useState({
magnetX: -200, // 磁铁位置
velocity: 0, // 磁铁速度
current: 0, // 感应电流强度
flux: 0,
电磁感应实验
移开即停止播放
'use client';
import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import { Cpu, Zap, Aperture, Wifi, ScanFace, Globe } from 'lucide-react';
export default function IPhone20Reveal() {
// 生成背景粒子，只计算一次
const particles = useMemo(() => {
return Array.from({ length: 20 }).map((_, i) => ({
x: Math.random() * 100,
y: Math.random() * 100,
size: Math.random() * 3 + 1,
duration: Math.random() * 3 + 2,
delay: Math.random() * 2,
}));
},
设计一个iPhone20新款手机的宣传动画
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_VAL = 5; // Units for a
const B_VAL = 3; // Units for b
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
gridLine: '#334155', // Slate 700
a: '#06b6d4', // Cyan 500 (a component)
b: '#d946ef', // Fuchsia 500 (b componen
做一个讲解完全平方公式的几何证明动画
移开即停止播放
```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.
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CYCLE_DURATION = 24000; // 24 seconds for a full 24h cycle
const FPS = 60;
// Utility for color interpolation
const interpolateColor = (color1, color2, factor) => {
const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
return Math.round(parseInt(hex, 16) + factor * (parseInt(color2.slice(1).match(/.{2}/g)[i], 16) - parseInt(hex, 16)));
});
return `#${
生成一个昼夜循环的动画
移开即停止播放
```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
场景设定在光线昏暗、充满工业质感的废弃仓库走廊，墙面布满斑驳
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a';
const COLOR_LINUX = '#22c55e'; // Green-500
const COLOR_AI_1 = '#3b82f6'; // Blue-500
const COLOR_AI_2 = '#a855f7'; // Purple-500
const COLOR_TEXT = '#f8fafc';
// Utility for interpolation
const lerp = (start, end, t) => start * (1 - t) + end * t;
const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
从Linux操作系统进化为AI操作系统
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 5x7 Dot Patterns for Digits 0-9
const DIGIT_PATTERNS = {
0: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,1,1,0
],
1: [
0,0,1,0,0,
0,1,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,1,1,1,0
],
2: [
0,1,1,1,0,
1,0,0,0,1,
0,0,0,0,1,
0,0,0,1,0,
0
神经网络识别手写数字过程
移开即停止播放
```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，包括登录页、注册页、
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8';
const TEXT_COLOR = '#e2e8f0';
// --- Data & Configuration ---
const ELEMENT_DATA = [
{ z: 1, s: 'H', n: 'Hydrogen', cat: 'Nonmetal', desc: 'The Sun / Fuel', col: 1, row: 1 },
{ z: 2, s: 'He', n: 'Helium', cat: 'Noble Gas', desc: 'Balloons', col: 18, row: 1 },
{ z: 3, s: 'Li', n: 'Lithium', cat: 'Alkali