SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// V12 Firing Order (Example: 1-12-5-8-3-10-6-7-2-11-4-9)
// Defining offsets in degrees for when each cylinder hits Top Dead Center (Combustion)
// A 4-stroke cycle is 720 degrees. V12 fires every 60 degrees.
const FIRING_ORDER_OFFSETS = {
1: 0, 12: 60,
5: 120, 8: 180,
3: 240, 10: 300,
6: 360, 7: 420,
2: 480, 11: 540,
4: 600, 9: 660
};
// Cylinder Layo
制作一个V12发动机运动的过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// CONFIGURATION & UTILS
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GRID_SIZE = 6;
const TILE_WIDTH = 80;
const TILE_HEIGHT = 40; // Isometric squash factor
const Z_SCALE = 12; // Height multiplier
// Synthetic DEM Data (Elevation)
// Designed to form
🌧️ GIS 的集水區分析原理：水，是如何在地形上被「計算
移开即停止播放
'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混凝土管桩
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
/**
* CNC Lathe Animation Component
* High-fidelity visualization of CNC turning process
*/
export default function CNCLatheAnimation() {
// Constants
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = 300; // Spindle Axis
const CHUCK_X = 150;
const PART_LENGTH = 400;
const RAW_RADIUS = 80;
// Animation State
const [time, setTime] = useState(0);
const [spin
数控车床加工原理
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 粒子系统配置
const PARTICLE_COUNT = 150;
const FLOW_SPEED = 4;
const PULSE_FREQUENCY = 0.05; // 脉冲频率
interface Particle {
id: number;
x: number;
y: number;
offsetY: number; // 初始Y轴偏移
speed: number;
size: number;
}
export const HardAlloyResonantNozzle = () => {
const [time, setTime] = useState(0);
const reqRef = useRef<number>();
// 动画循环
use
硬质合金谐振脉冲喷嘴的原理
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
primary: '#0ea5e9', // Sky blue for text/highlights
metalLight: '#94a3b8',
metalDark: '#475569',
powderLoose: '#64748b', // Slate 500
powderCompressed: '#f59e0b', // Amber 500 for heat/pressure
success: '#10b981',
danger: '#ef4444',
textMain: '#f8fafc',
textSub: '#94a3b8'
};
// 粒子生成辅
粉末冶金压制过程动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 辅助函数：生成圆周上的点
const getCirclePoint = (radius: number, angleDeg: number) => {
const angleRad = (angleDeg - 90) * (Math.PI / 180);
return {
x: CENTER_X + radius * Math.cos(angleRad),
y: CENTER_Y + radius * Math.sin(angleRad),
};
};
export const AsynchronousMotorView = () => {
//
做一个异步电机运行原理的动画
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// 视图与布局常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = VIEW_HEIGHT / 2;
const OPTICAL_AXIS_Y = CENTER_Y;
// 组件位置定义
const POS_SUBJECT = 120;
const POS_LENS_GROUP = 450;
const POS_SENSOR = 750;
const POS_ISP = 880;
const POS_SCREEN = 960; // 屏幕边缘
// 颜色定义（适配 #e4e6ec 背景）
const COLORS = {
bg: '#e4e6ec',
grid: '#cbd5e1',
text: '#475569',
textLight: '#94a3b8',
primary: '
生成相机拍照的成像原画
广告
Ads移开即停止播放
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CAR_WIDTH = 220;
const CAR_LENGTH = 440;
export default function AutoSafetyResponse() {
const [phase, setPhase] = useState(0);
// 0: Cruising (L3 Scanning)
// 1: Impact Detected (Red Alert)
// 2: Hazards On (Blinking)
// 3: Unlock Doors
// 4: Open Windows
const [logs, setLogs] = useState<string[]>([]);
useEffect(() => {
let timeouts: NodeJS.Timeout[] = [
L3自动驾驶过程中发生事故，车辆能双闪预警、自动解锁车门、打
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#38bdf8'; // Cyan
const ACCENT_COLOR = '#f472b6'; // Pink
const TEXT_COLOR = '#e2e8f0';
// Gear configurations (Teeth count)
// Front is usually fixed in simple explanations, Rear changes.
const FRONT_TEETH = 44;
const REAR_GEARS = [
{ teeth: 32, label: '1挡 (爬坡)', type: 'Torque' },
{ teeth: 24, label
生成变速自行车的变速原理图
移开即停止播放
'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