SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：生成随机数
const random = (min: number, max: number) => Math.random() * (max - min) + min;
// 粒子类型定义
interface Particle {
id: number;
x: number;
y: number;
size: number;
speedY: number;
opacity: number;
phase: number;
}
// 信号包类型
interface SignalPacket {
id: number;
progress: number; // 0 to 1
direction: 'toSH' | 'toCS'; // Changsha to Sh
女孩去了湖南省长沙市的中南大学，男孩去了上海市的上海交通大学
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 行星数据配置 (为了视觉效果，比例并非完全真实，而是经过艺术调整)
// speed: 轨道角速度, distance: 轨道半径, size: 行星大小, color: 颜色
const PLANETS_DATA = [
{ name: '水星 (Mercury)', speed: 4.1, distance: 70, size: 4, color: '#A5A5A5', type: 'rocky' },
{ name: '金星 (Venus)', speed: 1.6, distance: 100, size: 7, color: '#E3BB76',
太阳系的九大行星运行图
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const SEA_LEVEL = 450;
// Utility for random numbers
const random = (min, max) => Math.random() * (max - min) + min;
// Types and Enums
type Phase = 'EVAPORATION' | 'CONDENSATION' | 'PRECIPITATION';
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
life: number;
maxLife: number;
type: 'vapor' | 'rain';
size: numbe
生成雨水形成的过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：角度转弧度
const toRad = (deg) => (deg * Math.PI) / 180;
// 农历相位数据
const PHASES = [
{
id: 0,
name: '新月 (朔)',
date: '农历初一',
angle: 0,
desc: '月球位于地球和太阳之间，暗面朝向地球。',
english: 'New Moon'
},
{
id: 1,
name: '上弦月',
date: '农历初七',
angle: 90,
desc: '月球与太阳形成90度角，右半边亮。',
english: 'First Quarter'
},
{
月相的变化，设置农历初一、农历初七、农历十五、农历二十二，四
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 常量定义
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const MOON_RADIUS = 120;
const CENTER_X = 350; // 月球中心X
const CENTER_Y = 300; // 月球中心Y
// 目标农历日期
const TARGET_DAYS = [1, 3, 5, 7, 10, 15, 18, 20, 23, 25, 27, 30];
// 辅助函数：生成星星
const generateStars = (count) => {
return Array.from({ length: count }, () => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
r: Math
月相的变化，设置农历初一、初三、初五、初七、初十、十五、十八
移开即停止播放
'use client';
import React, { useEffect, useRef } from 'react';
/**
* 创意说明：
* 该动画将“性交过程”这一生物学行为抽象为微观视角下的“受精过程”（Fertilization Process）。
* 这种处理方式既符合科学/科技感的视觉要求，又富有教育意义和艺术美感。
*
* 视觉风格：
* - 充满科技感的生物微观世界。
* - 粒子系统模拟精子游动。
* - 柔光与光晕效果模拟细胞质感。
* - 动态展示精子竞争、接触透明带、顶体反应及最终融合的瞬间。
*/
const BACKGROUND_COLOR = '#0f172a';
const EGG_COLOR_CORE = '#fb7185'; // 玫瑰粉
const EGG_COLOR_OUTER = '#f43f5e';
const SPERM_COLOR = '#38bdf8'; // 天空蓝
const SPERM_HEAD_COLOR = '#e0f2fe';
const GLOW_COLOR = '#ffffff';
精卵细胞融合过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Orbital Parameters
const A = 350; // Semi-major axis
const ECCENTRICITY = 0.6; // High eccentricity to
开普勒第二定律
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GROUND_Y = 500;
// 辅助函数：生成随机山脉路径
const generateMountainPath = (width: number, height: number, peaks: number, complexity: number) => {
let d = `M0 ${height}`;
const step = width / peaks;
for (let i = 0; i <= peaks; i++) {
const x = i * step;
// 随机高度，叠加正弦波使山脉更自然
const y = height - (Math.random() * complexity + 50) - Math.sin(i) * 20;
d
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BOX_SIZE = 50;
const GAP = 10;
const START_X = 50;
const TEXT_Y = 180;
const PATTERN_Y = 300;
const NEXT_TABLE_Y = 480;
// Theme Colors
const COLORS = {
bg: '#0f172a',
primary: '#38bdf8', // Light Blue
accent: '#f472b6', // Pink
success: '#4ade80', // Green
warning: '#fbbf24', // Amber
error: '#fb7185', // Red
text: '#e2e8f0', // Sla
模拟一个KMP算法查找过程
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 农历月相数据配置
const PHASES = [
{ day: 1, name: '初一', label: '新月 (New Moon)', visible: 0 },
{ day: 3, name: '初三', label: '蛾眉月 (Waxing Crescent)', visible: 0.15 },
{ day: 7, name: '初七', label: '上弦月 (First Quarter)', visible: 0.5 },
{ day: 15, name: '十五', label: '满月 (Full Moon)', visible: 1.0 },
{ day: 22, name: '廿二', label: '下弦月 (Third Quarte
月相的变化，设置农历初一、初三、初七、十五、二十二、二十七、
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// -----------------------------------------------------------------------------
// CONSTANTS & CONFIGURATION
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a'; // Slate-900
const PRIMARY_COLOR = '#38bdf8'; // Sky-400 (Orders)
const SECONDARY_COLOR = '#34d399'; // Emerald-400 (Goods)
const