最簡單的序列幀動畫canvas插件

最簡單的序列幀動畫canvas插件

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

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

喜歡能夠給一個star哦
有問題能夠加羣一塊兒討論，qq羣：692337464

CanvasKeyFrames

圖片序列幀播放工具,用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
    }

API

CanvasKeyFrames(el, type, imgs, options)

• 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)

方法介紹

goto(n) 跳轉到某一幀

next() 下一幀

prev() 上一幀

fromTo(from, to, loop, callback)

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

toFrom(to, from, loop, callback)

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

repeatplay(from, to, loop, callback)

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

from(from, loop, callback)

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

to(to, loop, callback)

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

pause() 暫停動畫

stop() 中止並回到第一幀或cover幀

play() 從當前位置播放動畫，會繼承上次使用fromTo、form或to的屬性

destroy() 銷燬對象