h5 一镜到底_序列帧&一镜到底H5开发实现分析

什么是序列帧类H5

我们遇到的一类H5，其中包括“强动画”效果，UI设计提供的是一系列序列帧的素材时，前端将序列帧素材还原成动画进行展示的H5.

几种实现方法

gif

采用gif格式的图片来展示序列帧动画，会存在图片文件大，移动端失真以及安卓端卡顿，以及循环播放情况下有时只会播放一次的情况。只能作为零碎的点缀素材时使用，不推荐复杂动画使用gif来实现。

canvas基本实现

通过canvas画布中通过drawImage方法动态改变序列帧图片，根据时间间隔，重复进行画布的清除和重绘，清除前一帧画面内容，创建后一帧画面。

改方法只适用于简单的动画元素，且页面不应该有动作和动画关联，比如点击切换动画，此时由于频繁的重绘，会阻塞js的其他的处理，比如计时器等。

相关案例 圣诞跑H5.

解决阻塞问题的方法：针对计时器等计算操作，可以通过web worker线程进行计算，和主线程进行通知。

该插件是一款序列帧图片播放插件，支持通过canvas\img播放，可控制播放速度，可循环播放、倒序播放，设置循环播放及监听事件等功能。在canvas的处理情况下已经进行了优化处理。

使用该插件需要注意的是，提前预加载所有的序列帧图片，并且将其作为数组参数传给插件。

CreateJs

CreateJS是基于HTML5开发的一套模块化的库和工具。通过结合一些常用的库如 EaselJs、TweenJs等可以非常快捷的开发基于HTML5的动画和交互应用。

在 Adobe Animate 使用HTML5标签元素的功能，创建接口&