實例講解javascript幀動畫

下面小編就為大家帶來一篇javascript幀動畫(實例講解)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

前面的話

#幀動畫就是在「連續的關鍵影格」中分解動畫動作，也就是在時間軸的每個畫面上逐格繪製不同的內容，使其連續播放而成的動畫。由於是一幀一幀的畫，所以幀動畫具有非常大的靈活性，幾乎可以表現任何想表現的內容。本文將詳細介紹javascript幀動畫

概述

#【分類】

常見的幀動畫的方式有三種，包括gif、CSS3 animation和javascript

git和CSS3 animation不能靈活地控制動畫的暫停和播放、不能對幀動畫做更加靈活地擴展。另外，gif圖不能捕捉動畫完成的事件。所以，一般地，使用javascript來實作幀動畫

【原理】

js實作幀動畫有兩種實作方式

##1、如果有多張幀動畫圖片，可以用一個image標籤去承載圖片，定時改變image的src屬性(不推薦)

2、把所有的動畫關鍵幀都繪製在一張圖片裡，把圖片作為元素的background-image，定時改變元素的background-position屬性(推薦)

因為第一種方式需要使用多個HTTP請求，所以一般地推薦使用第二種方式

【實例】

下面是使用幀動畫製作的一個實例

#

<p id="rabbit" ></p> 
<button id="btn">暂停运动</button> 
<script>
var url = &#39;rabbit-big.png&#39;;
var positions = [&#39;0,-854&#39;,&#39;-174 -852&#39;,&#39;-349 -852&#39;,&#39;-524 -852&#39;,&#39;-698 -852&#39;,&#39;-873 -848&#39;];
var ele = document.getElementById(&#39;rabbit&#39;);
var oTimer = null;
btn.onclick = function(){
 if(btn.innerHTML == &#39;开始运动&#39;){
  frameAnimation(ele,positions,url);
  btn.innerHTML = &#39;暂停运动&#39;;
 }else{
  clearTimeout(oTimer);
  btn.innerHTML = &#39;开始运动&#39;;
 } 
}
frameAnimation(ele,positions,url);
function frameAnimation(ele,positions,url){
 ele.style.backgroundImage = &#39;url(&#39; + url + &#39;)&#39;;
 ele.style.backgroundRepeat = &#39;no-repeat&#39;; 
 var index = 0;
 function run(){
  var pos = positions[index].split(&#39; &#39;);
  ele.style.backgroundPosition = pos[0] + &#39;px &#39; + pos[1] + &#39;px&#39;;
  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)//每一幀動畫執行的函數，相當於使用者可以自訂每一幀動畫的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>
<p id="rabbit" ></p> 
<script src="../build/animation.js"></script> 
<script>var imgUrl = &#39;rabbit-big.png&#39;;
var positions = [&#39;0,-854&#39;,&#39;-174 -852&#39;,&#39;-349 -852&#39;,&#39;-524 -852&#39;,&#39;-698 -852&#39;,&#39;-873 -848&#39;];
var ele = document.getElementById(&#39;rabbit&#39;);
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>
p{position:absolute;width:102px;height:80px;background-repeat:no-repeat;} 
</style>
</head>
<body>
<p id="rabbit1" ></p>
<p id="rabbit2" ></p>
<p id="rabbit3" ></p> 
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/animation.js"></script>
<script>
var baseUrl = &#39;http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/&#39;;
var images = [&#39;rabbit-big.png&#39;,&#39;rabbit-lose.png&#39;,&#39;rabbit-win.png&#39;];
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幀動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！