SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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;