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

什么是序列帧类H5

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

几种实现方法

gif

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

canvas基本实现

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

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

相关案例 圣诞跑H5.

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

vFramePlayer序列帧图片播放插件

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

使用该插件须要注意的是，提早预加载全部的序列帧图片，而且将其做为数组参数传给插件。

CreateJs

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

在 Adobe Animate 使用HTML5标签元素的功能，建立接口，动画，和资源库，并能够直接导出可读性强的，高效的 CreateJS 代码。

ZOë是一个AIR应用出口SWF动画做为EaselJS spritesheets用于画布和CSS。保持帧标签、重用类似帧及更多功能!

该库在微信小游戏的开发中较常见。

PixiJS

Pixi.js 是一个开源的HTML5 2D 渲染引擎，使用 WebGL 实现，不支持的浏览器会自动下降到 Canvas 实现。能帮助展现、驱动和管理富有交互性的图形、制做游戏。使用JavaScript以及其余HTML5技术，结合PixiJS引擎，能够建立出丰富的交互式图形，跨平台的应用程序和游戏。PixiJS 的目标是提供一个快速且轻量级的2D库，并能兼容全部设备。此外，让开发者无需了解WebGL，就能够感觉到硬件加速的力量。

PixiJS针对页面中全部的动画元素均可以独立进行相关设置和操做、增长事件，方便咱们根据须要来实现对应的展现和交互。

基本的使用方法是：

建立一个场景；

在场景中建立舞台（stage）和渲染器（render）；

画面中的元素是以建立精灵（sprite）的方式来实现；

以后进行展现和动画的播放；

针对序列帧素材，咱们能够经过建立雪碧图（CSS Sprite，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分）的形式来减小加载资源请求，此处推荐Texturepacker工具，堪称PixiJS开发的辅助神器。

不只仅序列帧可以放到雪碧图里面，其余的素材也能够根据实际状况放到雪碧图中，这样可以有效下降页面资源请求数

Texturepacker能够根据选择的对应框架，来生成PixiJS所须要的雪碧图素材以及相关的json文件，方便使用PixiJs的开发。经过其loader功能加载素材获取资源信息。

案例：

微业贷抽签H5(其中的抽签动做和光效)

H5场景小动画实现之PixiJs实战

优势：便于UI设计根据设计状况直接输出序列帧素材，经过前端开发可以相关完整的还原其动画效果

Phaser

Phaser 是一款快速、免费以及开源 HTML5 游戏框架，它支持 WebGL 和 Canvas 两种渲染模式，能够在任何 Web 浏览器环境下运行，游戏能够经过第三方工具转为 iOS、Android 支持的 Native APP，容许使用 JavaScript 和 TypeScript 进行开发。和上面提到的PixiJS相似。具体的使用方法你们自行参考吧，只做为引入。

Egret

Egret是一套HTML5游戏开发解决方案，产品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector等 ...

什么是一镜到底

一镜到底，是指拍摄中没有cut状况，运用必定技巧将做品一次性拍摄完成。

表现形式

• 画中画（例如：网易-《娱乐画传》， 缩放同时平移）
• 时空穿梭（例如：天猫-《穿越时空的邀请函》， 以中心缩放）
• 滚动动画（例如：网易-《爱的形状》，平移为主，期间播放其余动画）
• 视频（这个好像没什么好说的...跟本文无关）

实现方法

技术需求

1. 绘制画面：这里咱们通常选用基于canvas的库，性能会更好，也方便实现效果。（如上面提到的CreateJs、PixiJs、Egret等）
2. 添加动画：其中包括过渡、帧动画，所以须要一个动画库。（如 TweenMax等）
3. 进度控制：要实现经过用户操做，来控制整个H5的前进、后退、暂停等，咱们会须要进度控制相关的库。（如TimelineMax）
4. 用户操做：一镜到底的H5通常都须要用户操做以“播放”，按住或滑动，按住比较简单，用原生事件实现就好，滑动相对复杂一点，涉及阻尼运动，所以须要一个滑动相关的库。（如 AlloyTouch等）

实现基本流程

1. 用Pixi建立场景，加入到想要加入的DOM容器当中。
2. 用Pixi.loader加载精灵图。
3. 将精灵图、背景及文本等元素绘制出来。
4. 用TimelineMax建立一个总的Timeline，初始设置paused为true，能够设定整条Timeline的长度为1。
5. 用TweenMax建立好过渡动画，而后将TweenMax加入到Timeline中，duration好比是占10%的话，就设定为0.1，从滚动到30%开始播放动画的话，delay就设置为0.3。
6. 用AlloyTouch建立滚动监听，并设置好滚动高度，例如1000。
7. 监听AlloyTouch的change事件，用当前滚动值 / 滚动高度 获得当前页面的进度。
8. 调用总Timeline的seek方法，寻找到当前页面进度的地方，能够简单理解成拨动视频播放器的进度条滑块。
9. 至此就能够经过用户滑动操做，控制页面元素的动画播放、后退了。

总结

经过上面针对序列帧和一镜到底的简单梳理，既可以让前端比较好的还原设计给出的动画过程，还可以以此来辅助相关类型的H5的开发，知足更多的场景需求的开发。

---

参考资源：

从零到一：实现通用一镜到底 H5