SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = VIEW_HEIGHT / 2;
const CIRCLE_X = 200;
const RADIUS = 120;
const WAVE_START_X = 380;
const WAVE_WIDTH = 550;
export const SinusoidalMotion = () => {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
const pointsRef = useRef<{ x: number; y: number }[]>([]);
const animate = (t: number) => {
setTime((prev) => pr
我要一个sin角运动的动画
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef } from 'react';
// 配置常量
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const BG_COLOR = "#0f172a"; // 用户指定的背景色
const PRIMARY_COLOR = "#06b6d4"; // 科技蓝/青色 (Cyan)
const DANGER_COLOR = "#ef4444"; // 警告红 (Red)
const SUCCESS_COLOR = "#10b981"; // 成功绿 (Green)
const TEXT_MAIN = "#f1f5f9"; // 主要文字
const TEXT_SUB = "#94a3b8"; // 次要文字
// 缓动函数
const easeOutBack = (x) => {
const c1 = 1.70158;
const c3 = c1 + 1;
return 1 + c3
传统闪信的痛点文字应该显示出来
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// 1. 基础数据与骨骼定义 (Poses & Skeleton)
// ----------------------------------------------------------------------
// 骨骼关键点索引
const JOINTS = {
HEAD: 0, NECK: 1, SPINE_TOP: 2, SPINE_BOTTOM: 3,
L_SHOULDER: 4, L_ELBOW: 5, L_HAND: 6,
R_SHOULDER: 7, R_ELBOW: 8, R_HAND: 9,
L_HIP
畫一個太極拳的教學動畫
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const PADDING = 60;
const STEP_INTERVAL = 500; // ms
// 颜色配置
const COLORS = {
bg: '#0f172a', // slate-900
grid: '#334155', // slate-700
axis: '#94a3b8', // slate-400
line: '#3b82f6', // blue-500
lineGlow: '#60a5fa', // blue-400
dot: '#22d3ee', // cyan-400
text: '#cbd5e1', // slate-300
positive: '#10b981', // emerald-500
请生成一个简洁、美观、信息清晰的 SVG 动画，用于可视化抛
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 模拟数据：行星参数
// speed: 轨道角速度 (相对值)
// distance: 距离中心的半径
// size: 行星大小
// color: 基础色
// name: 中文名
const PLANETS = [
{ id: 'mercury', name: '水星', distance: 90, size: 6, speed: 2.5, color: '#A5A5A5', offset: 0 },
{ id: 'venus', name: '金星', distance: 130, size: 10, speed: 1.8, color: '#E3BB76', o
High-quality astronomical simu
移开即停止播放
```javascript
import React, { useState, useEffect, useRef } from 'react';
const TokenTheftAnimation = () => {
// 状态定义
// 0: 初始化 / 等待
// 1: 正常登录 (发送账号密码)
// 2: 获取凭证 (Server -> User: Token)
// 3: 场景切换 (浏览直播/网页)
// 4: 触发陷阱 (点击恶意链接)
// 5: 脚本扫描 (后台静默扫描)
// 6: 窃取凭证 (Token 被复制并发往黑客)
// 7: 异地顶号 (黑客使用 Token 登录)
// 8: 攻击完成 (用户掉线/被劫持)
const [phase, setPhase] = useState(0);
// 动画元素位置与状态
const [userPacket, setUserPacket] = useState({ x: 150, y: 400, opacity: 0, label: '' });
con
原理：当你登录微信（或其他APP）时，服务器会给你发一个像“
移开即停止播放
```javascript
import React, { useState, useEffect, useMemo, useRef } from 'react';
// ----------------------------------------------------------------------
// constants & types
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a'; // Slate-900
const COLOR_ACCENT = '#06b6d4'; // Cyan-500
const COLOR_ODD = '#ef4444'; // Red-500
const COLOR_EVEN = '#10b981'; // Emerald-500
const COLOR_TEXT = '#f8fafc
题干图形依次为：“五角星”“箭头嵌套图形”“类似‘日’字变形
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GROUND_Y = 500;
const RUNNER_X = 300; // Runner's horizontal position
const COLOR_BG = "#0f172a"; // Slate-900
const COLOR_ACCENT_1 = "#06b6d4"; // Cyan
const COLOR_ACCENT_2 =
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
移开即停止播放
'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 LOCATIONS = {
BEIJING: { x: 580, y: 180, label: 'Beijing (北京)', color: '#fbbf24' }, // Gold
SHANGHAI: { x: 650, y: 320, label: 'YRD (长三角)', color: '#38bdf8' }, // Cyan
SHENZHEN: { x: 560, y: 450, label: 'GBA (大湾区)', color: '#38bdf8' },
CHENGDU: { x: 380, y: 300, la
北京在地里位置的重要性，侧重经济方面
移开即停止播放
```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;
// 粒子系统：桃源花瓣
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