SVG动画案例库
浏览精选的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是怎样执行指令集的？涉及到哪些硬件配合以及执行过程？
移开即停止播放
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动画
广告
Ads移开即停止播放
'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:
地球与月亮的运行轨迹动画
移开即停止播放
import React, { useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export const GeneralRelativityView = () => {
const canvasRef = useRef(null);
// 使用 useRef 存储所有动画状态，避免 React 重渲染
const animationState = useRef({
frame: 0,
phase: 0, // 0: Flat, 1: Warping, 2: Orbit, 3: Lensing
massStrength: 0, // 当前引力源强度
targetMassStrength: 0,
gridPoints: [],
planet: { x: -100, y: 100, vx: 0, vy: 0, active: false, trail: [] },
photons: [],
广义相对论基本原理
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1400;
const VIEW_HEIGHT = 900;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const PLANETS = [
{ id: 'mercury', name: '水星 (Mercury)', color: ['#e2e8f0', '#94a3b8'], distance: 110, size: 8, speed: 4.1, desc: '太阳系中最小的行星，也是最接近太阳的行星。表面布满撞击坑。' },
{ id: 'venus', name: '金星 (Venus)', color: ['#fde047', '#d97706'], distance: 160, size: 14, speed: 3.0, desc: '太阳系中最热的行星，拥有厚重的大气层，温室效应极强。' },
太阳系行星运行动画。要求：高清画质、颜色分明、效果明显。
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// ==========================================
// 常量与配置
// ==========================================
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点
const SCALE = 30; // 缩放比例
const GRID_SIZE = 1; // 网格单位
// 颜色配置 - 科技感配色
const THEME = {
bg: '#0f172a',
gridMain: '#1e293b',
gridSub: '#172033',
axis: '#64748b',
primary: '#0ea5
创建一个可交互动画，上面显示一组按钮：a、b、c，分别显示为
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点下移，留出上方空间
const SCALE = 30; // 缩放比例
// 科技感配色方案
const COLORS = {
bg: '#0f172a', // 深蓝灰背景
gridMain: '#334155', // 主网格
gridSub: '#1e293b', // 次网格
axis: '#94a3b8', // 坐标轴
primary: '#38bdf8', // 主色调（天蓝）- 曲线
primaryGlow: '#0ea5e9',// 发光色
secondary: '#f472b6', /