SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Calculator, RefreshCcw, Play, Pause } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 动画阶段定义
const PHASES = {
INTRO: 0, // 初始状态：展示头
ASSUME: 1, // 假设阶段：全部长出2条腿
CALC_DIFF: 2, // 计算差异：展示当前脚数量与实际数量的差
DISTRIBUTE: 3, // 分配补足：多余的脚飞向兔子
REVEAL: 4, // 揭晓结果：变色区分鸡和兔
};
// 问题参数
const TOTAL_HEADS = 8;
const TOTAL_FEET = 26;
// 计算结果: 兔子 = (26 - 8*2) / 2 = 5, 鸡 = 3
// 缓动函数
鸡兔同笼问题解答思路
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion } from 'framer-motion';
import { MapPin, Wind, Scroll, RefreshCw, Play, Pause } from 'lucide-react';
// --- 配置常量 ---
const WIDTH = 1200;
const HEIGHT = 700;
const ANIMATION_DURATION = 25000; // 总时长 ms
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8'; // Sky blue
const GOLD_COLOR = '#facc15';
const TEXT_COLOR = '#e2e8f0';
// --- 李白生平轨迹关键节点数据 ---
const LOCATIONS = [
{ id: 1, yea
绘制一个李白一生行踪轨迹的动画，最好在每个停留点上标注时间和
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const SERVER_BASE_COLOR = '#1e293b';
const ACCENT_CYAN = '#06b6d4';
const ACCENT_GREEN = '#10b981';
const ACCENT_GOLD = '#f59e0b';
const
创建一个基于等距视角（Isometric）的SVG动画场景，
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const COURT_START_X = 400;
const COURT_WIDTH = 750;
const GROUND_Y = 550;
const NET_X = COURT_START_X + COURT_WIDTH / 2;
const NET_HEIGHT = 80;
// Grip Data Configuration
const GRIPS = [
{
id: 'continental',
name: '大陆式 (Continental)',
desc: '锤子握法，适合发球、截击、切削。',
bevel: 2, // Bevel 2
speed: 90,
spin: 20,
trajectory: 'flat',
color: '#38bdf8', /
网球 大陆式 东方式 半西与西方式的区别以及球速的特点
移开即停止播放
```javascript
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// 1. 数据与常量配置
// -----------------------------------------------------------------------------
// 历史节点数据：抗日战争关键战役与进程
const HISTORICAL_EVENTS = [
{
name: "沈阳", year: 1931, type: "start",
要显示完整的中国地图，副标题改为“日本侵华历史轨迹（1931
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// ----------------------------------------------------------------------
// CONFIGURATION & CONSTANTS
// ----------------------------------------------------------------------
const WIDTH = 1600;
const HEIGHT = 900;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
// Colors
const C_LEFT_BG = '#E5E7EB';
const C_LEFT_FG = '#374151'; // Dark gray for lines/text
const C_LEFT_ACCE
SVG画布尺寸设定为16:9，中间以半透明虚线分割。左半部分
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Zap, Activity, Battery, Anchor, Search, Cpu, Wifi, AlertTriangle } from 'lucide-react';
// ----------------------------------------------------------------------
// Constants & Config
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
const ACCENT_COLOR = "#3b82f6";
const SENSO
* 原理：利用铷原子传感器，基于原子自旋极化和磁共振原理的高
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1000;
const HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#06b6d4'; // Cyan
const SECONDARY_COLOR = '#8b5cf6'; // Violet
const ACCENT_COLOR = '#f43f5e'; // Rose
const TEXT_COLOR = '#e
离子阱检测气体和液体的动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Zap, Activity, Battery, Waves, Cpu, Search, AlertTriangle, CheckCircle2 } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// -----------------------------------------------------------------------------
// Utils & Constants
// -----------------------------------------------------------------------------
const COLORS = {
bg: '#0f172a',
primary: '#06b6d4', // Cyan
secondary: '#8b5cf6', // Violet
a
磁探头传感器
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Wind, CloudRain, Factory, AlertTriangle, Activity, Thermometer, Droplets, Zap, Gauge, Radio } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
// 配色方案
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
primary: '#38bdf8', // 量子蓝
water: '#06b6d4', // 水汽
carbon: '#10b981', // 碳
methane: '#f59e0b', // 甲烷
haze: '#8b5cf6',
量子微气象站
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Thermometer, Cpu, Zap, Activity, Snowflake } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 辅助函数：生成随机数
const random = (min, max) => Math.random() * (max - min) + min;
// 粒子组件：用于表现热噪声
const ThermalParticle = ({ x, y, tempRatio, time, id }) => {
// tempRatio: 1.0 (300K) -> 0.0 (10mK)
// 粒子速度和范围随温度降低而减小
const speed = 0.5 + tempRatio * 4.0;
const range = 2 + tempRatio * 30;
// 使