前端实现序列帧_最简单的序列帧动画canvas插件

最简单的序列帧动画canvas插件

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

喜欢可以给一个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() 销毁对象

前端实现序列帧_最简单的序列帧动画canvas插件相关推荐

最简单太阳系H5动画canvas详解零基础可入
最简单太阳系H5动画canvas详解零基础可入最终结果:(实际为动画效果,金星绕轨道转动) 页面准备/html 要使用canvas,需要首先在页面中要绘制的位置放入canvas标签元素,在后期的绘 ...
vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
html前端小知识：制作简单的纯文字图标按钮
今天分享下"html前端小知识:制作简单的纯文字图标按钮"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
前端HTML5视频_谷粒音乐实战-张晓飞-专题视频课程
前端HTML5视频_谷粒音乐实战-385人已学习课程介绍谷粒音乐是使用WEB技术(HTML.JavaScript.CSS)直接构建的移动端APP.本套视频深入移动端开发的核心部分. ...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
小说下载阅读器_初始简单版
小说下载阅读器_初始简单版相信园子里面的很多人和我一样喜欢阅读小说,下面是这几年用的比较多一点的阅读器,功能相对完整. Windows本地程序/手机 1.http://www.mybook66.co ...
[刘阳Java]_Web前端入门级练习_迅雷首页第一屏设计
今天接着上一篇文章<Web前端入门级练习_迅雷官宣网设计>正式开始迅雷首页第一版的设计.如果完成,则最终的效果图如下第一步:先完成logo部分的设计 logo设计,我们会使用CSS的定位 ...
网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

前端实现序列帧_最简单的序列帧动画canvas插件

前端实现序列帧_最简单的序列帧动画canvas插件相关推荐

最新文章

热门文章