```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ---------------------------------------------------------------------- // 1. 基础数据与骨骼定义 (Poses & Skeleton) // ---------------------------------------------------------------------- // 骨骼关键点索引 const JOINTS = { HEAD: 0, NECK: 1, SPINE_TOP: 2, SPINE_BOTTOM: 3, L_SHOULDER: 4, L_ELBOW: 5, L_HAND: 6, R_SHOULDER: 7, R_ELBOW: 8, R_HAND: 9, L_HIP: 10, L_KNEE: 11, L_FOOT: 12, R_HIP: 13, R_KNEE: 14, R_FOOT: 15 }; // 预设招式关键帧 (坐标基于 VIEW_WIDTH/HEIGHT) // 模拟太极拳动作：起势 -> 抱球 -> 野马分鬃 -> 白鹤亮翅 const POSES = [ { name: "起势 (Preparation)", desc: "虚领顶劲，气沉丹田", breath: "Inhale", points: [ [500, 100], [500, 130], [500, 130], [500, 300], // Head, Neck, SpineT, SpineB [460, 140], [450, 220], [440, 290], // Left Arm [540, 140], [550, 220], [560, 290], // Right Arm [470, 300], [470, 420], [470, 540], // Left Leg [530, 300], [530, 420], [530, 540] // Right Leg ] }, { name: "抱球 (Hold the Ball)", desc: "含胸拔背，分清虚实", breath: "Exhale", points: [ [500, 105], [500, 135], [500, 135], [490, 300], [450, 145], [420, 200], [480, 240], // L Arm (Bottom holding ball) [550, 135], [560, 190], [520, 170], // R Arm (Top holding ball) [460, 300], [440, 430], [420, 540], // L Leg (Weight bearing) [520, 300], [540, 410], [560, 540] // R Leg (Empty step) ] }, { name: "野马分鬃 (Parting Wild Horse's Mane)", desc: "腰似车轴，劲贯指尖", breath: "Inhale", points: [ [480, 110], [480, 140], [480, 140], [470, 300], [440, 150], [400, 220], [350, 280], // L Arm (Pushing down/back) [520, 140], [580, 180], [640, 160], // R Arm (Striking forward) [450, 300], [400, 420], [350, 520], // L Leg (Back) [510, 300], [560, 400], [600, 520] // R Leg (Front Lunge) ] }, { name: "白鹤亮翅 (White Crane Spreads Wings)", desc: "沉肩坠肘，意守丹田", breath: "Exhale", points: [ [500, 100], [500, 130], [500, 130], [500, 300], [460, 140], [420, 200], [400, 280], // L Arm (Lower block) [540, 140], [580, 100], [620, 60], // R Arm (Upper block) [470, 300], [470, 420], [470, 540], // L Leg [530, 300], [530, 400], [550, 450] // R Leg (Empty stance) ] } ]; // 骨骼连接关系 const BONES = [ [JOINTS.HEAD, JOINTS.NECK], [JOINTS.NECK, JOINTS.SPINE_TOP], [JOINTS.SPINE_TOP, JOINTS.SPINE_BOTTOM], [JOINTS.NECK, JOINTS.L_SHOULDER], [JOINTS.L_SHOULDER, JOINTS.L_ELBOW], [JOINTS.L_ELBOW, JOINTS.L_HAND], [JOINTS.NECK, JOINTS.R_SHOULDER], [JOINTS.R_SHOULDER, JOINTS.R_ELBOW], [JOINTS.R_ELBOW, JOINTS.R_HAND], [JOINTS.SPINE_BOTTOM, JOINTS.L_HIP], [JOINTS.L_HIP, JOINTS.L_KNEE], [JOINTS.L_KNEE, JOINTS.L_FOOT], [JOINTS.SPINE_BOTTOM, JOINTS.R_HIP], [JOINTS.R_HIP, JOINTS.R_KNEE], [JOINTS.R_KNEE, JOINTS.R_FOOT], ]; // ---------------------------------------------------------------------- // 2. 辅助组件 // ---------------------------------------------------------------------- // 缓动函数 const easeInOutSine = (x) => -(Math.cos(Math.PI * x) - 1) / 2; // 线性插值 const lerp = (start, end, t) => start * (1 - t) + end * t; // 太极图背景 const TaijiBackground = ({ rotation }) => ( ); // ---------------------------------------------------------------------- // 3. 主动画组件 // ---------------------------------------------------------------------- export const TaiChiAnimation = () => { // 动画状态 const [currentPoseIdx, setCurrentPoseIdx] = useState(0); const [nextPoseIdx, setNextPoseIdx] = useState(1); const [progress, setProgress] = useState(0); // 0 to 1 const [handTrail, setHandTrail] = useState([]); // 轨迹 const [rotation, setRotation] = useState(0); // 引用以保持动画循环中的值 const requestRef = useRef(); const startTimeRef = useRef(); const DURATION = 4000; // 每个动作持续时间 ms // 动画循环 const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // 计算当前进度 let p = elapsed / DURATION; if (p >= 1) { // 切换到下一个动作 p = 0; startTimeRef.current = time; setCurrentPoseIdx(prev => (prev + 1) % POSES.length); setNextPoseIdx(prev => (prev + 1) % POSES.length); // 清空旧轨迹，开始新的一段 setHandTrail([]); } setProgress(p); setRotation(prev => (prev + 0.2) % 360); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [currentPoseIdx]); // Dependency on pose index to ensure state updates correctly // 计算当前骨骼位置 const currentPoints = useMemo(() => { const easedProgress = easeInOutSine(progress); const startPose = POSES[currentPoseIdx].points; const endPose = POSES[nextPoseIdx].points; const calculatedPoints = startPose.map((startPoint, i) => { const endPoint = endPose[i]; return [ lerp(startPoint[0], endPoint[0], easedProgress), lerp(startPoint[1], endPoint[1], easedProgress) ]; }); return calculatedPoints; }, [currentPoseIdx, nextPoseIdx, progress]); // 更新手部轨迹 useEffect(() => { if (currentPoints && currentPoints.length > 0) { const rightHand = currentPoints[JOINTS.R_HAND]; setHandTrail(prev => { const newTrail = [...prev, rightHand]; if (newTrail.length > 40) newTrail.shift(); // 限制轨迹长度 return newTrail; }); } }, [currentPoints]); // 获取当前动作信息 const currentMove = POSES[currentPoseIdx]; const nextMove = POSES[nextPoseIdx]; // 呼吸指示器大小 const breathRadius = currentMove.breath === "Inhale" ? lerp(20, 50, easeInOutSine(progress)) : lerp(50, 20, easeInOutSine(progress)); const breathColor = currentMove.breath === "Inhale" ? "#60a5fa" : "#34d399"; // Blue inhale, Green exhale return ( ); }; ```