最简朴的序列帧动画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() 烧毁对象

    原文作者:wenyiweb
    原文地址: https://segmentfault.com/a/1190000013260037
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞