SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：求解开普勒方程 M = E - e * sin(E)
// 使用牛顿迭代法求解偏近点角 E
const solveKepler = (M: number, e: number) => {
let E = M;
for (let i = 0; i < 5; i++) {
E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
}
return E;
};
export const KeplerLawAnimation = () => {
// 动画状态：Mean Anomaly (平近点角)，随时间线性增加
const [meanAnomaly, setMeanAnomaly] = useState(0);
Planetary elliptical orbit showing equal swept areas (Kepler's second law)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
export default function CvsJavaAnimation() {
// Animation phases:
// 0: Init
// 1: Java Showing Off (Kung Fu)
// 2: C Draws Weapon
// 3: C Fires (Beam)
// 4: Java Sliced (Impact)
// 5: Pause before reset
const [phase, setPhase] = useState(0);
const [time, setTime] = useState(0); // Used for continuous animations (waving)
// Animation Loop for continuous movement (Java's wavy motion)
useEffect(()
Stick-figure duel: C vs Java
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BASE_PAIRS_COUNT = 24;
const HELIX_RADIUS = 100;
const HELIX_HEIGHT = 460;
const ROTATION_SPEED = 0.02;
export const DnaHelixAnimation = () => {
const [rotation, setRotation] = useState(0);
const requestRef = useRef<number>();
// Animation Loop
const animate = () => {
setRotation(prev => prev + ROTATION_SPEED);
requestRef.current = requestA
Rotating DNA double helix (sine waves and base pairs)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useCallback } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const WATER_LEVEL = 250;
const ELECTRODE_Y_START = 150;
const ELECTRODE_HEIGHT = 350;
const CATHODE_X = 280; // Left, Negative, Hydrogen
const ANODE_X = 520; // Right, Positive, Oxygen
// Types
type ParticleType = 'H2O' | 'H2' | 'O2' | 'Electron';
interface Particle {
id: number;
x: number;
y: number;
type: ParticleType;
scale: number;
opacity:
Electrolysis of water into hydrogen and oxygen
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const EARTH_RADIUS = 140; // 稍微调大一点，更有气势
const ORBIT_RADIUS = 240;
// 3D 投影辅助函数
const project = (x: number, y: number, z: number) => {
const fov = 600;
const scale = fov / (fov + z);
return {
x: x * scale + VIEW_WIDTH / 2,
y: y * scale + VIEW_HEIGHT / 2,
scale: scale,
z: z
};
};
export default function NewsIntroAnimation() {
// 动画阶段: 0:
CCTV-style opener: ANIMORA orbiting globe turning into AI Animation Studio
移开即停止播放
'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
Light refraction at the water surface
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 400;
const WAVE_SPEED = 2; // 波纹扩散速度
const EMISSION_RATE = 15; // 发射频率 (每多少帧发射一次)
const MAX_SOURCE_SPEED = 1.2; // 源点移动最大速度 (需小于 WAVE_SPEED 以避免音爆/混乱)
export const DopplerEffectView = () => {
const [waves, setWaves] = useState([]);
const [sourceX, setSourceX] = useState(200);
const [velocity, setVelocity] = useState(0);
const [phase, setPhase] = useState('static'); // s
Doppler effect of a moving wave source
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ARRAY_SIZE = 15;
// Helper to generate sorted unique random numbers
const generateSortedArray = (size) => {
const set = new Set();
while (set.size < size) {
set.add(Math.floor(Math.random() * 90) + 10);
}
return Array.from(set).sort((a, b) => a - b); // Numeric sort
};
export const BinarySearchView = () => {
// State
const [array, setArray] = useSt
Binary search in computing
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const GROUND_Y = 500;
const APPLE_START_X = 480;
const APPLE_START_Y = 220;
const GRAVITY = 0.6;
const BOUNCE_FACTOR = 0.5;
export const AppleFallAnimation = () => {
// 动画状态
const [appleY, setAppleY] = useState(APPLE_START_Y);
const [rotation, setRotation] = useState(0);
const [status, setStatus] = useState<'hanging' | 'falling' | 'resting'>('hanging');
// 物理
An apple falling from a tree
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export const MoonOrbitView = () => {
// 动画状态：角度 (0 ~ 2PI)
const [angle, setAngle] = useState(0);
const requestRef = useRef<number>();
// 轨道参数
const centerX = VIEW_WIDTH / 2;
const centerY = VIEW_HEIGHT / 2;
const orbitRadiusX = 350; // 椭圆长轴
const orbitRadiusY = 120; // 椭圆短轴 (模拟3D视角倾斜)
const earthRadius = 80;
const moonRadius = 20;
const
Moon orbiting Earth
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const ANIMATION_DURATION = 8000; // 8 seconds per loop
export default function NewsIntroAnimation() {
const [time, setTime] = useState(0);
const requestRef = useRef(null);
const startTimeRef = useRef(null);
// Animation Loop
const animate = (timestamp) => {
if (!startTimeRef.current) startTimeRef.current = timestamp;
const elapsed = timestamp -