SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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;
const CENTER_X = 400; // Earth Center X
const CENTER_Y = 300; // Earth Center Y
const ORBIT_RADIUS = 180;
const SUN_X = -100; // Sun is far left
const SUN_Y = 300;
// Phase Data Configuration
const PHASES = [
{ id: 0, name: '新月 (朔)', label: '农历初一', angle: 0, type: 'New Moon' },
{ id: 1, name: '蛾眉月', label: '农历初三', angle: 45, type: 'Waxing Crescent' },
{ id
月相的变化，设置农历初一、农历初三、农历初七、农历十五、农历
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const ACCENT_COLOR = "#38bdf8"; // Sky 400
const TEXT_COLOR = "#94a3b8"; // Slate 400
const SUN_COLOR = "#f59e0b"; // Amber 500
const MOON_COLOR = "#e2e8f0"; // Slate 200
const ORBIT_COLOR = "rgba(148, 163, 184, 0.2)";
const LUNAR_PHASES = [
{ day: 1, name: "新月 (朔)", type: "new" },
{ day: 4, name: "蛾眉月", type: "waxing-crescent" },
月相的变化，设置农历初一到三十，30个按钮，点击后中间显示月
移开即停止播放
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 物理/动画参数配置
const CONFIG = {
sunRadius: 45,
earthOrbitRx: 320, // 地球轨道长半轴
earthOrbitRy: 180, // 地球轨道短半轴
earthRadius: 16,
earthSpeed: 0.2, // 地球公转速度
moonOrbitRadius: 40,
moonRadius: 6,
moonSpeed: 2.5, // 月球绕地速度
};
export const SolarSystemView = () => {
const [time, setTime] = useState(0)
创建一个太阳系模型：中心是一个黄色的太阳，地球沿着椭圆轨道围
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const COLORS = {
thesis: '#06b6d4', // Cyan (Thesis)
antithesis: '#f43f5e', // Rose (Antithesis)
synthesis: '#8b5cf6', //
绘制事物发展过程中，矛盾运动的动态示意图。
移开即停止播放
'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
生成雨水形成的过程
广告
Ads移开即停止播放
'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';