本文深入解析JavaScript帧动画的实现原理，对比GIF与CSS3动画的局限性，重点介绍基于背景位置变化的推荐方案。通过需求分析设计通用帧动画库，涵盖图片预加载、链式调用接口及时间轴控制，并提供完整代码示例与Webpack打包配置指南。
JavaScript帧动画概述与原理
前面的话
帧动画的核心机制是在连续的关键帧中分解动作，即在时间轴的每一帧上逐帧绘制不同内容，从而形成连续播放的视觉效果。由于采用逐帧绘制的方式，帧动画具备极高的灵活性，能够表现几乎任何复杂的动画效果。本文将详细阐述JavaScript实现帧动画的具体方法。
概述
【分类】
目前常见的帧动画实现方式主要有三种：GIF格式、CSS3 Animation以及JavaScript。
GIF和CSS3 Animation在控制动画的暂停与播放时缺乏足够的灵活性，且难以进行更深层次的扩展。此外，GIF格式无法捕捉动画完成的事件。因此，通常推荐使用JavaScript来实现帧动画，以获得更好的控制能力。
【原理】
使用JavaScript实现帧动画主要有两种技术路径。
第一种方式涉及多张帧动画图片，通过一个image标签承载图片，并定时改变该标签的src属性（此方法不推荐）。
第二种方式是将所有动画关键帧绘制在一张图片中，将该图片设置为元素的background-image，并通过定时改变元素的background-position属性来实现动画效果（此方法为推荐方案）。
由于第一种方式需要发起多个HTTP请求，影响性能，因此通常推荐使用第二种方式。
【实例】
下面展示一个使用帧动画制作的具体实例。
<div id="rabbit" ></div>
<button id="btn">暂停运动</button>
<script>
var url = 'rabbit-big.png';
var positions = ['0,-854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];
var ele = document.getElementById('rabbit');
var oTimer = null;
btn.onclick = function(){
if(btn.innerHTML == '开始运动'){
frameAnimation(ele,positions,url);
btn.innerHTML = '暂停运动';
}else{
clearTimeout(oTimer);
btn.innerHTML = '开始运动';
}
}
frameAnimation(ele,positions,url);
function frameAnimation(ele,positions,url){
ele.style.backgroundImage = 'url(' + url + ')';
ele.style.backgroundRepeat = 'no-repeat';
var index = 0;
function run(){
var pos = positions[index].split(' ');
ele.style.backgroundPosition = pos[0] + 'px ' + pos[1] + 'px';
index++;
if(index >= positions.length){
index = 0;
}
oTimer = setTimeout(run,80);
}
run();
}
</script>通用帧动画库设计与实现
通用帧动画
接下来，我们将设计一个通用的帧动画库。
【需求分析】
1、支持图片预加载功能。
2、支持两种动画播放方式，并允许自定义每一帧的动画效果。
3、支持对单组动画控制循环次数，且可支持无限次循环。
4、支持在单组动画完成后，自动执行下一组动画。
5、支持在每个动画执行完成后设置等待时间。
6、支持动画的暂停和继续播放功能。
7、支持在动画完成后执行回调函数。
【编程接口】
1、loadImage(imglist)：用于预加载图片。
2、changePosition(ele, positions, imageUrl)：通过改变元素的background-position属性来实现动画。
3、changeSrc(ele, imglist)：通过改变image元素的src属性来实现动画。
4、enterFrame(callback)：定义每一帧动画执行的函数，允许用户自定义每一帧的回调函数。
5、repeat(times)：设置动画重复执行的次数，若times为空则表示无限次。
6、repeatForever()：无限重复上一次动画，功能等同于repeat()。
7、wait(time)：设置每个动画执行完成后的等待时间。
8、then(callback)：设置动画执行完成后的回调函数。
9、start(interval)：启动动画执行，interval参数表示动画执行的间隔时间。
10、pause()：用于暂停动画。
11、restart()：从上一次暂停的位置重新开始执行动画。
12、dispose()：用于释放资源。
【调用方式】
该库支持链式调用，接口设计采用动词形式以描述操作。
【代码设计】
1、将图片预加载、动画执行、动画结束等一系列操作视为一条任务链。该任务链包含同步执行和异步定时执行两种任务类型。
2、记录当前任务链的索引位置。
3、每个任务执行完毕后，通过调用next方法执行下一个任务，同时更新任务链的索引值。
【接口定义】
'use strict';
/* 帧动画库类
* @constructor
*/
function FrameAnimation(){}
/* 添加一个同步任务，去预加载图片
* @param imglist 图片数组
*/
FrameAnimation.prototype.loadImage = function(imglist){}
/* 添加一个异步定时任务，通过定时改变图片背景位置，实现帧动画
* @param ele dom对象
* @param positions 背景位置数组
* @param imageUrl 图片URL地址
*/
FrameAnimation.prototype.changePosition = function(ele,positions,imageUrl){}
/* 添加一个异步定时任务，通过定时改变image标签的src属性，实现帧动画
* @param ele dom对象
* @param imglist 图片数组
*/
FrameAnimation.prototype.changeSrc = function(ele,imglist){}
/* 添加一个异步定时任务，自定义动画每帧执行的任务函数
* @param tastFn 自定义每帧执行的任务函数
*/
FrameAnimation.prototype.enterFrame = function(taskFn){}
/* 添加一个同步任务，在上一个任务完成后执行回调函数
* @param callback 回调函数
*/
FrameAnimation.prototype.then = function(callback){}
/* 开始执行任务，异步定时任务执行的间隔
* @param interval
*/
FrameAnimation.prototype.start = function(interval){}
/* 添加一个同步任务，回退到上一个任务，实现重复上一个任务的效果，可以定义重复的次数
* @param times 重复次数
*/
FrameAnimation.prototype.repeat = function(times){}
/* 添加一个同步任务，相当于repeat()，无限循环上一次任务
*
*/
FrameAnimation.prototype.repeatForever = function(){}
/* 设置当前任务执行结束后到下一个任务开始前的等待时间
* @param time 等待时长
*/
FrameAnimation.prototype.wait = function(time){}
/* 暂停当前异步定时任务
*
*/
FrameAnimation.prototype.pause = function(){}
/* 重新执行上一次暂停的异步定时任务
*
*/
FrameAnimation.prototype.restart = function(){}
/* 释放资源
*
*/
FrameAnimation.prototype.dispose = function(){}图片预加载
图片预加载是一个相对独立的功能，可以将其封装为一个独立的模块imageloader.js。
'use strict';
/**
* 预加载图片函数
* @param images 加载图片的数组或者对象
* @param callback 全部图片加载完毕后调用的回调函数
* @param timeout 加载超时的时长
*/
function loadImage(images,callback,timeout){
//加载完成图片的计数器
var count = 0;
//全部图片加载成功的标志位
var success = true;
//超时timer的id
var timeoutId = 0;
//是否加载超时的标志位
var isTimeout = false;
//对图片数组(或对象)进行遍历
for(var key in images){
//过滤prototype上的属性
if(!images.hasOwnProperty(key)){
continue;
}
//获得每个图片元素
//期望格式是object:{src:xxx}
var item = images[key];
if(typeof item === 'string'){
item = images[key] = {
src:item
};
}
//如果格式不满足期望，则丢弃此条数据，进行下一次遍历
if(!item || !item.src){
continue;
}
//计数+1
count++;
//设置图片元素的id
item.id = '__img__' + key + getId();
//设置图片元素的img，它是一个Image对象
item.img = window[item.id] = new Image();
doLoad(item);
}
//遍历完成如果计数为0，则直接调用callback
if(!count){
callback(success);
}else if(timeout){
timeoutId = setTimeout(onTimeout,timeout);
}
/**
* 真正进行图片加载的函数
* @param item 图片元素对象
*/
function doLoad(item){
item.status = 'loading';
var img = item.img;
//定义图片加载成功的回调函数
img.onload = function(){
success = success && true;
item.status = 'loaded';
done();
}
//定义图片加载失败的回调函数
img.onerror = function(){
success = false;
item.status = 'error';
done();
}
//发起一个http(s)请求
img.src = item.src;
/**
* 每张图片加载完成的回调函数
*/
function done(){
img.onload = img.onerror = null;
try{
delete window[item.id];
}catch(e){
}
//每张图片加载完成，计数器减1，当所有图片加载完成，且没有超时的情况，清除超时计时器，且执行回调函数
if(!--count && !isTimeout){
clearTimeout(timeoutId);
callback(success);
}
}
}
/**
* 超时函数
*/
function onTimeout(){
isTimeout = true;
callback(false);
}
}
var __id = 0;
function getId(){
return ++__id;
}
module.exports = loadImage;时间轴
在动画处理中，通常通过迭代使用setTimeout()来实现，但这种方法的时间间隔并不精确。下面将实现一个时间轴类timeline.js以提高精度。
'use strict';
var DEFAULT_INTERVAL = 1000/60;
//初始化状态
var STATE_INITIAL = 0;
//开始状态
var STATE_START = 1;
//停止状态
var STATE_STOP = 2;
var requestAnimationFrame = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function(callback){
return window.setTimeout(callback,(callback.interval || DEFAULT_INTERVAL));
}
})();
var cancelAnimationFrame = (function(){
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || function(id){
return window.clearTimeout(id);
}
})();
/**
* 时间轴类
* @constructor
*/
function Timeline(){
this.animationHandler = 0;
this.state = STATE_INITIAL;
}
/**
* 时间轴上每一次回调执行的函数
* @param time 从动画开始到当前执行的时间
*/
Timeline.prototype.onenterframe = function(time){
}
/**
* 动画开始
* @param interval 每一次回调的间隔时间
*/
Timeline.prototype.start = function(interval){
if(this.state === STATE_START){
return;
}
this.state = STATE_START;
this.interval = interval || DEFAULT_INTERVAL;
startTimeline(this,+new Date());
}
/**
* 动画停止
*/
Timeline.prototype.stop = function(){
if(this.state !== STATE_START){
return;
}
this.state = STATE_STOP;
//如果动画开始过，则记录动画从开始到现在所经历的时间
if(this.startTime){
this.dur = +new Date() - this.startTime;
}
cancelAnimationFrame(this.animationHandler);
}
/**
* 重新开始动画
*/
Timeline.prototype.restart = function(){
if(this.state === STATE_START){
return;
}
if(!this.dur || !this.interval){
return;
}
this.state = STATE_START;
//无缝连接动画
startTimeline(this,+new Date()-this.dur);
}
/**
* 时间轴动画启动函数
* @param timeline 时间轴的实例
* @param startTime 动画开始时间戳
*/
function startTimeline(timeline,startTime){
//记录上一次回调的时间戳
var lastTick = +new Date();
timeline.startTime = startTime;
nextTick.interval = timeline.interval;
nextTick();
/**
* 每一帧执行的函数
*/
function nextTick(){
var now = +new Date();
timeline.animationHandler = requestAnimationFrame(nextTick);
//如果当前时间与上一次回调的时间戳大于设置的时间间隔，表示这一次可以执行回调函数
if(now - lastTick >= timeline.interval){
timeline.onenterframe(now - startTime);
lastTick = now;
}
}
}
module.exports = Timeline;动画类实现
以下是动画类animation.js的完整实现代码。
'use strict';
var loadImage = require('./imageloader');
var Timeline = require('./timeline');
//初始化状态
var STATE_INITIAL = 0;
//开始状态
var STATE_START = 1;
//停止状态
var STATE_STOP = 2;
//同步任务
var TASK_SYNC = 0;
//异步任务
var TASK_ASYNC = 1;
/**
* 简单的函数封装，执行callback
* @param callback 执行函数
*/
function next(callback){
callback && callback();
}
/* 帧动画库类
* @constructor
*/
function FrameAnimation(){
this.taskQueue = [];
this.index = 0;
this.timeline = new Timeline();
this.state = STATE_INITIAL;
}
/* 添加一个同步任务，去预加载图片
* @param imglist 图片数组
*/
FrameAnimation.prototype.loadImage = function(imglist){
var taskFn = function(next){
loadImage(imglist.slice(),next);
};
var type = TASK_SYNC;
return this._add(taskFn,type);
}
/* 添加一个异步定时任务，通过定时改变图片背景位置，实现帧动画
* @param ele dom对象
* @param positions 背景位置数组
* @param imageUrl 图片URL地址
*/
FrameAnimation.prototype.changePosition = function(ele,positions,imageUrl){
var len = positions.length;
var taskFn;
var type;
if(len){
var me = this;
taskFn = function(next,time){
if(imageUrl){
ele.style.backgroundImage = 'url(' + imageUrl + ')';
}
//获得当前背景图片位置索引
var index = Math.min(time/me.interval|0,len);
var position = positions[index-1].split(' ');
//改变dom对象的背景图片位置
ele.style.backgroundPosition = position[0] + 'px ' + position[1] + 'px';
if(index === len){
next();
}
}
type = TASK_ASYNC;
}else{
taskFn = next;
type = TASK_SYNC;
}
return this._add(taskFn,type);
}
/* 添加一个异步定时任务，通过定时改变image标签的src属性，实现帧动画
* @param ele dom对象
* @param imglist 图片数组
*/
FrameAnimation.prototype.changeSrc = function(ele,imglist){
var len = imglist.length;
var taskFn;
var type;
if(len){
var me = this;
taskFn = function(next,time){
//获得当前背景图片位置索引
var index = Math.min(time/me.interval|0,len);
//改变image对象的背景图片位置
ele.src = imglist[index-1];
if(index === len){
next();
}
}
type = TASK_ASYNC;
}else{
taskFn = next;
type = TASK_SYNC;
}
return this._add(taskFn,type);
}
/* 添加一个异步定时任务，自定义动画每帧执行的任务函数
* @param tastFn 自定义每帧执行的任务函数
*/
FrameAnimation.prototype.enterFrame = function(taskFn){
return this._add(taskFn,TASK_ASYNC);
}
/* 添加一个同步任务，在上一个任务完成后执行回调函数
* @param callback 回调函数
*/
FrameAnimation.prototype.then = function(callback){
var taskFn = function(next){
callback(this);
next();
};
var type = TASK_SYNC;
return this._add(taskFn,type);
}
/* 开始执行任务，异步定义任务执行的间隔
* @param interval
*/
FrameAnimation.prototype.start = function(interval){
if(this.state === STATE_START){
return this;
}
//如果任务链中没有任务，则返回
if(!this.taskQueue.length){
return this;
}
this.state = STATE_START;
this.interval = interval;
this._runTask();
return this;
}
/* 添加一个同步任务，回退到上一个任务，实现重复上一个任务的效果，可以定义重复的次数
* @param times 重复次数
*/
FrameAnimation.prototype.repeat = function(times){
var me = this;
var taskFn = function(){
if(typeof times === 'undefined'){
//无限回退到上一个任务
me.index--;
me._runTask();
return;
}
if(times){
times--;
//回退
me.index--;
me._runTask();
}else{
//达到重复次数，跳转到下一个任务
var task = me.taskQueue[me.index];
me._next(task);
}
}
var type = TASK_SYNC;
return this._add(taskFn,type);
}
/* 添加一个同步任务，相当于repeat()，无限循环上一次任务
*
*/
FrameAnimation.prototype.repeatForever = function(){
return this.repeat();
}
/* 设置当前任务执行结束后到下一个任务开始前的等待时间
* @param time 等待时长
*/
FrameAnimation.prototype.wait = function(time){
if(this.taskQueue && this.taskQueue.length > 0){
this.taskQueue[this.taskQueue.length - 1].wait = time;
}
return this;
}
/* 暂停当前异步定时任务
*
*/
FrameAnimation.prototype.pause = function(){
if(this.state === STATE_START){
this.state = STATE_STOP;
this.timeline.stop();
return this;
}
return this;
}
/* 重新执行上一次暂停的异步定时任务
*
*/
FrameAnimation.prototype.restart = function(){
if(this.state === STATE_STOP){
this.state = STATE_START;
this.timeline.restart();
return this;
}
return this;
}
/* 释放资源
*
*/
FrameAnimation.prototype.dispose = function(){
if(this.state !== STATE_INITIAL){
this.state = STATE_INITIAL;
this.taskQueue = null;
this.timeline.stop();
this.timeline = null;
return this;
}
return this;
}
/**
* 添加一个任务到任务队列
* @param taskFn 任务方法
* @param type 任务类型
* @private
*/
FrameAnimation.prototype._add = function(taskFn,type){
this.taskQueue.push({
taskFn:taskFn,
type:type
});
return this;
}
/**
* 执行任务
* @private
*/
FrameAnimation.prototype._runTask = function(){
if(!this.taskQueue || this.state !== STATE_START){
return;
}
//任务执行完毕
if(this.index === this.taskQueue.length){
this.dispose();
return;
}
//获得任务链上的当前任务
var task = this.taskQueue[this.index];
if(task.type === TASK_SYNC){
this._syncTask(task);
}else{
this._asyncTask(task);
}
}
/**
* 同步任务
* @param task 执行的任务对象
* @private
*/
FrameAnimation.prototype._syncTask = function(task){
var me = this;
var next = function(){
//切换到下一个任务
me._next(task);
}
var taskFn = task.taskFn;
taskFn(next);
}
/**
* 异步任务
* @param task 执行的任务对象
* @private
*/
FrameAnimation.prototype._asyncTask = function(task){
var me = this;
//定义每一帧执行的回调函数
var enterframe = function(time){
var taskFn = task.taskFn;
var next = function(){
//停止当前任务
me.timeline.stop();
//执行下一个任务
me._next(task);
};
taskFn(next,time);
}
this.timeline.onenterframe = enterframe;
this.timeline.start(this.interval);
}
/**
* 切换到下一个任务，支持如果当前任务需要等待，则延时执行
* @private
*/
FrameAnimation.prototype._next = function(task){
this.index++;
var me = this;
task.wait ? setTimeout(function(){
me._runTask();
},task.wait) : this._runTask();
}
module.exports = function(){
return new FrameAnimation();
}模块打包与实例应用
webpack配置
由于animation帧动画库的制作中应用了AMD模块规范，而浏览器层面原生不支持，因此需要使用webpack进行模块化管理，将animation.js、imageloader.js和timeline.js打包为一个文件。
module.exports = {
entry:{
animation:"./src/animation.js"
},
output:{
path:__dirname + "/build",
filename:"[name].js",
library:"animation",
libraryTarget:"umd",
}
}下面是一个代码实例，通过创建的帧动画库实现博客开始的动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="rabbit" ></div>
<script src="../build/animation.js"></script>
<script>var imgUrl = 'rabbit-big.png';
var positions = ['0,-854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];
var ele = document.getElementById('rabbit');
var animation = window.animation;
var repeatAnimation = animation().loadImage([imgUrl]).changePosition(ele,positions,imgUrl).repeatForever();
repeatAnimation.start(80);
</script>
</body>
</html>更多实例
除了可以实现兔子推车的效果，还可以使用帧动画实现兔子胜利和兔子失败的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{position:absolute;width:102px;height:80px;background-repeat:no-repeat;}
</style>
</head>
<body>
<div id="rabbit1" ></div>
<div id="rabbit2" ></div>
<div id="rabbit3" ></div>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/animation.js"></script>
<script>
var baseUrl = 'http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/';
var images = ['rabbit-big.png','rabbit-lose.png','rabbit-win.png'];
for(var i = 0; i < images.length; i++){
images[i] = baseUrl + images[i];
}
var rightRunningMap = ["0 -854", "-174 -852", "-349 -852", "-524 -852", "-698 -851", "-873 -848"];
var leftRunningMap = ["0 -373", "-175 -376", "-350 -377", "-524 -377", "-699 -377", "-873 -379"];
var rabbitWinMap = ["0 0", "-198 0", "-401 0", "-609 0", "-816 0", "0 -96", "-208 -97", "-415 -97", "-623 -97", "-831 -97", "0 -203", "-207 -203", "-415 -203", "-623 -203", "-831 -203", "0 -307", "-206 -307", "-414 -307", "-623 -307"];
var rabbitLoseMap = ["0 0", "-163 0", "-327 0", "-491 0", "-655 0", "-819 0", "0 -135", "-166 -135", "-333 -135", "-500 -135", "-668 -135", "-835 -135", "0 -262"];
var animation = window.animation;
function repeat(){
var repeatAnimation = animation().loadImage(images).changePosition(rabbit1, rightRunningMap, images[0]).repeatForever();
repeatAnimation.start(80);
}
function win() {
var winAnimation = animation().loadImage(images).changePosition(rabbit2, rabbitWinMap, images[2]).repeatForever();
winAnimation.start(200);
}
function lose() {
var loseAnimation = animation().loadImage(images).changePosition(rabbit3, rabbitLoseMap, images[1]).repeatForever();
loseAnimation.start(200);
}
repeat();
win();
lose();
</script>
</body>
</html>以上这篇javascript帧动画(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。