SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
export default function SolarSystemAnimation() {
// ==========================================
// 配置常量
// ==========================================
const WIDTH = 1200;
const HEIGHT = 700;
const SUN_R = 50;
const EARTH_R = 25;
const MOON_R = 8;
const ORBIT_A = 400; // 地球公转轨道长半轴
const ORBIT_B = 250; // 地球公转轨道短半轴
const MOON_ORBIT_R = 60; // 月球轨道半径
// 速度控制 (为了演示效果，速度非真实比例)
const SPEED_EARTH_REV = 0.2; /
创建一个基于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;
// 行星数据配置 (为了视觉效果，比例非真实天文比例)
const PLANETS = [
{ id: 'mercury', name: '水星', nameEn: 'Mercury', color: '#A5A5A5', size: 6, distance: 70, speed: 2.5, orbitColor: '#ffffff30' },
{ id: 'venus', name: '金星', nameEn: 'Venus', color: '#E3BB76', size: 10, distance: 100, speed: 1.8, orbitColo
太阳系行星运动
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CYCLE_DURATION = 24000; // 24 seconds for a full 24h cycle
const FPS = 60;
// Utility for color interpolation
const interpolateColor = (color1, color2, factor) => {
const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
return Math.round(parseInt(hex, 16) + factor * (parseInt(color2.slice(1).match(/.{2}/g)[i], 16) - parseInt(hex, 16)));
});
return `#${
生成一个昼夜循环的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const SUN_RADIUS = 60;
const EARTH_RADIUS = 30;
const MOON_RADIUS = 12;
const MOON_ORBIT_RADIUS = 200;
export default function SolarEclipseView() {
// 静态资源：星星背景
const stars = useMemo(() => {
return Array.from({ length: 150 }, () => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
size: Math.random() * 2 + 0.5,
opa
绘制日食的原理示意图
移开即停止播放
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:
地球与月亮的运行轨迹动画
移开即停止播放
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: '太阳系中最热的行星，拥有厚重的大气层，温室效应极强。' },
太阳系行星运行动画。要求：高清画质、颜色分明、效果明显。
广告
Ads移开即停止播放
'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;
// Helper to convert polar to cartesian
const toCartesian = (r, angle) => ({
x: CENTER_X + r * Math.cos(angle),
y: CENTER_Y + r * Math.sin(angle),
});
const PLANETS_CONFIG = [
{
id: 'moon',
name: 'Moon (Luna)',
cnName: '月球',
deferentR: 80,
epicycleR: 0,
defere
画一个地心说模型
移开即停止播放
'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;
// 宇宙常数与配置
const PLANET_CONFIG = [
{ id: 'mercury', name: '水星', nameEn: 'MERCURY', color: '#A5A5A5', size: 4, radius: 60, speed: 4.1, orbitColor: 'rgba(165, 165, 165, 0.3)' },
{ id: 'venus', name: '金星', nameEn: 'VENUS', color: '#E3BB76', size: 7, radius: 90, speed: 2.6, orbitColor: 'rgba(227,
太阳系动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CX = VIEW_WIDTH / 2;
const CY = VIEW_HEIGHT / 2;
// 行星配置数据
const PLANETS = [
{ name: '水星', en: 'Mercury', r: 4, orbitR: 60, speed: 4.1, color: ['#a1a1aa', '#52525b'] },
{ name: '金星', en: 'Venus', r: 7, orbitR: 90, speed: 2.6, color: ['#fde047', '#ca8a04'] },
{ name: '地球', en: 'Earth', r: 7.5, orbitR: 130, speed: 2.0, color: ['#3b82f6', '#1d4ed8'] },