序列帧&一镜到底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

查看评论