SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```jsx
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import * as Lucide from 'lucide-react';
// ==========================================
// 核心常量配置
// ==========================================
const CONSTANTS = {
WIDTH: 1200,
HEIGHT: 700,
COLORS: {
BG: '#02020A',
GRID: '#00FFFF',
LASER: '#FFFFFF',
TEXT_MAIN: '#E0F2FE',
TEXT_SUB: '#64748B',
ACCENT: '#0EA5E9'
},
POS: {
EMITTER: { X: 150, Y: 350 },
PRISM:
画布背景设定为深邃的午夜蓝（#02020A），叠加精细的青色
移开即停止播放
```jsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as Lucide from 'lucide-react';
// 动画常量定义
const WIDTH = 1200;
const HEIGHT = 700;
const PRISM_X = 600;
const PRISM_Y = 350;
const EMITTER_X = 100;
const EMITTER_Y = 350;
const SPECTRUM_START_X = 600;
const SPECTRUM_END_X = 1100;
const SPECTRUM_TOP_Y = 150;
const SPECTRUM_BOTTOM_Y = 550;
// 缓动函数
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
const easeOutExpo = (x) => (x === 1 ? 1 : 1 - Math.p
画布背景设定为深邃的午夜蓝（#02020A），叠加精细的青色
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Lightbulb, Zap, Activity, Info, RotateCcw, Power } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// --- Utility Components & Constants ---
const COLORS = {
bg: '#0f172a',
wireOff: '#334155',
wireOn: '#0ea5e9', // Sky blue
bulbOff: '#475569',
bulbOn: '#facc15', // Yellow
bulbBroken: '#ef4444', // Red
text: '#e2e8f0',
accent: '#8b5cf6',
grid: '#1e293b'
};
// SVG Filters f
生成一个中学物理电路的动画，讲解并联与串联区别
移开即停止播放
'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,
电磁感应实验
移开即停止播放
import React, { useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export const GeneralRelativityView = () => {
const canvasRef = useRef(null);
// 使用 useRef 存储所有动画状态，避免 React 重渲染
const animationState = useRef({
frame: 0,
phase: 0, // 0: Flat, 1: Warping, 2: Orbit, 3: Lensing
massStrength: 0, // 当前引力源强度
targetMassStrength: 0,
gridPoints: [],
planet: { x: -100, y: 100, vx: 0, vy: 0, active: false, trail: [] },
photons: [],
广义相对论基本原理
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export default function OpticalImagingSciFi() {
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 物理常量
const FOCAL_LENGTH = 160; // 焦距 f
const OBJ_BASE_HEIGHT = 90; // 物体基础高度
// 动画状态
const [time, setTime] = useState(0);
// 动画循环
useEffect(() => {
let animationFrameId;
const animate = () => {
setTime(t =
光影成像的科普动画
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLS = 16;
const ROWS = 10;
const BASE_SPACING = 40;
const START_X = (VIEW_WIDTH - (COLS - 1) * BASE_SPACING) / 2;
const START_Y = (VIEW_HEIGHT - (ROWS - 1) * BASE_SPACING) / 2;
// Animation Phases
const PHASES = [
{ id: 'INIT', text: '初始状态：晶格排列均匀', duration: 2000 },
{ id: 'HEATING', text: '整体加热：热膨胀导致分子间距增大', duration: 3000 },
{ id: 'SURFACE_COOLING'
从分子层面解释一块钢材，由于温度梯度的原因产生残余应力。
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const PhysicsCentripetalDemo = () => {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
// 物理常量与配置
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 + 50;
const R = 250; // 圆盘半径 (像素)
const BLOCK_R = 180; // 木块距离圆心距离 (像素)
const TILT = 0.35; // 3D 视角倾斜系数
const OMEGA = 1.5; // 角速度 (rad/s)
// 模拟计算值
co
创建一个演示向心力的三维动画，一个圆盘上有一个木块，这个木块
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1000;
const HEIGHT = 600;
const DT = 0.016; // 60fps physics step
// Vector Math Helpers
const vecAdd = (v1, v2) => ({ x: v1.x + v2.x, y: v1.y + v2.y });
const vecScale = (v, s) => ({ x: v.x * s, y: v.y * s });
export default function NewtonLawsAnimation() {
const [sceneIndex, setSceneIndex] = useState(0);
const [elapsedSceneTime, setElapsedSceneTime] = useState(0);
// Physics State
//
演示牛顿三大定律
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BEAKER_WIDTH = 300;
const BEAKER_HEIGHT = 400;
const BEAKER_X = (VIEW_WIDTH - BEAKER_WIDTH) / 2;
const BEAKER_Y = 150;
const BLOCK_SIZE = 120;
const WATER_BASE_HEIGHT = 200; // Initial water height from bottom of beaker
// Helper for smooth easing
const easeInOutCubic = (t: number): number => {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3)
讲解一下浮力定律
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const COLOR_BG = '#0f172a';
const COLOR_VOLTAGE = '#a855f7'; // Purple
const COLOR_RESISTANCE = '#f97316'; // Orange
const COLOR_CURRENT = '#06b6d4'; // Cyan
const COLOR_GRID = '#1e293b';
// Helper to generate particles
interface Particle {
id: number;
offset: number; // 0 to 1 position along path
}
export const OhmsLawAnimation = () => {
// Physics