实现帧动画的方法有多种，以下是一些常见的实现方式：
基于帧的动画
逐帧动画：每一帧都是一个完整的图像，通过连续播放这些帧来实现动画效果。例如，绘制一系列不同姿势的人物形象，然后按照一定的时间间隔依次显示这些图像。
插值动画：通过在两个关键帧之间进行插值计算，生成中间帧，然后连续播放这些中间帧来实现动画效果。例如，两个关键帧分别是一个小球在左边和右边的位置，通过计算这两个位置之间的中间位置，然后连续显示这些中间位置，就可以实现小球从左到右的平滑移动。
基于时间的动画
逐帧计算：通过在每一帧中计算图像的属性值，然后更新图像的位置、大小、颜色等属性来实现动画效果。例如，计算小球的位置、速度、加速度等属性，然后在每一帧中更新小球的位置，就可以实现小球的运动效果。
缓动函数：缓动函数是一种数学函数，可以根据时间的变化来计算图像的属性值。常用的缓动函数包括线性函数、二次函数、三次函数等。通过选择合适的缓动函数，可以实现各种不同的动画效果，如渐变、弹跳、旋转等。
使用 `requestAnimationFrame`
`requestAnimationFrame` 函数是浏览器提供的用于创建动画的API。通过定义一个动画执行的回调函数，然后在该函数中更新动画状态并通过 `requestAnimationFrame` 再次调用自己，形成一个递归的循环。例如：
```javascript
function animate() {
// 更新动画状态
// 比如移动位置、改变颜色等
requestAnimationFrame(animate);
}
```
在初始化或者某个事件触发时，调用 `animate` 函数启动动画：
```javascript
requestAnimationFrame(animate);
```
使用 `setInterval`
`setInterval` 函数是浏览器提供的用于定时执行函数的API。虽然 `requestAnimationFrame` 是实现动画的首选方法，但在某些情况下，您可能需要使用 `setInterval`。例如：
```javascript
var oTimer = setInterval(function() {
// 更新动画状态
}, 100); // 每100毫秒执行一次
```
使用CSS动画
CSS3 animation 可以通过定义关键帧和动画持续时间来实现帧动画。例如：
```css
@keyframes move {
0% { background-position: 0 0; }
50% { background-position: 100px 100px; }
100% { background-position: 0 0; }
}
.animate {
animation: move 2s infinite;
}
```
使用HTML5元素
可以通过改变HTML元素的 `style` 属性来实现帧动画。例如：
```javascript
var ele = document.getElementById('ele');
ele.style.backgroundImage = 'url(' + imgUrl + ')';
ele.style.backgroundPosition = positions[frameIndex];
frameIndex = (frameIndex + 1) % positions.length;
```
根据具体需求和场景，可以选择合适的帧动画实现方式。对于复杂的动画效果，可以考虑使用JavaScript结合CSS动画来实现更丰富的动画效果。