摘要：最簡(jiǎn)單的序列幀動(dòng)畫(huà)插件圖片序列幀播放工具用操作圖片動(dòng)畫(huà)，封裝了常用方法。

圖片序列幀播放工具,用canvas操作圖片動(dòng)畫(huà)，封裝了常用方法。

倉(cāng)庫(kù)地址: https://github.com/wenyiweb/c...

喜歡可以給一個(gè)star哦
有問(wèn)題可以加群一起討論，qq群：692337464

圖片序列幀播放工具,用canvas操作圖片動(dòng)畫(huà)，封裝了常用方法。

el [canvas容器,必須是DOM對(duì)象]

type [圖片模式，"array"和 "sprite"模式，array是圖片對(duì)象數(shù)組，sprite是基于寬度擴(kuò)展的單張雪碧圖]

imgs [圖片幀對(duì)象數(shù)組或單圖，對(duì)應(yīng)不同模式]

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

el canvas容器,必須是DOM對(duì)象

type 圖片模式，"array"和 "sprite"模式，array是圖片對(duì)象數(shù)組，sprite是基于寬度擴(kuò)展的單張雪碧圖

imgs 圖片幀對(duì)象數(shù)組或單圖，對(duì)應(yīng)不同模式

options

cover 指定封面幀，默認(rèn)是0

fps 默認(rèn)是24

loop 初始化默認(rèn)的循環(huán)數(shù)，在formTo中可以設(shè)置，默認(rèn)是infinite

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

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

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

導(dǎo)入JS

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

from     [啟始幀（從0開(kāi)始）]
  to       [結(jié)束幀數(shù)]
  loop     [循環(huán)次數(shù)，默認(rèn)是infiniten]
  callback [回調(diào)函數(shù)]

to       [啟始幀（從高位開(kāi)始）]
 from     [結(jié)束幀數(shù)（從低位結(jié)束）]
 loop     [循環(huán)次數(shù)，默認(rèn)是infiniten]
 callback [回調(diào)函數(shù)]

fromto正著播一遍,然后回調(diào)fromBack,倒著播一遍，然后再回調(diào)toBack,進(jìn)行邏輯判斷
from     [啟始幀（從0開(kāi)始）]
to       [結(jié)束幀數(shù)]
loop     [循環(huán)次數(shù)，默認(rèn)是infinite正播過(guò)去，再倒播回來(lái)]
callback [回調(diào)函數(shù)]

 from     [啟始幀（從0開(kāi)始）]
 loop     [循環(huán)次數(shù)，默認(rèn)是infinite]
 callback [回調(diào)函數(shù)]

to       [結(jié)束幀數(shù)]
loop     [循環(huán)次數(shù)，默認(rèn)是infinite]
callback [回調(diào)函數(shù)]