SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 900;
const VIEW_HEIGHT = 600;
// Utility for smooth easing
const easeInOutCubic = (t: number): number => {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
};
export const ArchimedesPrincipleView = () => {
// Animation State
const [time, setTime] = useState(0);
const [phase, setPhase] = useState<'idle' | 'lowering' | 'submerged' | 'analyzing'>('idle');
// Physic
阿基米德定律
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
// 几何参数定义
const GEOMETRY = {
sourceX: 150,
barrierX: 500,
screenX: 850,
holeY: 300,
objectHeight: 160,
// 简单的相似三角形原理计算投影高度 (这里距离相等，所以是 1:1)
projectionHeight: 160,
};
export default function PinholeCameraAnimation() {
const [animationState, setAnimationState] = useState(0);
// 动画阶段控制
useEffect(() => {
const sequenc
小孔成像的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function CaoCaoWeighingElephant() {
// Animation Phases:
// 0: Idle/Intro
// 1: Elephant Boards (Boat Sinks)
// 2: Mark Water Level (Data Capture)
// 3: Elephant Exits (Boat Rises)
// 4: Load Rocks (Boat Sinks)
// 5: Match Level (Calculation)
// 6: Result
const [phase, setPhase] = useState(0);
const [boatY, setBoatY] = useState(0);
c
曹操称象的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 粒子系统配置
const MAX_BUBBLES = 60;
const MAX_STEAM = 40;
interface Particle {
id: number;
x: number;
y: number;
size: number;
speed: number;
wobbleOffset: number;
opacity: number;
}
export const BoilingWaterSimulation = () => {
// 仿真状态
const [temperature, setTemperature] = useState(20);
const [time, setTime] = useState(0);
const [phase, se
标准大气压下水的沸腾过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const FOCAL_LENGTH = 120; // 焦距 f
export default function ConvexLensImaging() {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
// 动画循环
const animate = (t: number) => {
setTime(t / 1000);
requestRef.current = requestAnimationFrame(animate);
};
use
凸透鏡成像原理
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
export default function OpticalImagingAnimation() {
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Optical Constants
const FOCAL_LENGTH = 120; // Focal length (f)
const OBJ_HEIGHT = 80; // Height of the object
// Animation State
const [time, setTime] = useState(0);
// Animation Loop
useEffect(() => {
le
光影成像的科普动画
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画组件：动滑轮组机械原理展示
export const PulleySystemAnimation = () => {
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
const ACCENT_COLOR = '#06b6d4'; // Cyan
const SECONDARY_COLOR = '#8b5cf6'; // Purple
const ROPE_COLOR = '#e2e8f0';
const TEXT_COLOR = '#94a3b8';
// 动画状态
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
const startTimeRef = use
动滑轮组
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// 物理引擎与常量定义
// ----------------------------------------------------------------------
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;
const PARTICLE_COUNT = 100; // 10x10 Grid
const PARTICLE_RADIUS = 4;
const GRID_SPACING = 25;
// 阶段定义
const PHASE_ORDER = 'ORDER'; // 有序 (晶体/低熵)
const PHASE_TRANSITION = 'TRANSITION';
给我一个熵增的过程动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const GROUND_Y = 550;
const ROD_WIDTH = 300;
const ROD_HEIGHT = 40;
// Helper: Random range
const random = (min: number, max: number) => Math.random() * (max - min) + min;
// Type definitions
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
rotation: number;
vr: number; // angular velocity
color: string;
scale: num
摩擦后从地面吸起小子条
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
// 粒子/纸屑类型定义
interface Scrap {
id: number;
x: number;
y: number;
rotation: number;
color: string;
vx: number;
vy: number;
isStuck: boolean;
stuckOffsetX: number;
stuckOffsetY: number;
mass: number;
}
interface Electron {
id: number;
x: number;
y: number;
targetX: number;
targetY: number;
progress: number;
speed: number;
}
export const Elect
静电摩擦吸附演示 准备材料 塑料直尺 / 梳子、羊毛衫 /
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const RAY_LENGTH = 350;
// Refractive Indices
const N1 = 1.00; // Air
const N2 = 1.33; // Water
export const LightRefractionView = () => {
const [incidentAngleDeg, setIncidentAngleDeg] = useState(45);
const timeRef = useRef(0);
const requestRef = useRef<number>();
// Animation Loop
con