SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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
光影成像的科普动画
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export default function SciFiClock() {
const [time, setTime] = useState(new Date());
const [frame, setFrame] = useState(0);
// 动画循环
useEffect(() => {
let animationFrameId;
const animate = () => {
setTime(new Date());
setFrame(f => f + 1);
animationFrameId = requestAnimationFrame(animate);
};
animationFrameId = requestAnimationFrame(animate);
return () => cancelAni
生成表盘三个指针，包括时针分针秒针
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ROAD_Y = 400;
const STOP_LINE_X = 700;
const CAR_WIDTH = 120;
const CAR_HEIGHT = 50;
const BUFFER_DISTANCE = 40; // distance between cars
type LightState = 'red' | 'yellow' | 'green';
interface Car {
id: number;
x: number;
speed: number;
color: string;
type: 'sedan' | 'sport' | 'truck';
lane: number;
}
export const TrafficLightSimulation = ()
做一个马路红路灯和车辆路过时的演示动画，演示红灯停绿灯行
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const PRIMARY_COLOR = "#38bdf8"; // Sky 400
const ACCENT_COLOR = "#f43f5e"; // Rose 500
const METAL_COLOR = "#94a3b8"; // Slate 400
const FLUID_COLOR_LOW = "#0ea5e9"; // Sky 500
const FLUID_COLOR_HIGH = "#fbbf24"; // Amber 400 (High pressure)
export default function HydraulicBrakeAnimation() {
// Animation State
const [frame, setF
自行车油刹工作原理
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = "#0f172a";
const COLOR_TCP = "#38bdf8"; // Sky Blue
const COLOR_UDP = "#f472b6"; // Pink
const COLOR_TEXT = "#e2e8f0";
const COLOR_PACKET_LOSS = "#ef4444"; // Red
const COLOR_SUCCESS = "#22c55e"; // Green
// --- Utility Hooks & Components ---
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previous
TCP vs UDP 通信区别
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// CONFIGURATION & CONSTANTS
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#38bdf8'; // Sky blue
const ACTIVE_COLOR = '#f59e0b'; // Amber/Orange
const VISITED_COLOR = '#10b981'; // Emerald/Green
const LI
模拟一个二叉树的便利过程，节点在被访问时变色，背景使用深色网
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_UNITS = 3;
const B_UNITS = 4;
const C_UNITS = 5;
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
gridLine: '#334155', // Slate 700
a: '#06b6d4', // Cyan 500 (Neon)
b: '#8b5cf6', // Violet 500 (Neon)
c: '#10b981',
勾股定理
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 行星配置数据
const PLANETS_DATA = [
{ name: "水星 (Mercury)", color: "#A5A5A5", size: 4, radius: 60, speed: 4.1, colorStop: "#E0E0E0" },
{ name: "金星 (Venus)", color: "#E2B669", size: 7, radius: 90, speed: 2.6, colorStop: "#F5D799" },
{ name: "地球 (Earth)", color: "#4F83CC", size: 7.5, radius: 130
太阳系动画
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export const KunKunBasketballView = () => {
const [time, setTime] = useState(0);
const [mode, setMode] = useState<'dribble' | 'shrug'>('dribble');
// Animation loop logic
useEffect(() => {
let animationFrameId: number;
const startTime = Date.now();
const animate = () => {
const now = Date.now();
const elapsed = (now - startTime) / 1000;
setTime(elapsed);
// Switch mod
生成一个坤坤打篮球
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const BG_COLOR = '#0f172a';
const HONEY_COLOR = '#fbbf24';
const TECH_BLUE = '#22d3ee';
const TEXT_COLOR = '#e2e8f0';
// Math Helpers
const toRad = (deg: number) => (deg * Math.PI) / 180;
const lerp = (start: number, end: number, t: number) => start + (end - start) * t;
const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3);
const easeInOutSine = (x:
人们注意到，蜜蜂在构筑巢穴时，蜂房结构为六角柱体，它的开口端
移开即停止播放
'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