SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8';
const TEXT_COLOR = '#e2e8f0';
// --- Data & Configuration ---
const ELEMENT_DATA = [
{ z: 1, s: 'H', n: 'Hydrogen', cat: 'Nonmetal', desc: 'The Sun / Fuel', col: 1, row: 1 },
{ z: 2, s: 'He', n: 'Helium', cat: 'Noble Gas', desc: 'Balloons', col: 18, row: 1 },
{ z: 3, s: 'Li', n: 'Lithium', cat: 'Alkali
画一个完整的元素周期表，遍历每种元素的时候，画出元素所对应的
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// CONSTANTS & DATA
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CELL_SIZE = 52; // Slightly smaller to create more tech-density
const GAP = 8;
const THEME = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
textPrimary: '#f8fafc',
textSecondary: '#64
创建一个完整的元素周期表，下面展示惰性气体、卤素、金属等常见分类按钮，做成可交互动画，当用户点击分类按钮的时候，元素周期表中的对应元素进行高亮展示。下面的一组按钮距离面板太近了，往下挪一点。另外高亮只需要把对
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// DATA & CONFIGURATION
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 720;
const CELL_SIZE = 54;
const GAP = 6;
// Color Palette
const COLORS = {
bg: '#0f172a',
text: '#e2e8f0',
grid: '#1e293b',
highlight: '#38bdf8',
categories: {
'noble': '#a855f7', // Purple
'h
创建一个完整的元素周期表，下面展示惰性气体、卤素、金属等常见
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 配置常量
// ==========================================
const WIDTH = 900;
const HEIGHT = 500;
const TANK_WIDTH = 360;
const TANK_HEIGHT = 340;
const CENTER_X = WIDTH / 2;
const TANK_Y = (HEIGHT - TANK_HEIGHT) / 2 + 20;
const PARTICLE_COUNT = 250; // 增加粒子数量以增强视觉密度
// 颜色定义 - 赛博/生化科技风格
const THEME = {
bg: '#0f172a', // 深蓝底色 (用户指定)
primary: '#06b
生化分离专业的沉淀技术，你帮我做一个沉降的动画，通过加入试剂
移开即停止播放
```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 = 1000;
const VIEW_HEIGHT = 600;
const BEAKER_X = VIEW_WIDTH / 2;
const BEAKER_Y = VIEW_HEIGHT / 2 + 50;
const BEAKER_WIDTH = 300;
const BEAKER_HEIGHT = 350;
const WATER_LEVEL = 250; // Height of water from bottom of beaker
// Particle Types
type ParticleType = 'bubble' | 'spark' | 'smoke' | 'trail';
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
lif
请生成一个 金属钠在水中发生化学反应的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 粒子类型定义
interface Particle {
id: number;
x: number;
y: number;
speed: number;
radius: number;
opacity: number;
wobbleOffset: number;
type: 'reactor' | 'tube' | 'jar';
pathProgress?: number; // 0-1 for tube travel
}
export const HydrogenLabView = () => {
// 状态管理
const [bubbles, setBubbles] = useState<Particle[]>([]);
const [reactionProg
实验室制取氢气
广告
Ads移开即停止播放
```javascript
'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 Particle = ({ x, y, size, opacity }) => (
<circle cx={x} cy={y} r={size} fill="#fff" opacity={opacity} />
);
export const CovalentBondView = () => {
// 动画状态
// phase: 0-1 (approaching), 1-2 (bonding/stabilizing), 2-3 (holding), 3-4 (resetting)
const [t
共价键的形成
移开即停止播放
```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, useRef, useCallback } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const WATER_LEVEL = 250;
const ELECTRODE_Y_START = 150;
const ELECTRODE_HEIGHT = 350;
const CATHODE_X = 280; // Left, Negative, Hydrogen
const ANODE_X = 520; // Right, Positive, Oxygen
// Types
type ParticleType = 'H2O' | 'H2' | 'O2' | 'Electron';
interface Particle {
id: number;
x: number;
y: number;
type: ParticleType;
scale: number;
opacity: