SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：求解开普勒方程 M = E - e * sin(E)
// 使用牛顿迭代法求解偏近点角 E
const solveKepler = (M: number, e: number) => {
let E = M;
for (let i = 0; i < 5; i++) {
E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
}
return E;
};
export const KeplerLawAnimation = () => {
// 动画状态：Mean Anomaly (平近点角)，随时间线性增加
const [meanAnomaly, setMeanAnomaly] = useState(0);
Planetary elliptical orbit showing equal swept areas (Kepler's second law)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
export default function CvsJavaAnimation() {
// Animation phases:
// 0: Init
// 1: Java Showing Off (Kung Fu)
// 2: C Draws Weapon
// 3: C Fires (Beam)
// 4: Java Sliced (Impact)
// 5: Pause before reset
const [phase, setPhase] = useState(0);
const [time, setTime] = useState(0); // Used for continuous animations (waving)
// Animation Loop for continuous movement (Java's wavy motion)
useEffect(()
Stick-figure duel: C vs Java
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const EARTH_RADIUS = 140; // 稍微调大一点，更有气势
const ORBIT_RADIUS = 240;
// 3D 投影辅助函数
const project = (x: number, y: number, z: number) => {
const fov = 600;
const scale = fov / (fov + z);
return {
x: x * scale + VIEW_WIDTH / 2,
y: y * scale + VIEW_HEIGHT / 2,
scale: scale,
z: z
};
};
export default function NewsIntroAnimation() {
// 动画阶段: 0:
CCTV-style opener: ANIMORA orbiting globe turning into AI Animation Studio
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const GROUND_Y = 500;
const APPLE_START_X = 480;
const APPLE_START_Y = 220;
const GRAVITY = 0.6;
const BOUNCE_FACTOR = 0.5;
export const AppleFallAnimation = () => {
// 动画状态
const [appleY, setAppleY] = useState(APPLE_START_Y);
const [rotation, setRotation] = useState(0);
const [status, setStatus] = useState<'hanging' | 'falling' | 'resting'>('hanging');
// 物理
An apple falling from a tree
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const ANIMATION_DURATION = 8000; // 8 seconds per loop
export default function NewsIntroAnimation() {
const [time, setTime] = useState(0);
const requestRef = useRef(null);
const startTimeRef = useRef(null);
// Animation Loop
const animate = (timestamp) => {
if (!startTimeRef.current) startTimeRef.current = timestamp;
const elapsed = timestamp -
News-style intro: ANIMORA spins then becomes Animation Studio
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 400;
export default function LittleBoyDriving() {
const [frame, setFrame] = useState(0);
// 动画循环
useEffect(() => {
let animationFrameId;
const loop = () => {
setFrame((f) => f + 1);
animationFrameId = requestAnimationFrame(loop);
};
loop();
return () => cancelAnimationFrame(animationFrameId);
}, []);
// 动画参数计算
const roadSpeed = 8;