SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// CONFIG & DATA
// ==========================================
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 800;
const BG_COLOR = "#0f172a";
const CYCLE_DURATION = 18000; // 18 seconds for full journey
// Stages definition
const STAGES = [
{ id: 'oral', label: '口腔 (Oral Cavity)', desc: '咀嚼与唾液混合', start: 0, end: 0.10, color: '#fca5a5' },
{ id: 'pharynx', label: '咽
【口腔场景】 画面：食物颗粒进入口腔，牙齿上下咀嚼，唾液腺分
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义
const COLORS = {
bg: '#0f172a',
primary: '#38bdf8', // 天蓝 - 电流/科技
accent: '#facc15', // 黄色 - 切割/高能
danger: '#f43f5e', // 红色 - 凝血/热量
text: '#e2e8f0',
grid: '#1e293b',
tissue: '#fda4af', // 组织粉色
tissueDark: '#be123c', // 烧焦色
pad: '#94a3b8', // 负极板
};
// 粒子系统 helper
const createParticle = (x: number, y: number, type: 'spark' | 'smoke') =>
手术室高频电刀工作原理
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// --- 配置常量 ---
const VIEW_WIDTH = 360;
const VIEW_HEIGHT = 640;
const WHEEL_CENTER_X = VIEW_WIDTH / 2;
const WHEEL_CENTER_Y = VIEW_HEIGHT * 0.4; // 稍微上移一点点以保证整体平衡
const WHEEL_RADIUS = 130;
const TOTAL_SEGMENTS = 15;
const SEGMENT_ANGLE = 360 / TOTAL_SEGMENTS;
// 布局微调：按钮位置
const BUTTON_Y = WHEEL_CENTER_Y + WHEEL_RADIUS + 55;
// 布局微调：卡片位置 (下移至底部区域，避免遮挡按钮)
const CARD_CENTER_Y = VIEW_HEIGHT - 85;
const BLESSINGS =
移动下面的卡片区域往下，不要遮挡住按钮。其他都保持不变
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
const VIEW_WIDTH = 360;
const VIEW_HEIGHT = 640;
const WHEEL_CENTER_X = VIEW_WIDTH / 2;
const WHEEL_CENTER_Y = VIEW_HEIGHT * 0.42;
const WHEEL_RADIUS = 130;
const TOTAL_SEGMENTS = 15;
const SEGMENT_ANGLE = 360 / TOTAL_SEGMENTS;
// 祝福语配置
const BLESSINGS = [
"接下来这一年，会有人认真对你好", // 01
"你不用再一个人硬撑了", // 02
"你会等到一个明确的回应", // 03
"你正在靠近一个转折点", // 04
"有些好事，已经在路上了", // 05
"这一次，你不是陪跑",
请生成一个【适配移动端竖屏（9:16）的可交互 SVG 动画
移开即停止播放
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
const ACCENT_COLOR = '#a855f7'; // Purple
const SUCCESS_COLOR = '#22c55e'; // Green
const TEXT_COLOR = '#e2e8f0';
// 依赖服务元数据
const SERVICES_DATA = [
{ id: 'auth', name: 'AuthService', color: '#f43f5e', icon: '🛡️' },
{ id: 'db', name: 'Database', color: '#3b82f6', icon: '💾' },
{ id: 'log
生成一个解释依赖注入原理的动画。依赖注入的常规做法是，创建一
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Styles
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const COMPONENT_BG = "#1e293b";
const COMPONENT_BORDER = "#334155";
const TEXT_MAIN = "#f8fafc";
const TEXT_SUB = "#94a3b8";
// Neon Colors
const COLOR_PC = "#3b82f6";
cpu是怎样执行指令集的？涉及到哪些硬件配合以及执行过程？
广告
Ads移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// CONSTANTS & DATA
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CELL_SIZE = 52; // Slightly smaller to create more tech-density
const GAP = 8;
const THEME = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
textPrimary: '#f8fafc',
textSecondary: '#64
创建一个完整的元素周期表，下面展示惰性气体、卤素、金属等常见分类按钮，做成可交互动画，当用户点击分类按钮的时候，元素周期表中的对应元素进行高亮展示。下面的一组按钮距离面板太近了，往下挪一点。另外高亮只需要把对
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// DATA & CONFIGURATION
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 720;
const CELL_SIZE = 54;
const GAP = 6;
// Color Palette
const COLORS = {
bg: '#0f172a',
text: '#e2e8f0',
grid: '#1e293b',
highlight: '#38bdf8',
categories: {
'noble': '#a855f7', // Purple
'h
创建一个完整的元素周期表，下面展示惰性气体、卤素、金属等常见
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const SUN_RADIUS = 50;
const EARTH_RADIUS = 25;
const ORBIT_RX = 380; // Orbit X radius
const ORBIT_RY = 120; // Orbit Y radius (flattened for 3D effect)
const AXIS_TILT = 23.5; // Earth's tilt in degrees
// Helper for generating random stars
const generateStars = (count) => {
return Array.from({ length: count }, () => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random
小学六年级科学上册，模拟地球的自转和公转。展示出公转产生一年
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 450;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT * 0.4; // Sun positioned slightly higher for vertical layout
export const SolarSystemVertical = () => {
const [tick, setTick] = useState(0);
const requestRef = useRef();
// Performance optimization: Generate static data once
const staticData = useMemo(() => {
// Background particles (darker for white b
生成一个透明背景的太阳svg动画
移开即停止播放
'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;
// Orbit Configuration
const EARTH_ORBIT_R = 220;
const MOON_ORBIT_R = 60;
const EARTH_SPEED = 0.005; // Radians per frame
const MOON_SPEED = 0.06; // Radians per frame
// Helper to generate random stars
const generateStars = (count) => {
return Array.from({ length: count }, () => ({
x: