SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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 } 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
创建一个完整的元素周期表，下面展示惰性气体、卤素、金属等常见
移开即停止播放
import React, { useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export const GeneralRelativityView = () => {
const canvasRef = useRef(null);
// 使用 useRef 存储所有动画状态，避免 React 重渲染
const animationState = useRef({
frame: 0,
phase: 0, // 0: Flat, 1: Warping, 2: Orbit, 3: Lensing
massStrength: 0, // 当前引力源强度
targetMassStrength: 0,
gridPoints: [],
planet: { x: -100, y: 100, vx: 0, vy: 0, active: false, trail: [] },
photons: [],
广义相对论基本原理
移开即停止播放
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