在魔兽电影的冲击下，朋友圈里“为了部落”“为了联盟”“兽人永不为奴”等口号可谓是各种刷，这可是承载着数亿人的十年期待和青春回忆啊！不得不说，魔兽电影确实是个感人肺腑的作品。
喜欢抢热点的腾讯boy，当然不会放过魔兽这个全民热点，最近他们出品了这么一个关于魔兽的H5（
http://game.qq.com/act/a20160603wow/index.html），各位看客轻轻感受一下：
▲腾讯影业出品《WOW！好久不见》H5
作为一个老部落狗，看完这个短短的H5简直就是一种热血沸腾！在激动之余我本着学习的态度，在度娘上找到了这个H5的源链接（最后我花15分钟做了一个，准备发给以前的工会朋友！）。
▲《WOW！好久不见》H5的开发者工具“源”界面
于是我开始分析和下载它的素材，原来这个震撼的H5主体是播放两个视频，而需要运用HTML5技术实现的部分如下：开头的读取旋转动画、传送门画面、视频结束后的引导页面。 本着与大家交流学习的态度，小编决定用iH5工具把这个H5仿制出来——首先把这个H5的原素材下载下来。
▲《WOW！好久不见》H5的素材之后
打开http://www.ih5.cn，进入编辑界面，一步步把这个魔兽H5制作出来。
一、开头的读取旋转画面制作：
1.设置舞台尺寸为640X1040（苹果手机推荐尺寸，安桌手机推荐640X1080），新建页面，并重命名为起始页。
2.原版H5起始页是黑色的背景颜色，我们在起始页下设置透明按钮，将X、Y坐标设置为0，宽、高设置为舞台尺寸640X1040，在下方找到【背景颜色】选项，点击选择黑色。
3.在起始页下添加时间轴功能，把时间轴的总时长设置为1S，自动播放；紧接着在时间轴下导入旋转画面的素材，在素材下设置【轨迹功能】，对时间轴的0S和1S设置【Add】关键帧，对1S处关键帧的属性设置旋转（顺时针）360°即可完成。
▲通过时间轴+轨迹功能实现图案旋转
设置旋转页面结束到下一页面的跳转：在时间轴下添加事件，事件设置为：触发条件—结束，目标对象—舞台，目标动作—跳转页面，页面—页面2（先设置后绑定，此处的页面2指下文的“传送门页面”。）
▲跳转页面事件设置
二、传送门页面的制作：
1.创建页面，并重命名为传送门页面，导入画面素材、导入视频（调整坐标位置和尺寸，视频隐藏，取消自动播放）。
2.制作底下两个按钮的闪烁效果（为了让闪烁得更为生动，小编将效果改成了呼吸的效果），具体操作如下（以红色按钮为例子）：
A.在该页面下添加时间轴，同样把时间轴时长设置为1S、自动播放，让素材至于时间轴下方，在素材下添加轨迹功能。
B.由于原H5有三个透明度由深到浅的素材，那么我只需要将这三个素材进行不同时间上的透明度变化就能实现字体呼吸的效果了，同样在时间轴0S、0.5S和1S处设置【Add】关键帧，并让浅颜色的两个素材在0S、1S处透明度为0，0.5S处的透明度为100，反之深颜色的素材0S、1S处透明度为100，0.5S处的透明度为0，图片字体呼吸效果一气呵成。
C.蓝色按钮同理制成，在这就不重复说明了。
▲利用时间轴设置按钮的呼吸效果
3.设置点击按钮自动播放视频的功能（同样以红色按钮为例子）：
A.在红色按钮处添加透明按钮，调整位置和切合按钮的大小，在透明按钮下设置事件组，设置事件组的触发条件为【轻触手机中】，在事件组下添加事件。
B.添加隐藏该页面素材的多个事件，为视频的播放作准备：目标对象选择为该页面的各个素材，目标动作为隐藏。
C.由于一开始是把视频隐藏的，所以我们需要添加显示视频、播放视频的事件：目标对象选择为视频，目标动作分别为显示、重头播放。
D.蓝色按钮的设置也同理，就不赘述了。
4.点击按钮后视频开始自动播放，播放完需要跳转到下一个页面（为下文的引导页面），在视频下设置事件：触发条件—结束，目标对象—舞台，目标动作—跳转页面，页面—引导页面。
三、引导页面的制作
新建页面，并重命名为引导页面，导入素材，调整位置和尺寸。在引导重新播放的位置添加透明按钮，在透明按钮下设置事件：触发条件—轻触手机中，目标对象—舞台，目标动作—跳转页面，页面—传送门页面即可。
▲利用透明按钮实现跳转页面功能
此案例主要运用到的功能分别为：时间轴、轨迹、事件、透明按钮。从进入编辑界面到完成制作，总用时15分钟。使用iH5仅需15分钟完成的H5效果如何？
▲上方为使用iH5完成，下方为使用代码完成
本文章仅以学习交流为目的。