'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'); // 物理引擎引用变量 const velocityY = useRef(0); const positionY = useRef(APPLE_START_Y); const rotationRef = useRef(0); const angularVel = useRef(0); const reqRef = useRef(); // 重置动画 const reset = () => { setStatus('hanging'); setAppleY(APPLE_START_Y); setRotation(0); velocityY.current = 0; positionY.current = APPLE_START_Y; rotationRef.current = 0; angularVel.current = 0; if (reqRef.current) cancelAnimationFrame(reqRef.current); }; useEffect(() => { let startTime = Date.now(); const animate = () => { // 1. 悬挂阶段 (等待 1秒) if (status === 'hanging') { if (Date.now() - startTime > 1000) { setStatus('falling'); // 给一个微小的初始旋转力 angularVel.current = Math.random() * 2 - 1; } } // 2. 下落与弹跳阶段 else if (status === 'falling') { // 应用重力 velocityY.current += GRAVITY; positionY.current += velocityY.current; rotationRef.current += angularVel.current; // 地面碰撞检测 if (positionY.current >= GROUND_Y - 15) { // 15是苹果半径 positionY.current = GROUND_Y - 15; // 弹跳逻辑 if (Math.abs(velocityY.current) < 2) { // 速度足够小，停止弹跳 velocityY.current = 0; angularVel.current = 0; setStatus('resting'); startTime = Date.now(); // 重置时间用于休息阶段计时 } else { // 反弹 velocityY.current *= -BOUNCE_FACTOR; // 地面摩擦力减缓旋转 angularVel.current *= 0.8; } } setAppleY(positionY.current); setRotation(rotationRef.current); } // 3. 静止阶段 (等待 2秒后重置) else if (status === 'resting') { if (Date.now() - startTime > 2000) { reset(); startTime = Date.now(); // 重置计时器以重新开始循环 } } reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => { if (reqRef.current) cancelAnimationFrame(reqRef.current); }; }, [status]); // 计算阴影的不透明度和大小 (距离越近越明显) const distToGround = GROUND_Y - appleY; const shadowOpacity = Math.max(0, 0.5 - distToGround / 600); const shadowScale = Math.max(0.2, 1 - distToGround / 400); return ( ); };