js实现帧动画
简介
帧动画就是在连续的关键帧中分解动画动作，也就是在时间轴上的每帧上逐帧绘制不同的内容，使其连续播放成动画。常见的帧动画方式有GIF，CSS3 animation和js。使用GIF和CSS3 animation的不足是不能灵活地控制动画的暂停和播放(比如点击暂停)，也不能灵活地捕捉到动画完成的事件，另外在动画扩展性上js更好。
原理
js实现帧动画的有几种方法。一是用一个img标签去承载图片，定时改变img的src属性，这样显然不好。第二种是把所有动画关键帧绘制在一张图片里，把图片作为元素的background-image，定时改变元素的background-position(雪碧图)。对于只是位移的动画，可以通过js直接改变元素的left或者top值
实践
下面说一下第二种
var imgUrl = 'xx.png';
var positions = ['0 -854', '-174 852', 'x y'...];
var ele = document.getElementById('ele');
animation(ele, positions, imgUrl);
function animation(ele, positions, imgUrl){
ele.style.backgroundImage = 'url(' + imgUrl + ')';
ele.style.backgroundRepeat = 'no-repeat';
var index = 0;
function run(){
var position = positions[index].split(' ');
ele.style.backgroundPosition = position[0] + 'px ' + position[1] + 'px';
index++;
if(index >= positions.length){
index = 0;
}
setTimeout(run, 80);
}
run();
}封装
封装一个动画对象我们一般会经过这四步，需求分析，设计编程接口，设计调用方式，最后是代码设计。
首先是需求分析，首先我们要支持图片预加载(图片加载是异步过程，我们要保证动画开始的时候图片已经加载完)。第二个是要支持单组动画控制循环次数(可以不断循环)，第三个是可以切换到另一个动画。第四个是动画可以暂停和继续播放，第五个是支持动画完成后的回调函数。
根据以上需求我们设计了这样一个接口
loadImage(imglist) //预加载图片
changePosition(ele, position, imageUrl) //通过改变元素的background-position实现动画
enterFrame(callback) //每一帧动画执行的函数，可以自定义每一帧动画的callback
repeat(times) //动画重复执行的次数，times为空时表示无限次
repeatForever() //相当于上面不传参数的情况，这个接口比较友好
wait(time) //每个动画执行之后等待的时间
then(callback) //动画执行完成后的回调函数
start(interval) //动画开始执行，interval表示动画执行的间隔
pause() //动画暂停
restart() //动画从上一次暂停处重新执行
unmount() //释放资源接下来我们设计一下调用方式，首先我们希望支持链式调用，如下面的例子
var animation = require('animation');
var demo = animation().loadImage(images).changePosition(ele, position, imgUrl).repeat(2).then(function(){
//所有动画执行后的回调
})
demo.start(80);最后是代码设计，我们把图片预加载，动画执行，动画结束等看成一个任务队列(js的数组)
任务队列中有两种类型的任务，一种是同步执行完成(从预加载到动画执行)，另一种是异步定时执行的。
那么我们需要记录当前任务链的索引，在每个任务执行完毕后，通过调用next方法，执行下一个任务，同时更新任务链索引值
代码编写
我们先定义一个基本框架
function Animation(){
}
Animation.prototype = {
loadImage: function(imglist){
},
//添加一个异步定时任务
changePosition: function(ele, positions, imageUrl){
},
//每一帧动画执行的回调函数
enterFrame: function(taskFn){
},
//在一个任务结束时的回调函数
then: function(callback){
}，
start: function(interval){
},
//添加一个同步任务，该任务是回退到上一个任务中，实现重复上一个任务的效果
repeat: function(times){
},
//无限循环上一次任务
repeatForever: function(){
},
//设置当前任务结束后到下个任务前的等待时间time
wait: function(time){
},
pause: function(){
},
restart: function(){
},
unmount: function(){
}
}接下来我们开始填充具体代码
//类似常量的写法，在ES6中使用const关键字
var STATE_INITIAL = 0;
var STATE_START = 0;
var STATE_STOP = 0;
//同步任务
var TASK_SYNC = 0;
var TASK_ASYNC = 1;
//CMD写法，引入imageloader函数(后面会详细讲)
var loadImage = require('./imageloader');
var Timeline = require('./timeline');
//简单的函数封装，执行callback
function next(callback){
//如果callback没传进来，undefined就退出
callback && callback();
}
function Animation(){
this.taskQueue = [];
this.index = 0;
this.state = STATE_INITIAL;
this.timeline = new Timeline();
}
Animation.prototype = {
//类内部使用
//添加一个任务到任务队列
_add: function(taskFn, type){
this.taskQueue.push({
taskFn: taskFn,
type: type
})
return this;
},
_runTask: function(){
if(!this.taskQueue || this.state !== STATE_START){
return;
}
if(this.index === this.taskQueue.length){
this.unmount();
return;
}
var task = this.taskQueue[index];
if(task.type === TASK_SYNC){
this._syncTask(task);
} else {
this._asyncTask(task);
}
},
_syncTask: function(task){
var self = this;
var next = function(){
//切换到下一个任务
self._next(task);
}
var taskFn = task.taskFn;
taskFn(next);
},
_asyncTask: function(task){
var self = this;
//定义每一帧执行的回调函数
var enterFrame = function(time){
var taskFn = task.taskFn;
var next = function(){
//停止当前任务
self.timeline.stop();
self._next(task);
}
taskFn(next, time);
}
this.timeline.onenterframe = enterFrame;
this.timeline.start(this.interval);
},
_next: function(task){
this.index++;
//如果有wait属性，设置等待时间
var self = this;
task.wait ? setTimeout(function(){
self._runTask();
}, task.wait) : this._runTask();
},
loadImage: function(imglist){
var taskFn = function(next){
//把next当作callback传入
loadImage(imglist.slice(), next);
}
var type = TASK_SYNC;
//把this实例传出去，那么在_add方法中也要return this
return this._add(taskFn, type);
},
//添加一个异步定时任务
changePosition: function(ele, positions, imageUrl){
var len = positions.length;
var taskFn;
var type;
if(len){
var self = this;
taskFn = function(next, time){
if(imgUrl){
ele.style.backgroundImage = 'url(' + imageUrl + ')';
}
//获得当前背景图片位置索引
// | 0 相当于Math.floor
var index = Math.min(time/self.interval | 0, len - 1);
var position = positions[index].split(' ');
//改变dom对象的背景图片位置
ele.style.backgroundPosition = position[0] + 'px ' + position[1] + 'px';
if(index === len - 1){
next();
}
}
type = TASK_ASYNC;
} else {
taskFn = next;
type = TASK_SYNC;
}
return this._add(taskFn, type);
},
//每一帧动画执行的回调函数
enterFrame: function(taskFn){
return this._add(taskFn, TASK_ASYNC);
},
//在一个任务结束时的回调函数
then: function(callback){
var taskFn = function(next){
callback();
next();
}
var type = TASK_SYNC;
return this._add(taskFn, type);
}，
start: function(interval){
if(this.state === STATE_START){
return this;
}
if(!this.taskQueue.length){
return this;
}
this.state = STATE_START;
this._runTask();
return this;
},
//添加一个同步任务，该任务是回退到上一个任务中，实现重复上一个任务的效果
repeat: function(times){
var self = this;
var taskFn = function(){
if(typeof times === 'undefined'){
//无限回退到上一个任务
self.index--;
self._runTask();
return;
}
if(times){
times--;
self.index--;
self._runTask();
} else {
//达到重复次数
var task = self.taskQueue[self.index];
self._next(task);
}
}
var type = TASK_SYNC;
return this._add(taskFn, type);
},
//无限循环上一次任务
repeatForever: function(){
return this.repeat();
},
//设置当前任务结束后到下个任务前的等待时间
wait: function(){
if(this.taskQueue && this.taskQueue.length > 0){
this.taskQueue[this.taskQueue.length - 1].wait = time;
}
return this;
},
pause: function(){
if(this.state === STATE_START){
this.state = STATE_STOP;
this.timeline.stop();
return this;
}
return this;
},
restart: function(){
if(this.state === STATE_STOP){
this.state = STATE_START;
this.timeline.restart();
return this;
}
return this;
},
unmount: function(){
if(this.state !== STATE_INITIAL){
this.state = STATE_INITIAL;
this.taskQueue = null;
this.timeline.stop();
this.timeline = null;
return this;
}
}
}
module.exports = function(){
//类似工厂模式
return new Animation();
}我们在imgeloader.js中定义一个预加载模块
//images为加载图片的数组或者对象
//callback 全部图片加载完毕后的回调函数
//timeout 加载超时的时长
function loadImage(images, callback, timeout){
//图片路径记数器
var count = 0;
//全部图片加载成功的tag
var success = true;
var timeoutId = 0;
var isTimeout = false;
for(var key in images){
//过滤掉原型上的属性
if(!images.hasOwnProperty(key)){
continue;
}
var item = images[key];
//如果item是一个string的时候，当作src处理
if(typeof item === 'string'){
//连等表示前两个等于第三个
item = image[key] = {
src: item
}
}
if(!item || !item.src){
continue;
}
count++;
//设置图片的id
item.id = '_img_'+ key + getId();
item.img = window[item.id] = new Image();
doload(item);
}
//如果数组的数据验证失败，count为0，直接调用回调
//这里是对count任务的同步验证，count还没开始--
if(!count){
callback(false);
} else if(timeout){
timeoutId = setTimeout(onTimeout, timeout);
}
function doload(item){
item.status = 'loading';
var img = item.img;
//加载成功
img.onload = function(){
success = success && true;
item.status = 'loaded';
done();
}
img.onerror = function(){
item.status = 'error';
success = false;
done();
}
//发起一个http/https请求
img.src = item.src;
//图片加载完成
function done(){
img.onload = img.onerror = null;
try {
delete window[item.id];
} catch(e){
}
//如果count为0的时候
//所有图片加载且没有超时情况，清除计时器且执行回调
if(!--count && !isTimeout){
clearTimeout(timeoutId);
callback(success);
}
}
//超时处理函数
function onTimeout(timeout){
isTimeout = true;
callback(false);
}
}
}
//_id变量不会污染全局，只是在这个模块闭包中
var _id = 0;
function getId(){
return ++_id;
}
module.exports = loadImage;然后使用一个模块timeline.js来取代定时器，因为在浏览器运行环境中定时器是不准的
//setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）
var DEFAULT_INTERVAL = 1000 / 60;
var STATE_INITIAL = 0;
var STATE_START = 1;
var STATE_STOP = 2;
var requestAnimaitionFrame = (function(){
return window.requestAnimationFrame ||
//chrome
window.webkitRequestAnimationFrame ||
//firefox
window.mozRequestAnimationFrame ||
//opera
window.oRequestAnimationFrame ||
function(callback){
return window.setTimeout(callback, callback.interval || DEFAULT_INTERVAL);
}
})()
var cancelAnimationFrame = (function(){
//类似上面的兼容
return window.cancelAnimationFrame ...
})()
//时间轴类
function TimeLine(){
this.animationHandler = 0;
this.state = STATE_INITIAL;
}
TimeLine.prototype = {
//时间轴上每一次回调执行的函数
//time是从动画开始到当前执行的时间
onenterframe: function(time){
//在主对象中定义
},
//interval 每一次回调的间隔时间
start: function(interval){
if(this.state === STATE_START){
return ;
}
this.state = STATE_START;
this.interval = interval || DEFAULT_INTERVAL;
//+new Date相当于new Date().getTime()
startTimeline(this, +new Date());
},
stop: function(){
if(this.state !== STATE_START){
return;
}
this.state = STATE_STOP;
//记录动画从开始到现在经历的时间
if(this.startTime){
this.dur = +new Date() - this.startTime;
}
cancelAnimationFrame(this.animationHandler);
},
restart: funtion(){
if(this.state === STATE_START){
return;
}
if(!this.dur || this.interval){
return;
}
this.state = STATE_START;
//无缝连接动画
startTimeline(this, +new Date() - this.dur);
}
}
//时间轴动画启动函数
function startTimeline(timeline, startTime){
timeline.startTime = startTime;
nextTick.interval = timeline.interval;
//记录上一次回调的时间戳,tick的意思是时钟的滴答
var lastTick = +new Date();
nextTick();
//每一帧执行的函数
function nextTick(){
var now = +new Date();
//每17毫秒刷新一次，更精确的定时器
timeline.animationHandler = requestAnimationFrame(nextTick);
//如果当前时间与上一次回调的时间戳大于设置的时间间隔，表示这次可以执行回调函数
if(now - lastTick >= timeline.interval){
timeline.onenterframe(now - startTime);
lastTick = now;
}
}
}
module.exports = Timeline;