SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Orbital Parameters
const A = 350; // Semi-major axis
const ECCENTRICITY = 0.6; // High eccentricity to
开普勒第二定律
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GROUND_Y = 500;
// 辅助函数：生成随机山脉路径
const generateMountainPath = (width: number, height: number, peaks: number, complexity: number) => {
let d = `M0 ${height}`;
const step = width / peaks;
for (let i = 0; i <= peaks; i++) {
const x = i * step;
// 随机高度，叠加正弦波使山脉更自然
const y = height - (Math.random() * complexity + 50) - Math.sin(i) * 20;
d
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BOX_SIZE = 50;
const GAP = 10;
const START_X = 50;
const TEXT_Y = 180;
const PATTERN_Y = 300;
const NEXT_TABLE_Y = 480;
// Theme Colors
const COLORS = {
bg: '#0f172a',
primary: '#38bdf8', // Light Blue
accent: '#f472b6', // Pink
success: '#4ade80', // Green
warning: '#fbbf24', // Amber
error: '#fb7185', // Red
text: '#e2e8f0', // Sla
模拟一个KMP算法查找过程
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 农历月相数据配置
const PHASES = [
{ day: 1, name: '初一', label: '新月 (New Moon)', visible: 0 },
{ day: 3, name: '初三', label: '蛾眉月 (Waxing Crescent)', visible: 0.15 },
{ day: 7, name: '初七', label: '上弦月 (First Quarter)', visible: 0.5 },
{ day: 15, name: '十五', label: '满月 (Full Moon)', visible: 1.0 },
{ day: 22, name: '廿二', label: '下弦月 (Third Quarte
月相的变化，设置农历初一、初三、初七、十五、二十二、二十七、
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// -----------------------------------------------------------------------------
// CONSTANTS & CONFIGURATION
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a'; // Slate-900
const PRIMARY_COLOR = '#38bdf8'; // Sky-400 (Orders)
const SECONDARY_COLOR = '#34d399'; // Emerald-400 (Goods)
const
生成《第五项修炼》啤酒游戏的系统思考动态因果循环图，满足以下
移开即停止播放
'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 = ()
做一个马路红路灯和车辆路过时的演示动画，演示红灯停绿灯行
广告
Ads移开即停止播放
'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