前端项目中经常有需要用到序列帧的地方,一般来说使用CSS3动画即可实现,也可以很方便的控制动画播放,使用CSS3实现的效果在PC和iOS上可以正常播放,但是在安卓上效果不尽人意,关于此的原因没有找到相关资料就没深入了解。为了保证在安卓上能够正常播放序列帧又不影响性能,我参考以下文章编写了一个符合个人实际需求的通过JS控制的动画播放控件。

炫酷H5中序列图片视频化播放的高性能实现

源代码已上传至Github

API文档

1. 初始化

    var demo = new SequenceFrame({
        container: document.getElementById('container'), //存放序列帧的容器id
        urlRoot: 'images/loading/',     //序列帧根目录,相对html页面的地址
        imgType: 'png',                 //序列帧格式
        frameNumber: 12,                //序列帧帧数
        framePerSecond: 18,             //每秒帧数
        loadedAutoPlay: true,           //加载完成自动播放
        loop: true,                     //循环播放
        success: function (){}          //加载成功后执行的函数
    });

2. 一般选项

参数名 是否可选 介绍
container 必填 存放序列帧的容器id
urlRoot 必填 序列帧根目录,相对html页面的地址
imgType 可选,默认png 序列帧格式
frameNumber 必填 序列帧帧数
framePerSecond 可选,默认18 每秒帧数
loadedAutoPlay 可选,默认false 加载完成是否自动播放
loop 可选,默认0,无限循环播放 是否循环播放
success 可选,序列帧加载完成后执行的函数 加载成功后执行的函数

3. 方法

方法名 介绍
demo.load() 加载序列帧图片资源
demo.play() 开始播放序列帧动画
demo.pause(function(){}) 停止动画,但会执行完当前一次播放,可传入函数,在播放完当前动画后执行
分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注