SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：生成随机数据
const randomHex = () => Math.floor(Math.random() * 16).toString(16).toUpperCase();
const generateSectorData = (length = 8) => Array.from({ length }, () => randomHex()).join('');
export default function HardDriveAnimation() {
// 动画状态
const [armAngle, setArmAngle] = useState(20); // 读写臂角度
const [dataParticles, setDataParticles] = useState<any
机械硬盘读取数据
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const COLOR_BG = '#0f172a';
const COLOR_VOLTAGE = '#a855f7'; // Purple
const COLOR_RESISTANCE = '#f97316'; // Orange
const COLOR_CURRENT = '#06b6d4'; // Cyan
const COLOR_GRID = '#1e293b';
// Helper to generate particles
interface Particle {
id: number;
offset: number; // 0 to 1 position along path
}
export const OhmsLawAnimation = () => {
// Physics
ohm law 運動動畫
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef } from 'react';
// 配置常量
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const BG_COLOR = "#0f172a"; // 用户指定的背景色
const PRIMARY_COLOR = "#06b6d4"; // 科技蓝/青色 (Cyan)
const DANGER_COLOR = "#ef4444"; // 警告红 (Red)
const SUCCESS_COLOR = "#10b981"; // 成功绿 (Green)
const TEXT_MAIN = "#f1f5f9"; // 主要文字
const TEXT_SUB = "#94a3b8"; // 次要文字
// 缓动函数
const easeOutBack = (x) => {
const c1 = 1.70158;
const c3 = c1 + 1;
return 1 + c3
传统闪信的痛点文字应该显示出来
移开即停止播放
'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
硬质合金谐振脉冲喷嘴的原理
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// ----------------------------------------------------------------------
// 1. 配置与数据生成 (Configuration & Data)
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1400;
const VIEW_HEIGHT = 800;
const CELL_SIZE = 44; // 稍微增大一点
const GAP = 6;
// 计算表格总宽度: 18列 * (44+6) - 6 = 894
// 居中计算: (1400 - 894) / 2 = 253
const START_X = 253;
const START_Y = 140;
// 元素分类
画一个完整的元素周期表
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 900;
const VIEW_HEIGHT = 600;
// Utility for smooth easing
const easeInOutCubic = (t: number): number => {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
};
export const ArchimedesPrincipleView = () => {
// Animation State
const [time, setTime] = useState(0);
const [phase, setPhase] = useState<'idle' | 'lowering' | 'submerged' | 'analyzing'>('idle');
// Physic
阿基米德定律
广告
Ads移开即停止播放
'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, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
// 几何参数定义
const GEOMETRY = {
sourceX: 150,
barrierX: 500,
screenX: 850,
holeY: 300,
objectHeight: 160,
// 简单的相似三角形原理计算投影高度 (这里距离相等，所以是 1:1)
projectionHeight: 160,
};
export default function PinholeCameraAnimation() {
const [animationState, setAnimationState] = useState(0);
// 动画阶段控制
useEffect(() => {
const sequenc
小孔成像的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function CaoCaoWeighingElephant() {
// Animation Phases:
// 0: Idle/Intro
// 1: Elephant Boards (Boat Sinks)
// 2: Mark Water Level (Data Capture)
// 3: Elephant Exits (Boat Rises)
// 4: Load Rocks (Boat Sinks)
// 5: Match Level (Calculation)
// 6: Result
const [phase, setPhase] = useState(0);
const [boatY, setBoatY] = useState(0);
c
曹操称象的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = "#0f172a";
const COLOR_PC = "#38bdf8"; // Sky blue
const COLOR_MCU = "#fbbf24"; // Amber
const COLOR_WIRE_TX = "#22d3ee"; // Cyan
const COLOR_WIRE_RX = "#f472b6"; // Pink
const COLOR_DATA = "#4ade80"; // Green
const COLOR_TEXT = "#e2e8f0"; // Slate 200
// Helper to get bits from char (LSB first for UART)
const getBits = (char: string) => {
con
单片机中通过UART口，电脑和51单片机通信过程
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// 1. 基础数据与骨骼定义 (Poses & Skeleton)
// ----------------------------------------------------------------------
// 骨骼关键点索引
const JOINTS = {
HEAD: 0, NECK: 1, SPINE_TOP: 2, SPINE_BOTTOM: 3,
L_SHOULDER: 4, L_ELBOW: 5, L_HAND: 6,
R_SHOULDER: 7, R_ELBOW: 8, R_HAND: 9,
L_HIP