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

什么是序列帧类H5

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

几种实现方法

gif

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

canvas基本实现

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

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

相关案例 圣诞跑H5.

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

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

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

CreateJs

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

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

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

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

PixiJS

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

PixiJS针对页面中所有的动画元素都可以独立进行相关设置和操作、增加事件&＃xff0c;方便我们根据需要来实现对应的展示和交互。

基本的使用方法是&＃xff1a;

创建一个场景&＃xff1b;

在场景中创建舞台(stage)和渲染器(render)&＃xff1b;

画面中的元素是以创建精灵(sprite)的方式来实现&＃xff1b;

之后进行展示和动画的播放&＃xff1b;

针对序列帧素材&＃xff0c;我们可以通过创建雪碧图(CSS Sprite&＃xff0c;是一种CSS图像合并技术&＃xff0c;该方法是将小图标和背景图像合并到一张图片上&＃xff0c;然后利用css的背景定位来显示需要显示的图片部分)的形式来减少加载资源请求&＃xff0c;此处推荐Texturepacker工具&＃xff0c;堪称PixiJS开发的辅助神器。

不仅仅序列帧能够放到雪碧图里面&＃xff0c;其他的素材也可以根据实际情况放到雪碧图中&＃xff0c;这样能够有效降低页面资源请求数

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

案例&＃xff1a;

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

优点&＃xff1a;便于UI设计根据设计情况直接输出序列帧素材&＃xff0c;通过前端开发能够相关完整的还原其动画效果

Phaser

Phaser 是一款快速、免费以及开源 HTML5 游戏框架&＃xff0c;它支持 WebGL 和 Canvas 两种渲染模式&＃xff0c;可以在任何 Web 浏览器环境下运行&＃xff0c;游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP&＃xff0c;允许使用 Javascript 和 TypeScript 进行开发。和上面提到的PixiJS类似。具体的使用方法大家自行参考吧&＃xff0c;只作为引入。

Egret

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

什么是一镜到底

一镜到底&＃xff0c;是指拍摄中没有cut情况&＃xff0c;运用一定技巧将作品一次性拍摄完成。

表现形式

画中画(例如&＃xff1a;网易-《娱乐画传》&＃xff0c; 缩放同时平移)

时空穿梭(例如&＃xff1a;天猫-《穿越时空的邀请函》&＃xff0c; 以中心缩放)

滚动动画(例如&＃xff1a;网易-《爱的形状》&＃xff0c;平移为主&＃xff0c;期间播放其他动画)

视频(这个好像没什么好说的...跟本文无关)

实现方法

技术需求

绘制画面&＃xff1a;这里我们一般选用基于canvas的库&＃xff0c;性能会更好&＃xff0c;也方便实现效果。(如上面提到的CreateJs、PixiJs、Egret等)

添加动画&＃xff1a;其中包括过渡、帧动画&＃xff0c;因此需要一个动画库。(如 TweenMax等)

进度控制&＃xff1a;要实现通过用户操作&＃xff0c;来控制整个H5的前进、后退、暂停等&＃xff0c;我们会需要进度控制相关的库。(如TimelineMax)

用户操作&＃xff1a;一镜到底的H5一般都需要用户操作以“播放”&＃xff0c;按住或滑动&＃xff0c;按住比较简单&＃xff0c;用原生事件实现就好&＃xff0c;滑动相对复杂一点&＃xff0c;涉及阻尼运动&＃xff0c;因此需要一个滑动相关的库。(如 AlloyTouch等)

实现基本流程

用Pixi创建场景&＃xff0c;加入到想要加入的DOM容器当中。

用Pixi.loader加载精灵图。

将精灵图、背景及文本等元素绘制出来。

用TimelineMax创建一个总的Timeline&＃xff0c;初始设置paused为true&＃xff0c;可以设定整条Timeline的长度为1。

用TweenMax创建好过渡动画&＃xff0c;然后将TweenMax加入到Timeline中&＃xff0c;duration比如是占10%的话&＃xff0c;就设定为0.1&＃xff0c;从滚动到30%开始播放动画的话&＃xff0c;delay就设置为0.3。

用AlloyTouch创建滚动监听&＃xff0c;并设置好滚动高度&＃xff0c;例如1000。

监听AlloyTouch的change事件&＃xff0c;用当前滚动值 / 滚动高度 得到当前页面的进度。

调用总Timeline的seek方法&＃xff0c;寻找到当前页面进度的地方&＃xff0c;可以简单理解成拨动视频播放器的进度条滑块。

至此就可以通过用户滑动操作&＃xff0c;控制页面元素的动画播放、后退了。

总结

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

参考资源&＃xff1a;