摘要：最簡單的序列幀動畫插件圖片序列幀播放工具用操作圖片動畫，封裝了常用方法。

圖片序列幀播放工具,用canvas操作圖片動畫，封裝了常用方法。

倉庫地址: https://github.com/wenyiweb/c...

喜歡可以給一個star哦
有問題可以加群一起討論，qq群：692337464

圖片序列幀播放工具,用canvas操作圖片動畫，封裝了常用方法。

el [canvas容器,必須是DOM對象]

type [圖片模式，"array"和 "sprite"模式，array是圖片對象數組，sprite是基于寬度擴展的單張雪碧圖]

imgs [圖片幀對象數組或單圖，對應不同模式]

options {
cover: 10, //指定封面幀，默認是0
fps: 30, //默認是24
loop: 10 //初始化默認的循環數，在formTo中可以設置，默認是infinite
ratio: 2 //雪碧圖模式才需要，圖片的高清比例，與@2x相似，默認是2，低清模式是1
width: 300, //注意，隱藏元素是拿不到寬度的，所以特殊情況下需要指定寬度
height: 300
}

el canvas容器,必須是DOM對象

type 圖片模式，"array"和 "sprite"模式，array是圖片對象數組，sprite是基于寬度擴展的單張雪碧圖

imgs 圖片幀對象數組或單圖，對應不同模式

options

cover 指定封面幀，默認是0

fps 默認是24

loop 初始化默認的循環數，在formTo中可以設置，默認是infinite

ratio 雪碧圖模式才需要，圖片的高清比例，與@2x相似，默認是2，低清模式是1

width 隱藏元素是拿不到寬度的，所以特殊情況下需要指定寬度

height 隱藏元素是拿不到寬度的，所以特殊情況下需要指定寬度

導入JS

var kf = new CanvasKeyFrames(el, type, imgs, options)

from     [啟始幀（從0開始）]
  to       [結束幀數]
  loop     [循環次數，默認是infiniten]
  callback [回調函數]

to       [啟始幀（從高位開始）]
 from     [結束幀數（從低位結束）]
 loop     [循環次數，默認是infiniten]
 callback [回調函數]

fromto正著播一遍,然后回調fromBack,倒著播一遍，然后再回調toBack,進行邏輯判斷
from     [啟始幀（從0開始）]
to       [結束幀數]
loop     [循環次數，默認是infinite正播過去，再倒播回來]
callback [回調函數]

 from     [啟始幀（從0開始）]
 loop     [循環次數，默認是infinite]
 callback [回調函數]

to       [結束幀數]
loop     [循環次數，默認是infinite]
callback [回調函數]