SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a';
const COLOR_ACCENT = '#38bdf8'; // Sky blue / Cyan
const COLOR_ACCENT_2 = '#c084fc'; // Purple
const COLOR_GRID = '#1e293b';
// Helper for animation loop
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previousTimeRef = useRef();
const animate = time => {
if (previousTimeRef.current != undefined
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
export const OnlineLearningAnimation = () => {
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 动画状态管理
const [phase, setPhase] = useState(0);
// 0: Connecting (连接中)
// 1: Teacher Speaking (外教提问)
// 2: Student Thinking/Speaking (学员回答)
// 3: Correction/Optimization (纠正/优化)
// 4: Success/Score (完成)
const [waveOffset, se
线上学习外教口语的动画
移开即停止播放
'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';
// -----------------------------------------------------------------------------
// 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
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
移开即停止播放
```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
生成《第五项修炼》啤酒游戏的系统思考动态因果循环图，满足以下
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ROAD_Y = 400;
const STOP_LINE_X = 700;
const CAR_WIDTH = 120;
const CAR_HEIGHT = 50;
const BUFFER_DISTANCE = 40; // distance between cars
type LightState = 'red' | 'yellow' | 'green';
interface Car {
id: number;
x: number;
speed: number;
color: string;
type: 'sedan' | 'sport' | 'truck';
lane: number;
}
export const TrafficLightSimulation = ()
做一个马路红路灯和车辆路过时的演示动画，演示红灯停绿灯行
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 行星配置数据
const PLANETS_DATA = [
{ name: "水星 (Mercury)", color: "#A5A5A5", size: 4, radius: 60, speed: 4.1, colorStop: "#E0E0E0" },
{ name: "金星 (Venus)", color: "#E2B669", size: 7, radius: 90, speed: 2.6, colorStop: "#F5D799" },
{ name: "地球 (Earth)", color: "#4F83CC", size: 7.5, radius: 130
太阳系动画
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export const KunKunBasketballView = () => {
const [time, setTime] = useState(0);
const [mode, setMode] = useState<'dribble' | 'shrug'>('dribble');
// Animation loop logic
useEffect(() => {
let animationFrameId: number;
const startTime = Date.now();
const animate = () => {
const now = Date.now();
const elapsed = (now - startTime) / 1000;
setTime(elapsed);
// Switch mod
生成一个坤坤打篮球
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const BG_COLOR = '#0f172a';
const HONEY_COLOR = '#fbbf24';
const TECH_BLUE = '#22d3ee';
const TEXT_COLOR = '#e2e8f0';
// Math Helpers
const toRad = (deg: number) => (deg * Math.PI) / 180;
const lerp = (start: number, end: number, t: number) => start + (end - start) * t;
const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3);
const easeInOutSine = (x: