SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Play, Pause, RotateCcw, Maximize2, Calculator } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
const CYL_RADIUS = 70;
const CYL_HEIGHT = 180;
const PERSPECTIVE = 0.3; // 椭圆扁平度
const ANIMATION_DURATION = 12000; // 12秒完整演示
export default function CylinderSurfaceArea() {
// 动画核心状态
const [isPlaying, setIsPlaying] = useState(false);
const [isFinished, setIsFinished] = useState(false);
以展开圆柱的所有面，推导出圆柱的表面积动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Utilities
// -----------------------------------------------------------------------------
const WIDTH = 1000;
const HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#06b6d4'; // Cyan-500
const SECONDARY_COLOR = '#8b5cf6'; // Violet-500
const ACCENT_COLOR = '#f59e0b'; // Amber-500
const TEXT_COLOR = '#e2e8f0'
周长的原理
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_VAL = 5; // Units for a
const B_VAL = 3; // Units for b
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
gridLine: '#334155', // Slate 700
a: '#06b6d4', // Cyan 500 (a component)
b: '#d946ef', // Fuchsia 500 (b componen
做一个讲解完全平方公式的几何证明动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义
const COLORS = {
bg: '#0f172a',
text: '#f8fafc',
a: '#38bdf8', // 蓝色
b: '#fbbf24', // 金色
c: '#f472b6', // 粉色
accent: '#10b981', // 绿色
line: '#475569'
};
const DistributiveLaw = () => {
const [frame, setFrame] = useState(0);
const requestRef = useRef<number>();
const startTimeRef = useRef<number>(Date.now());
// 动画状态控制
// 0: 初始展示
生成一个数学中乘法分配律的动画讲解，包括括号中的加减法
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const BLOCK_SIZE = 40;
const GRID_COLS = 14;
const GRID_ROWS = 5;
const TOTAL_BLOCKS = GRID_COLS * GRID_ROWS;
// 动画阶段枚举
const PHASE = {
RAINING: 0,
STABILIZE: 1,
SHOW_1x1: 2,
SHOW_2x2: 3,
RESET: 4,
};
export default function GeometryRain() {
// 渲染状态：用于触发组件重绘
// 我们只存储可视化的必要数据，避免冗余
const [blocks, setBlocks] = useState([]);
const [ph
许多1×1的小方块如雨点般落下，铺满屏幕下方。 其中一个小
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 动画周期配置 (单位: ms)
const DURATION_MOVE = 4000;
const DURATION_PAUSE = 3000;
const DURATION_RESET = 1000;
const TOTAL_CYCLE = DURATION_MOVE + DURATION_PAUSE + DURATION_RESET;
// 数学参数
const TOTAL_DISTANCE = 1000; // km
const SPEED_A = 90; // km/h
const SPEED_B = 60; // km/h
const TOTAL_SPEED = SPEED_A + SPEED_B;
const MEET_TIME = TOTAL_DISTANCE / TOTAL_SPEED; // hours
export c
帮我生成一个小学数学相遇问题的动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// ==========================================
// 常量与配置
// ==========================================
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点
const SCALE = 30; // 缩放比例
const GRID_SIZE = 1; // 网格单位
// 颜色配置 - 科技感配色
const THEME = {
bg: '#0f172a',
gridMain: '#1e293b',
gridSub: '#172033',
axis: '#64748b',
primary: '#0ea5
创建一个可交互动画，上面显示一组按钮：a、b、c，分别显示为
广告
Ads移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点下移，留出上方空间
const SCALE = 30; // 缩放比例
// 科技感配色方案
const COLORS = {
bg: '#0f172a', // 深蓝灰背景
gridMain: '#334155', // 主网格
gridSub: '#1e293b', // 次网格
axis: '#94a3b8', // 坐标轴
primary: '#38bdf8', // 主色调（天蓝）- 曲线
primaryGlow: '#0ea5e9',// 发光色
secondary: '#f472b6', /
修改这个动画，现在参数面板拖动的时候响应位置和滑动条的圆点位
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点
const SCALE = 30; // 缩放比例：1单位 = 30像素
// 颜色定义 - 科技感配色
const COLORS = {
bg: '#0f172a', // 深蓝灰背景
gridMain: '#1e293b', // 主网格
gridSub: '#172033', // 次网格
axis: '#64748b', // 坐标轴
primary: '#0ea5e9', // 主色调（亮蓝）- 曲线
secondary: '#ec4899', // 次色调（粉红）- 顶点/标记
accent
修改这个动画，让左上角的面板吧里面的文字都能容纳进去，现在三
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画常量定义
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const SQUARE_SIZE = 200; // 正方形总大小
const GRID_COUNT = 5; // 5x5网格
const TILE_SIZE = SQUARE_SIZE / GRID_COUNT; // 每个格子大小 40
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 + 20; // 稍微下移一点留给标题
const TOP_LEFT_X = CENTER_X - SQUARE_SIZE / 2;
const TOP_LEFT_Y = CENTER_Y - SQUARE_SIZE / 2;
// 颜色定义
const COLORS = {
bg: '#0f172a',
stroke: '#38bdf8', // 浅
请帮我生成一个求正方形面积和周长的动画，适合小学生看，生动有
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1280;
const VIEW_HEIGHT = 720;
const BG_COLOR = "#0f172a";
const BOARD_COLOR = "#1e293b";
const TEAM_A_COLOR = "#facc15"; // Yellow
const TEAM_B_COLOR = "#3b82f6"; // Blue
const ACCENT_COLOR = "#10b981"; // Green
const TEXT_COLOR = "#f8fafc";
// --- Utility Components ---
// Standardized Fraction Component
const Fraction = ({ num, den, x, y, size = 24, color = TEXT_COLOR, opacity = 1 }) => (
<g transform