SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1920;
const VIEW_HEIGHT = 1080;
const TOTAL_DURATION = 27000; // 27 seconds
// 颜色定义
const COLORS = {
bg: '#0f172a',
ground: '#1e293b',
boySkin: '#fca5a5',
boyShirt: '#facc15',
boyPants: '#3b82f6',
fairyCore: '#e879f9',
fairyGlow: '#c084fc',
treeDark: '#0f172a',
treeLight: '#334155',
caveDark: '#020617',
crystal: '#22d3ee',
lightBeam: 'rgba(255,255,255,0.1)'
};
// 工具函数：
角色设计：设定2个核心角色（如少年与奇幻生物），风格为简约卡
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// CONSTANTS & DATA
// ----------------------------------------------------------------------
const STAGES = [
{ id: 'intel', title: '情报收集', sub: 'Reconnaissance', icon: 'TARGET' },
{ id: 'analysis', title: '攻击面分析', sub: 'Attack Surface', icon: 'SEARCH' },
{ id: 'acces
渗透测试或红队攻击一般遵循“情报收集 → 攻击面分析 → 初
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Utility to format address to Hex string (e.g., 0x1000)
const toHex = (num) => `0x${num.toString(16).toUpperCase()}`;
export default function CPointerAnimation() {
// --- State Management ---
// Memory Array: Addresses and Values
const [memoryBlock, setMemoryBlock] = useState([
{ address: 0x1000, value: 10, highlight: false },
{ address: 0x
**Create a professional, educa
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 粒子系统：桃源花瓣
const ParticleSystem = () => {
const [particles, setParticles] = useState(() =>
Array.from({ length: 60 }).map(() => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
size: Math.random() * 4 + 1,
speed: Math.random() * 1.5 + 0.5,
wobble: Math.random() * Math.PI * 2,
opacity: Ma
刘备，张飞，关羽，桃源三结义的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 辅助函数：生成圆周上的点
const getCirclePoint = (radius: number, angleDeg: number) => {
const angleRad = (angleDeg - 90) * (Math.PI / 180);
return {
x: CENTER_X + radius * Math.cos(angleRad),
y: CENTER_Y + radius * Math.sin(angleRad),
};
};
export const AsynchronousMotorView = () => {
//
做一个异步电机运行原理的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Colors
const BG_COLOR = "#0f172a";
const UNITY_COLOR = "#ffffff"; // Unity White/Grey
const UNITY_ACCENT = "#22d3ee"; // Cyan for tech feel
const UNREAL_COLOR = "#ffffff"; // Unreal White
const UNREAL_ACCENT = "#f472b6"; // Pink/Purple for contrast (or Blue) -> Let's use Unreal Blue #3b82f6
c
生成unity和Unreal Engine的比較動畫
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- 常量与配置 ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 配色方案：深色科技风
const THEME = {
bg: '#0f172a', // Slate 900
panel: '#1e293b', // Slate 800
grid: '#334155', // Slate 700
primary: '#0ea5e9', // Sky 500 (常规/电路)
cut: '#facc15', // Yellow 400 (切割 - 纯净)
coag: '#f97316', // Orange 500 (凝血 - 热力)
text: '#f1f5f9', // Slate 100
textDim: '#94a3b8', // Slate 400
手术室高频电刀工作原理
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export default function CICDCanaryView() {
const [phase, setPhase] = useState(0);
// 0: CI Build & Test
// 1: Deploy v2 (Init)
// 2: Canary 10%
// 3: Canary 50%
// 4: Full Rollout 100%
// 5: Decommission v1
const [trafficSplit, setTrafficSplit] = useState(0); // 0 to 1 (percentage to v2)
const [logs, setLogs] = useState<string[]>([]);
// Simulation Loop
useEffect(() => {
let timeout: NodeJS.T
ci/cd 灰度发布
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a'; // Slate-900
const NGINX_GREEN = '#00ac47';
const ACCENT_BLUE = '#38bdf8';
const SERVER_COLOR = '#1e293b';
const TEXT_COLOR = '#e2e8f0';
// Server Confi
nginx 负载均衡
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const FOCAL_LENGTH = 120; // 焦距 f
export default function ConvexLensImaging() {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
// 动画循环
const animate = (t: number) => {
setTime(t / 1000);
requestRef.current = requestAnimationFrame(animate);
};
use
凸透鏡成像原理
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const TOTAL_HEADS = 8;
const TOTAL_LEGS = 22;
export default function ChickenRabbitSolver() {
// Animation States
const [step, setStep] = useState(0);
const [animals, setAnimals] = useState(Array(TOTAL_HEADS).fill({ legs: 0, isRabbit: false }));
const [extraLegs, setExtraLegs] = useState(0);
const [flyingLegs, setFlyingLegs] = useState<{id: number, targetIdx: