SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_UNITS = 3;
const B_UNITS = 4;
const C_UNITS = 5;
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
gridLine: '#334155', // Slate 700
a: '#06b6d4', // Cyan 500 (Neon)
b: '#8b5cf6', // Violet 500 (Neon)
c: '#10b981',
勾股定理
移开即停止播放
'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:
人们注意到，蜜蜂在构筑巢穴时，蜂房结构为六角柱体，它的开口端
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画组件：动滑轮组机械原理展示
export const PulleySystemAnimation = () => {
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
const ACCENT_COLOR = '#06b6d4'; // Cyan
const SECONDARY_COLOR = '#8b5cf6'; // Purple
const ROPE_COLOR = '#e2e8f0';
const TEXT_COLOR = '#94a3b8';
// 动画状态
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
const startTimeRef = use
动滑轮组
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
// 颜色定义
const COLORS = {
primary: "#38bdf8", // Sky blue
secondary: "#818cf8", // Indigo
accent: "#f472b6", // Pink
moe: "#34d399", // Emerald for Experts
grid: "#1e293b",
text: "#e2e8f0",
highlight: "#fbbf24"
};
export default function TransformerArchitectureView() {
// 动画阶段: 0=Input, 1=Encoder, 2=CrossAttn, 3=Decoder(MoE),
大模型transformers的执行流程图，增加多一个enc
移开即停止播放
```jsx
import React, { useState, useEffect, useMemo, useRef } from 'react';
const ChineseHistoryMap = () => {
const [currentIndex, setCurrentIndex] = useState(0);
const [progress, setProgress] = useState(0);
const [prevIndex, setPrevIndex] = useState(null);
// 动画配置
const DURATION_PER_ERA = 8000; // 延长单朝代展示时间以增强沉浸感
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 700;
// 数据源：增加开国皇帝 (emperor) 字段，微调描述
const dynasties = useMemo(() => [
{
id: 'qin',
name: '秦',
中国历史各个朝代变更，需要表现出各个朝代的名字、时间、以及疆
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Helper for smooth animation loop
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previousTimeRef = useRef();
const animate = time => {
if (previousTimeRef.current != undefined) {
const deltaTime = time - previousTimeRef.current;
callback(deltaTime, time);
}
previousTimeRef.current = time;
request
把这首古诗所描绘的景象画出来：“鹅鹅鹅，曲项向天歌。白毛浮绿
广告
Ads移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// --- 配置常量 ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;
const COLORS = {
bg: "#ebeef4",
grid: "#cbd5e1",
textMain: "#334155", // Slate 700
textSub: "#64748b", // Slate 500
primary: "#0ea5e9", // Sky 500 (主句)
secondary: "#8b5cf6", // Violet 500 (从句)
accent: "#f59e0b", // Amber 500 (高亮/逻辑)
success: "#10b981", // Emerald 500 (完成)
white: "#ffffff",
shadow: "rgba(148, 163, 184,
用动画表示英语定语从句的规则
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// 常量与类型定义
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GROUND_Y = 320;
const PIPE_Y = 420;
const PIPE_HEIGHT = 60;
const GATE_X = 650;
const TRAP_X = 350; // 沉井位置
type Phase = 'DRAINAGE' | 'RIVER_RISING' | 'DEFENSE' | 'RECEDIN
赣州福寿沟的工作原理，为何从宋代用到现在。
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
text: '#cbd5e1',
highlight: '#38bdf8',
app: '#f472b6', // Pink
tcp: '#818cf8', // Indigo
ip: '#34d399', // Emerald
eth: '#fbbf24', // Amber
binary: '#00ffcc',
};
const LAYERS = [
{ id: 'app', name: 'Application', label: '应用层', y: 100, color: COLORS.app },
{ id: 'transport', name: 'Transport'