[2,0.4],[2,0.4],[2,0.4],[2,-0.1],[2,-0.5],[-2,-1.1],[-2,-1.2],[-2,-0.9],[-2,0.1],[-2,-0.3],[-4,-0.9],[-4,-1.3],[-4,-1.3],[-4,-0.7],[-4,0.0],[-4,-0.8],[-4,-1.1],[-4,-0.9],[-4,-0.5],[-4,-0.4],[-2,-0.8],[-2,-0.6],[-2,-0.3],[-2,-0.1],[-2,0.0],[-2,-0.0],[-2,0.0],[2,0.1],[2,0.1],[2,0.2],[2,0.3],[2,0.4],[2,0.4],[2,0.4],[2,0.4]]
};
// 获取SVG元素
const tail = document.getElementById('tail');
const leftPaw = document.getElementById('leftPaw');
const rightPaw = document.getElementById('rightPaw');
const ball = document.getElementById('ball');
const pupilLeft = document.getElementById('pupilLeft');
const pupilRight = document.getElementById('pupilRight');
let currentFrame = 0;
let lastTime = 0;
const frameInterval = 1000 / animationData.fps; // 14fps = ~71.4ms per frame
function animate(currentTime) {
if (!lastTime) lastTime = currentTime;
const deltaTime = currentTime - lastTime;
if (deltaTime >= frameInterval) {
// 获取当前帧数据
const frame = currentFrame % animationData.totalFrames;
const data = animationData;
// 应用球的变换 (基础位置 + 位移)
const ballPos = data.ballPositions[frame];
ball.setAttribute('transform', `translate(${215 + ballPos[0]}, ${360 + ballPos[1]})`);
// 应用尾巴旋转
tail.setAttribute('transform', `rotate(${data.tailAngles[frame]}, 430, 280)`);
// 应用前腿旋转
leftPaw.setAttribute('transform', `rotate(${data.leftPawAngles[frame]}, 275, 335)`);
rightPaw.setAttribute('transform', `rotate(${data.rightPawAngles[frame]}, 255, 345)`);
// 应用眼睛位移
const eyeOffset = data.eyeOffsets[frame];
pupilLeft.setAttribute('transform', `translate(${eyeOffset[0]}, ${eyeOffset[1]})`);
pupilRight.setAttribute('transform', `translate(${eyeOffset[0]}, ${eyeOffset[1]})`);
currentFrame++;
lastTime = currentTime;
}
requestAnimationFrame(animate);
}
// 开始动画
requestAnimationFrame(animate);