SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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 GROUND_Y = 320;
const PIPE_Y = 420;
const PIPE_HEIGHT = 60;
const GATE_X = 650;
const TRAP_X = 350; // 沉井位置
type Phase = 'DRAINAGE' | 'RIVER_RISING' | 'DEFENSE' | 'RECEDIN
赣州福寿沟的工作原理，为何从宋代用到现在。
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const NUM_SUPPORTS = 20; // 液压支架数量
const SUPPORT_WIDTH = 40;
const SUPPORT_GAP = 10;
const TOTAL_FACE_WIDTH = NUM_SUPPORTS * (SUPPORT_WIDTH + SUPPORT_GAP);
const SHEARER_SPEED = 1.5
创建一个煤矿井下采煤机、刮板运输机、液压支架协同控制工作的动
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = 320;
const FRONT_X = 300;
const REAR_X = 750;
// 辅助函数：生成齿轮路径
const createGearPath = (cx: number, cy: number, radius: number, teeth: number, holeRadius: number = 0) => {
const outerRadius = radius;
const innerRadius = radius * 0.85;
const hole = holeRadius > 0 ? ` M ${cx} ${cy - holeRadius} A ${holeRadius} ${holeRadius} 0 1 0 ${cx} ${cy + h