最近收集了50个优秀的前端H5。我这边，按照技术的分类，找出其中十个有代表性的案例，为大家分析一下他们的技术实现方案。设计师也可以使用技术实现作为您的材料参考。因为主要介绍技术分类，所以只拿不同技术实现的案例。同一技术实现的不同设计风格我就不一一列举了。首先稍微提一下，包含的技术主要分为：createjs/thresjs/videoinlineplayback/首先第一个是之前腾讯爸爸出品的腾讯动漫的一个APP推广的H5。这个H5来自腾讯。以下是TGideas官方介绍。TGideas隶属于腾讯互动娱乐业务系统。是一个专注于运营和营销的用户体验设计团队。工作范围涉及产品包装、广告创意、品牌打造、交互设计等，团队由专业策划、项目管理、创意、视觉、开发、多媒体人才组成。“努力工作，尽情玩乐”是我们的信条。与其以飞机稿获奖，我们更愿意通过多样化的作品，帮助产品与用户建立有效的沟通机制和情感链接，实现真正的商业价值。OK，说到TGideas，再介绍一下腾讯的另一个团队，叫ISUX。这两个团队就是我认识的两个腾讯团队在H5上做得很好的。他们的团队组成也是设计+前端腾讯社交用户体验设计，简称ISUX（InternetSocialUserExperience），成立于2011年1月11日，是腾讯集团的核心，也是最大的UX设计团队在世界上。专业成员包括用户研究、交互设计、视觉设计、品牌设计、视频动画设计、UI开发、产品设计和市场研究等，ISUX已分布在中国深圳总部、北京、上海、成都和韩国首尔。ISUX主要负责腾讯社交娱乐产品和服务的用户体验设计和研究，包括QQ、Q空间、QQ会员、QQ钱包、QQ体育、腾讯云、腾讯起点、QQ物联网等主要服务平台。腾讯课堂、兴趣小组、花样年直播、全民K歌、全民影帝、企鹅FM、闪咖、天天PTU、微云和来电等等，这两个是两个团队的video+js案例都不错在输出H5。OK，然后大家扫码看第一个案例。在技??术使用上，该页面使用javascript脚本来控制视频。主要需要解决的问题是在浏览器上添加视频默认是全屏然后出现控制栏，微信浏览器安卓系统开启强制全屏的问题。IOS下的解决方法：可以在微信浏览器中添加一个inline属性，使视频在页面内inline播放，而不是全屏播放。但是如果需要在Android端使用这个属性，需要在浏览器白名单中才能使用。但是官方微信X5浏览器并没有提供申请白名单的入口。所以我们只能改变实现方法。在TBS内核（>=036849）以后版本的X5浏览器中，支持一个东西叫同层播放器，可以让安卓端的微信在视频全屏的时候在视频里播放。在上一层添加一些东西那么在全屏视频上加点东西可以做什么呢？让我们看看下一个案例。这是我正在寻找结合交互和视频的案例。有很多互动。您的不同选择是不同的视频剪辑。如果你不选择，它也是一个视频剪辑。通过刚才介绍的同层播放器+内联播放器的方式就可以实现。具体分析可以参考以下链接：https://segmentfault.com/a/11...当然视频不限于这种拍摄后剪辑的视频，用AE制作的视频也可以结合交互式输出。这里不再重复举例。接下来我们看three.js用webGL做的一个类似上次天猫嘉年华的H5。稍微介绍一下WebGL（完整编写的Web图形库）是一种3D绘图标准。WebGL可以为HTML5Canvas提供硬件3D加速渲染。Threejs是一个封装了webGL的第三方库，可以用来开发一些3D显示相关的东西…………那你用苹果手机的时候就可以找到这个。苹果手机上的切图很细腻，可以控制快慢，还可以控制前进后退。在这种情况下，IOS使用的是threeJs实现的3Done-shot效果，而Android使用的是video。在我修改了网上的代码强制这个页面在Android端使用webGL显示后，发现玩了一会微信浏览器直接崩溃了。我去检查问题的原因。可能有两个方面。一方面，并??发异步请求资源导??致浏览器死锁。如果一个资源同时被多个异步请求请求，可能会导致浏览器死锁。死锁的结果就是浏览器崩溃。.默认浏览器是启用缓存的，浏览器在从缓存中读取数据时会锁定。在组织异步请求队列时，相同的资源不能出现在不同的队列中。另一方面，X5浏览器本身对安卓手机的支持也不确定，不同手机、不同安卓系统的fps值也不同。不一样的，有些机器连玩都玩不了，这就是X5浏览器本身的坑。threeJS的案例我们来看下一个案例。这是threejs在3DH5方面的又一个3D全景图。当然，这种H5的实现不限于threejs。全景解决方案还有另外两类软件需要购买，这里不再赘述。然后我将提供一个使用Three.js的3D全景教程https://isux.tencent.com/3d.htmlthreeJs是另一种使用它来做3D粒子动画的方法。本案例是用threejs实现的，在安卓机上的性能也得到了很好的优化。先介绍一下CreateJS的案例。createjs是一个轻量级的游戏引擎，可以用来开发游戏。它的优点是Adobe的animateCC可以直接可视化编辑动画效果，绑定骨骼，直接在软件中插入代码。然后导出为基于createjs的js代码在H5中实现，程序员无需考虑动画效果和动画细节。设计师完成想要的动画，程序员添加需要的代码片段，导出后开发。这缩短了开发时间并降低了通信成本。看看下面的案例。在这种情况下，动画代码由animateCC生成。然后程序员在画布上添加遮罩层来开发交互效果。嗯，因为createjs是游戏引擎，所以也可以制作这样的小游戏。这款游戏虽然简单，但是非常符合其火锅店的宣传主题。使用createjs也可以加快开发速度。像上面这样只包含动画和过场动画的H5，直接用animateCC做动画。开发人员编辑fla源文件并在必要时添加代码片段。可以实现控制帧的播放暂停和跳帧，然后直接用软件一键导出适配移动端宽高的动画效果。下面的H5是比较新的但是不太常见的。双屏交互H5更好。最后一张是视频+全景图做的H5，不过这张全景图不是用threejs做的，是另外一个叫krano的。这个是前面说的商用需要付费的软件。那么这十个案例的分析就结束了，谢谢。
