HTML5新颖交互形式的案例浅析（技术分析）（图）(2)-木庄网络博客

大家扫一下接下来这个案例。

这是我找的一个交互和视频结合的案例，这个交互比较多，你的不同选项是一段不同的视频片段，不选择也是一个视频片段，通过刚刚介绍的同层播放器+内联播放器的方式可以实现。

具体解析可以参考以下链接：
https://segmentfault.com/a/11...

当然，视频不仅局限于这种拍摄后剪辑的视频，用AE做的视频也是可以结合交互产出一些东西的，这里就不重复举例。接下来看一个three.js使用webGL做的跟上次天猫狂欢节类似的一个H5。
稍微介绍一下

1 2	`WebGL（全写Web Graphics Library）是一种3D绘图标准` `WebGL可以为HTML5 Canvas提供硬件3D加速渲染`

threejs是封装了webGL 的第三方库，可以用来开发一些3D显示相关的东西

......
那么这个大家使用苹果手机可以发现，在苹果手机上看切图很精致而且可以控制速度，还可以控制前进和后退。

这个案例在IOS下使用的是threeJs实现的一个3D一镜到底的效果

在安卓端使用的是视频。

经过我对线上的代码进行修改，使这个页面在安卓端强制使用webGL来进行展示后发现，在播放了一会后微信浏览器直接崩溃。

去查了一下问题原因可能有两方面

一方面是
并发异步请求资源导致浏览器死锁
若一个资源被多个异步请求同时请求的时候就可能导致浏览器死锁，死锁的结果就是浏览器崩溃。默认浏览器都是启用cache的，而浏览器在从cache中读取数据的时候会加锁。
就需要在组织异步请求队列的时候，相同的资源不能在不同的队列中出现

另一方面X5浏览器本身对安卓手机的支持也是不确定的，在不同的机子不同的安卓系统下fps的数值都不同，有的机子甚至无法播放，这算是X5浏览器自己的坑。

threeJS的案例
来看下一个案例

这是threejs在3D H5方面的另一种表现
3d全景，当然，这类H5的实现不止threejs。

全景类方案还有另外两种需要购买的软件来做，这里就不赘述了。

那么我这边提供一个使用Three.js实现的3d全景的教程

https://isux.tencent.com/3d.html

threeJs另一种使用方面

做3d粒子动画

此案例用threejs实现，在安卓机上表现的性能也优化的很好

CreateJS案例

稍微介绍一下,createjs是一款轻量级的游戏引擎，可以用来开发游戏。
它的优点在于

Adobe的 animateCC 可以直接可视化的编辑动画效果，可以绑骨骼，也可以在软件内直接插入代码。

然后可以提供导出成基于createjs的js代码

在H5实现时，程序员可以不需要考虑动画效果和动画细节。由设计师把想要的动画做好，由程序员去加入需要的代码片段，导出后进行开发。
使得开发时间缩短，减少沟通成本。
看一下下面的案例

这个案例，是由animateCC生成动画代码。然后再由程序员添加画布上的蒙层，对交互效果进行开发。

那么因为createjs是一款游戏引擎，所以也能做像这样的小游戏。这个游戏虽然简单，但是非常契合它火锅店的宣传主题。用createjs也可以加快这个的开发速度。

像以上这样只包含动画和过场的H5，直接用animateCC制作好动画。

由开发者对fla源文件进行编辑，在必要的地方加入代码片段。

控制帧的播放和暂停还有跳帧就可以实现，然后直接用软件可以一键导出自适应移动端宽高的动画效果。

下面这个H5是比较新颖但是不太常见的一种，双屏互动的H5

好那么最后一个

这个是视频+全景做的一个H5，不过这个全景不是用threejs做的

而是使用另一个叫做krano，这个是之前提过的一款商用需要付费的软件。

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者