SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export const MoonOrbitView = () => {
// 动画状态：角度 (0 ~ 2PI)
const [angle, setAngle] = useState(0);
const requestRef = useRef<number>();
// 轨道参数
const centerX = VIEW_WIDTH / 2;
const centerY = VIEW_HEIGHT / 2;
const orbitRadiusX = 350; // 椭圆长轴
const orbitRadiusY = 120; // 椭圆短轴 (模拟3D视角倾斜)
const earthRadius = 80;
const moonRadius = 20;
const
Moon orbiting Earth
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图配置
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 轨道参数
const A = 300; // 半长轴
const E = 0.6; // 离心率 (0.6 使得速度差异明显)
const B = A * Math.sqrt(1 - E * E); // 半短轴
const C = A * E; // 焦距 (中心到焦点的距离)
// 动画参数
const ANIMATION_SPEED = 0.015; // 平均角速度因子
const SWEEP_INTERVAL = 1.5; // 扫过区域的时间间隔 (弧度制下的平均近点角跨度)
export const KeplerSecondLawView = ()
Planetary elliptical orbit showing equal swept areas (Kepler's second law)
移开即停止播放
'use client';
import React, { useMemo, useEffect, useState } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
export const BlackHoleAnimation = () => {
// 生成背景星空
const stars = useMemo(() => {
return Array.from({ length: 150 }).map((_, i) => ({
id: i,
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
r: Math.random() * 1.5 + 0.5,
opacity: Math.random() * 0.7 + 0.3
Black hole with accretion disk
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const MOON_RADIUS = 60;
const CYCLE_DURATION = 29.53; // Synodic month in days
// Helper to generate random stars
const generateStars = (count) => {
return Array.from({ length: count }, (_, i) => ({
id: i,
x: Math.random() * VIEW_WIDTH,
y: Math.random() * (VIEW_HEIGHT * 0.7), // Keep stars in the sky
r: Math.random() * 1.5 + 0.5,
opacity: M
Phases of the moon
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// SOLAR SYSTEM VIEW (New High Fidelity)
// ============================================================================
interface PlanetConfig {
name: string;
radius: number; // size of the planet
distance: number; // distance from sun
speed: number; // orbital speed factor