Skip to content
最简单的序列帧动画canvas插件
JavaScript Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos
dist
src update Jul 26, 2019
test
.gitignore
.travis.yml
gulpfile.js 修复了多行多列图片播放的bug Apr 23, 2019
package-lock.json
package.json
readMe.md
readeMe_EN.md
script.sh

readMe.md

CanvasKeyFrames - HTML5 Canvas 图片序列帧播放工具npm Build Status

English Version

CanvasKeyFrames

图片序列帧播放工具,用canvas操作图片动画,封装了常用方法。

  • el [canvas容器,必须是DOM对象]
    • type [图片模式,'array'和 'sprite'模式,array是图片对象数组,sprite是基于宽度扩展的单张雪碧图]
    • imgs [图片帧对象数组或单图,对应不同模式]
    • options {
      cover: 10, //指定封面帧,默认是0
      fps: 30, //默认是24
      loop: 10 //初始化默认的循环数,在formTo中可以设置,默认是infinite
      width: 300, //注意,隐藏元素是拿不到宽度的,所以特殊情况下需要指定宽度
      height: 300,
      _iw: 300, // 雪碧图中单个图片的宽度
      _ih: 300, // 雪碧图中单个图片的高度
      framesCount: 10 // 雪碧图帧数
      }

API

CanvasKeyFrames(el, type, imgs, options)

  • el canvas容器,必须是DOM对象
  • type 图片模式,'array'和 'sprite'模式,array是图片对象数组,sprite是基于宽度扩展的单张雪碧图
  • imgs 图片帧对象数组或单图,对应不同模式
  • options
    • cover 指定封面帧,默认是0
    • fps 默认是24
    • loop 初始化默认的循环数,在formTo中可以设置,默认是infinite
    • width 隐藏元素是拿不到宽度的,所以特殊情况下需要指定宽度
    • height 隐藏元素是拿不到宽度的,所以特殊情况下需要指定宽度
    • _iw 雪碧图中单个图片的宽度
    • _ih 雪碧图中单个图片的高度
    • framesCount 雪碧图帧数

Install

  • base

your html

<script src="canvas-keyframes.js"></script>
  • npm
npm i canvaskeyframes

your app.js

import CanvasKeyFrames from 'canvaskeyframes'

方法介绍

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() 销毁对象

前端学习交流群,QQ群 : 692337464

License

MIT License

You can’t perform that action at this time.