SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect } from 'react';
const CSharpStringImmutability = () => {
const [step, setStep] = useState(0);
const [cycle, setCycle] = useState(0);
// Animation constants
const TIMINGS = {
INIT: 800,
LINE1_HIGHLIGHT: 800,
LINE1_ALLOC: 1500,
LINE2_HIGHLIGHT: 1000,
LINE2_CALC: 1000,
LINE2_ALLOC: 1500,
LINE2_REPOINT: 1200,
LINE3_HIGHLIGHT: 1000,
LINE3_CALC: 1000,
LINE3_ALLOC: 1500,
LINE3_REPOINT: 1200,
GC_
用動畫說明C# String 的不變性
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ---------------------------------------------------------
// Constants & Config
// ---------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const TOTAL_PACKETS = 20;
const WINDOW_SIZE = 5;
const PACKET_SIZE = 40;
const GAP = 15;
const SENDER_Y = 150;
const RECEIVER_Y = 450;
const TRAVEL_TIME = 1500; // ms for one way travel
// Colors
const COLORS = {
bg: '
网络协议中的滑动窗口机制
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Configuration & Constants ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COURT_WIDTH = 800;
const COURT_HEIGHT = 400;
const PAD_X = (VIEW_WIDTH - COURT_WIDTH) / 2;
const PAD_Y = (VIEW_HEIGHT - COURT_HEIGHT) / 2;
const NET_X = VIEW_WIDTH / 2;
const KITCHEN_WIDTH = 64; // Non-Volley Zone width (scaled)
const KITCHEN_LEFT = NET_X - KITCHEN_WIDTH;
const KITCHEN_RIGHT = NET_X + KITCHEN_WIDTH;
//
画一个有球场动画的匹克球接发球，记分
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = VIEW_HEIGHT / 2;
// Helper to convert degrees to radians
const rad = (deg) => (deg * Math.PI) / 180;
// Helper for circular motion
const getCirclePt = (cx, cy, r, angleRad) => ({
x: cx + r * Math.cos(angleRad),
y: cy + r * Math.sin(angleRad),
});
export default function FOCAnimation() {
const [angle, setAngle] = useState(0);
const [his
根据工业级开源FOC---VESC项目制作 一个关于FOC电
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// Types & Constants
// ----------------------------------------------------------------------
type AnimalType = 'unknown' | 'chicken' | 'rabbit';
interface AnimalState {
id: number;
type: AnimalType;
legs: number;
x: number;
y: number;
isTransforming: boolean;
}
interface S
國小六年級解決雞兔同籠問題的數學動畫，可愛版本，在更詳盡的舉
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const PhysicsCentripetalDemo = () => {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
// 物理常量与配置
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 + 50;
const R = 250; // 圆盘半径 (像素)
const BLOCK_R = 180; // 木块距离圆心距离 (像素)
const TILT = 0.35; // 3D 视角倾斜系数
const OMEGA = 1.5; // 角速度 (rad/s)
// 模拟计算值
co
创建一个演示向心力的三维动画，一个圆盘上有一个木块，这个木块
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1000;
const HEIGHT = 600;
const DT = 0.016; // 60fps physics step
// Vector Math Helpers
const vecAdd = (v1, v2) => ({ x: v1.x + v2.x, y: v1.y + v2.y });
const vecScale = (v, s) => ({ x: v.x * s, y: v.y * s });
export default function NewtonLawsAnimation() {
const [sceneIndex, setSceneIndex] = useState(0);
const [elapsedSceneTime, setElapsedSceneTime] = useState(0);
// Physics State
//
演示牛顿三大定律
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Coordinate Definitions
const POSITIONS = {
CLIENT: { x: 100, y: 500, label: '用户 (Client)' },
RESOLVER: { x: 400, y: 350, label: '递归解析器 (Local DNS)' },
ROOT: { x: 500, y: 100, label: '根域名服务器 (Root .)' },
TLD: { x: 750, y: 180, label: '顶级域名服务器 (TLD .com)' },
AUTH: { x: 850, y: 400, label: '权威域名服务器 (Auth example.com)' },
};
const COLORS = {
bg: '#0f
域名解析的过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const WATER_LEVEL = 300;
const PILE_WIDTH = 120;
const PILE_X = VIEW_WIDTH / 2 - PILE_WIDTH / 2;
// Utility for random numbers
const random = (min, max) => Math.random() * (max - min) + min;
export default function ChlorideCorrosionAnimation() {
const [frame, setFrame] = useState(0);
const [phase, setPhase] = useState('diffusion'); // diffusion, depassivati
海水中的氯离子腐蚀支撑太阳能光伏板的独立C80混凝土管桩
移开即停止播放
import React, { useState, useEffect, useMemo, useRef } from 'react';
const AI_Music_Gen_View = () => {
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 562; // 16:9
const DURATION = 12000; // 12 seconds loop
const [time, setTime] = useState(0);
// Animation Loop
useEffect(() => {
let startTimestamp;
let reqId;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const elapsed = timestamp - startTimestamp;
setTime(elapsed % DUR
1. 特写：AI音乐合成系统，“青春励志歌词”自动填充，流行
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Utility for 3D projection
const project = (x, y, z, width, height, time) => {
const scale = 200 / (200 + z);
const x2d = x * scale + width / 2;
const y2d = y * scale + height / 2;
return { x: x2d, y: y2d, scale };
};
// Component: Script / Code Rain
const ScriptPanel = ({ active }) => {
const lines = useMemo(() => Array.from({ length: 12 }, (_, i) => ({
id: i