SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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 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, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = VIEW_HEIGHT / 2;
const CIRCLE_X = 150;
const WAVE_START_X = 300;
const RADIUS = 80;
export const SineWaveView = () => {
// 动画相位状态
const [phase, setPhase] = useState(0);
const requestRef = useRef<number>();
const previousTimeRef = useRef<number>();
// 动画循环
const animate = (time: number) => {
if (previousTimeRef.current !== undefi
Sine wave extending forward on axes
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BALL_RADIUS = 30;
const STRING_LENGTH = 250;
const PIVOT_Y = 100;
const CENTER_X = VIEW_WIDTH / 2;
const MAX_ANGLE = Math.PI / 4; // 45 degrees swing
export const NewtonsCradle = () => {
const [time, setTime] = useState(Math.PI); // Start with left ball ready to swing down
const requestRef = useRef<number>();
// Physics loop
const animate = () => {
//