SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function ScbaTrainingAnimation() {
const [step, setStep] = useState(0); // 0: Intro, 1: Check, 2: Backpack, 3: Mask, 4: Breathe
const [subProgress, setSubProgress] = useState(0);
const [breathingVal, setBreathingVal] = useState(0);
// Animation Loop for continuous effects
useEffect(() => {
let animationFrameId;
const startTime = Date.now();
穿戴空气呼吸器的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 562; // 16:9 Aspect Ratio
const COLOR_BG = '#0f172a';
const COLOR_PINK = '#ff00cc'; // Danganronpa Pink
const COLOR_CYAN = '#00ffff';
const COLOR_YELLOW = '#ffcc00';
const COLOR_WHITE = '#ffffff';
export default function DanganronpaAnimation() {
const [phase, setPhase] = useState(0); // 0: Search, 1: Lock, 2: Fire, 3: Break
const [textIndex, setTextIndex] = useSt
弹丸论破
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Configuration & Constants ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COURT_WIDTH = 800;
const COURT_HEIGHT = 400;
const PAD_X = (VIEW_WIDTH - COURT_WIDTH) / 2;
const PAD_Y = (VIEW_HEIGHT - COURT_HEIGHT) / 2;
const NET_X = VIEW_WIDTH / 2;
const KITCHEN_WIDTH = 64; // Non-Volley Zone width (scaled)
const KITCHEN_LEFT = NET_X - KITCHEN_WIDTH;
const KITCHEN_RIGHT = NET_X + KITCHEN_WIDTH;
//
画一个有球场动画的匹克球接发球，记分
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = VIEW_HEIGHT / 2;
// Helper to convert degrees to radians
const rad = (deg) => (deg * Math.PI) / 180;
// Helper for circular motion
const getCirclePt = (cx, cy, r, angleRad) => ({
x: cx + r * Math.cos(angleRad),
y: cy + r * Math.sin(angleRad),
});
export default function FOCAnimation() {
const [angle, setAngle] = useState(0);
const [his
根据工业级开源FOC---VESC项目制作 一个关于FOC电
移开即停止播放
import React, { useState, useEffect, useMemo, useRef } from 'react';
const AI_Music_Gen_View = () => {
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 562; // 16:9
const DURATION = 12000; // 12 seconds loop
const [time, setTime] = useState(0);
// Animation Loop
useEffect(() => {
let startTimestamp;
let reqId;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const elapsed = timestamp - startTimestamp;
setTime(elapsed % DUR
1. 特写：AI音乐合成系统，“青春励志歌词”自动填充，流行
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Utility for 3D projection
const project = (x, y, z, width, height, time) => {
const scale = 200 / (200 + z);
const x2d = x * scale + width / 2;
const y2d = y * scale + height / 2;
return { x: x2d, y: y2d, scale };
};
// Component: Script / Code Rain
const ScriptPanel = ({ active }) => {
const lines = useMemo(() => Array.from({ length: 12 }, (_, i) => ({
id: i
2. 分屏1：左上生成剧本摘要，右上自动生成分镜草图； 3.
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// 视图配置：使用标准 HD 比例 1280x720 以保证 16:9 的完美适配
const VIEW_WIDTH = 1280;
const VIEW_HEIGHT = 720;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 配色方案：科技蓝、警告橙、数据白
const THEME = {
bg: '#0f172a', // Slate 900
primary: '#00f0ff', // Cyber Cyan
secondary: '#3b82f6', // Tech Blue
accent: '#f59e0b', // Amber Warning
highlight: '#ffffff', // Pure White
grid: '#1e293b', // Grid Lin
先出现中间一个16:9的方框，方框由是高科技感的光线环绕，先
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const PRIMARY_COLOR = "#38bdf8"; // Sky blue for Input
const SECONDARY_COLOR = "#f472b6"; // Pink for Output
const ACCENT_COLOR = "#4ade80"; // Green for Retention
const TEXT_COLOR = "#e2e8f0";
// Particle Types
type Particle = {
id: number;
x: number;
y: number;
vx: number;
vy: number;
life: number;
type: 'input' | 'out
知識を習得するために、自ら出力をする必要があります。そのよう
移开即停止播放
'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