SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// 物理引擎与常量定义
// ----------------------------------------------------------------------
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;
const PARTICLE_COUNT = 100; // 10x10 Grid
const PARTICLE_RADIUS = 4;
const GRID_SPACING = 25;
// 阶段定义
const PHASE_ORDER = 'ORDER'; // 有序 (晶体/低熵)
const PHASE_TRANSITION = 'TRANSITION';
给我一个熵增的过程动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 5x7 Pixel grids for digits 0-9
const DIGIT_PATTERNS = {
0: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,1,1,0
],
1: [
0,0,1,0,0,
0,1,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,1,1,1,0
],
2: [
0,1,1,1,0,
1,0,0,0,1,
0,0,0,0,1,
0,0,0,1,0,
0,0,1,0,0,
0,1,0,0,0,
1,1,1,1,1
],
3: [
神经网络识别手写数字过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export const TransformerFlowView = () => {
// 动画状态管理
const [phase, setPhase] = useState(0); // 0: Embed, 1: PosEnc, 2: Attention, 3: AddNorm, 4: FFN, 5: Output
const [tick, setTick] = useState(0);
// 模拟输入数据
const tokens = useMemo(() => [
{ text: "AI", id: 0 },
{ text: "将", id: 1 },
{ text: "改", id: 2 },
{ text: "变", id: 3 },
{ te
大模型transformers的执行流程图
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 粒子生成辅助函数
const generateParticles = (count, type) => {
return Array.from({ length: count }, (_, i) => ({
id: i,
delay: Math.random() * 5,
speed: 2 + Math.random() * 2,
offset: Math.random() * 40 - 20, // 路径偏移
scale: 0.5 + Math.random() * 0.5
}));
};
export const PhotosynthesisView = () => {
// 静态生成粒子数据，避免重渲染抖动
const photons = useMemo(() =>
描述植物的光合作用
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const MOON_RADIUS = 140; // 稍微增大月球尺寸以增强视觉冲击力
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 - 20;
// 星星生成逻辑
const generateStars = (count) => {
return Array.from({ length: count }, () => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
size: Math.random() * 1.5 + 0.5,
opacity: Math.random() * 0.8
月球的月相变化，可以3D立体呈现
移开即停止播放
'use client';
import React, { useEffect, useRef, useState } from 'react';
export const DialysisPrincipleView = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [stats, setStats] = useState({ flowRate: 300, clearance: 0 });
const containerRef = useRef<HTMLDivElement>(null);
// Configuration
const CONFIG = {
width: 800,
height: 500,
membraneY: 250,
particleCount: 120,
colors: {
bg: '#0f172a',
bloodBase: '#7f1d1d',
bloodCell: '#ef44
透析原理
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// 辅助函数与常量
// ----------------------------------------------------------------------
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
text: '#94a3b8',
highlight: '#38bdf8', // Cyan 400
carbon: '#334155', // Slate 700
oxygen: '#ef4444', // Red 500
nitrogen:
酰胺基团水解反应
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// 视图常量
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 行星配置数据
const PLANETS_DATA = [
{ name: "水星", en: "Mercury", color: "#A5A5A5", size: 6, orbitX: 70, orbitY: 60, speed: 2.5, type: 'rock' },
{ name: "金星", en: "Venus", color: "#E3BB76", size: 10, orbitX: 110, orbitY: 95, speed: 1.8, type: 'rock' },
{ name: "地球", en: "Earth", color:
创建一个太阳系8大行星模型：中心是一个黄色的太阳，地球沿着椭
广告
Ads移开即停止播放
'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
创建一个煤矿井下采煤机、刮板运输机、液压支架协同控制工作的动
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// simple 8x8 bitmap representations
const CAT_GRID = [
0,0,0,0,0,0,0,0,
0,1,0,0,0,0,1,0, // Ears
1,1,1,0,0,1,1,1,
1,1,1,1,1,1,1,1, // Head
1,0,1,1,1,1,0,1, // Eyes
1,1,1,1,1,1,1,1,
0,1,1,1,1,1,1,0, // Chin
0,0,1,1,1,1,0,0,
];
const DOG_GRID = [
0,0,0,0,0,0,0,0,
0,0,1,1,1,1,0,0, // Head top
0,1,1,1,1,1,1,0,
1,1,1,1,1,1,1,1, // Ears flop
神经网络识别猫狗
移开即停止播放
'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