2016年9月8日 ，苹果召开了 iPhone 7 的发布会。他们将其浓缩成 107 秒快闪！据说看一遍绝对不够。其实也不怎么好看，我也就看了二三十遍吧，哈哈。

每年都被苹果发布吸引住了，惊叹视觉展现形式的同时，又对里面精妙的文案策划、文字图形的快速切换与巧妙转场赞不绝口，同样爱好这类风格的派友们就来问，这个能不能做成H5版快闪？借此大家热情那么高昂，就索性做了一版H5版快闪，中间拖拖拉拉耽搁了好久教程总算大概完工，废话不多说，开始上课。

本次案例使用的制作工具是Epub360，里面用到的动画功能极其简单，大部分是渐现渐隐动画的衔接，相信很多派友都轻易实现这一效果。

一、案例效果

二、制作思路

整个作品制作前后大约花了两周，不过从文字框架、素材的填充到demo效果出来的时候只花了三四天，中间修修改改调试，又去做其他的教程耽搁了好长一些时间。

制作的前期考虑过横版、竖版的问题，横版的视觉效果可能更好些，考虑到JZ多媒体解决方案之前有过这样的案例作品，且竖版符合大部分用户的观看习惯，还是使用竖版来展示。

案例使用了渐现渐隐、逐字出现、直线运动、显示隐藏、放大缩小，放大出现，放大消失，缩小消失，飞入等基础的动画，总计叠加使用了五百多个动画，其中渐现渐隐用得最多。其实掌握好动画衔接与转场，剩余的没有什么技术难度（因为所有的技术难点，Epub360不都给你解决了嘛），你只需要足够的耐心就行。

三、重点

基于这个案例，我们重点讲解一下，里面所用到的功能与设置方法。

1.文案与文本使用：

（1）文案：基于苹果发布会的快闪版的形式和文案格式，可加入一些生活上的段子来让观众来共鸣，而不是都是冰冷冷的文字介绍，像里面就用了一些“厉害了我的哥”之类的文字。

（2）文本的使用：这里使用的是文本来实现（段落或富文本），一般设置成黑体，14号，加粗，居中显示，文本建议启用相对位置。

2.动画设置：

动画是快闪第二大重要的特点，动画的设置尤为重要。

（1）持续时间：较短的文字，像词组，用户一眼可以看完整的，持续时间多数设置为0.01；

（2）出现方式：多为与上一个动画一起出现，缩短动画之间切换时间；

（3）延迟时间/等待触发器触发：用来控制动画出现时间的方式，可以根据需要选择；

（4）动画开始/结束时：用来衔接上下动画（播放、显示、隐藏动画）；

3.页面分组：

页面分组是Epub360的一个小特色，用来阻止用户通过手势跳转页面的。可以新建若干组，每组放一个页面，可以通过页面最后一个动画结束时跳转页面，切换页面的方式设置为None，可以实现页面间无缝衔接。

这样内容分散在多个页面方便修改，而且可以减轻每页加载的图片与执行动画的卡顿感，缺点是页面之间跳转切换也是需要时间的，音乐需要控制好节奏。

4.全局预加载：

页面触发器：可使用当切换到当前页时触发动画的播放。

第一页做了一个Epub360图标的gif动画，模拟加载页，在这页的时候设置，当切换到前页执行预加载，预加载全部页面，加载完成后跳转页面。

另外！在我们测试的时候，仍有一小部分设备因内存小加载慢无法跳转页面，所以我们在本页又加了一个计时器，一般设备是加载2秒跳转页面，这里我们设置计时3秒后跳转页面，这个方法可以解决无法跳转的情况，

5.音画同步：

动画没有按照原版的来，BGM也没有。按照通常制作视频的逻辑，一般的都是视觉效果做好，然后再给它配音，我们采用的方法是用计时器把画面几个“高潮点”标注出来，然后把原版音乐剪辑，尽量让音乐去踩画面的点，而不是让画面跟音乐凑合。

H5不是视频，视频可以音画完全同步，因为它是一个整体，但H5受播放设备、网速等环境因素的影响，音画不同步是很头疼的问题，处理音乐时要考虑到容错率，音乐高潮点要长一点，测试几类机型大概的位置，保证大部分设备大概都可以踩到这个点。

另外，可以尽可能折损音频的质量来缩小内存可快速加载，我们使用的是Pr，输出比特率是40kbps,原版的4MB压缩到600KB。

6.其他技巧：

文本、动画的复制粘贴：里面大部分的文本的样式，动画效果都是一样的，复制粘贴后只需要微调就可重复使用，可大大缩短制作周期。

四、总结

在最初做的时候也没有按照原版的路线走，没有把它作为模板刻意的去模仿，只是借助快闪这样一个表现形式，里面的内容可随意发挥，做到整体风格统一即可。

整个案例对于一个刚刚上手的派友来说，有一定的难度，制作的时候可以分解成若干段来做，比如先定一个小目标，先学会做几个简单文字的来回切换，掌握好节奏，再去实现页面间转场的衔接会制作的快一些。

本文的动画实现方法并不唯一，很多方法还是要大家去发现，功能都是一样的，就像下象棋，规则都在那里了，怎么走还得看自己怎么想。