还记得几天前的520你在干什么吗？是在朋友圈争先恐后晒恩爱、晒求婚、晒结婚证结婚照，还是一边吃着狗粮一边被晒得双目失明呢？我们单身狗团队在这一天特意奉上《520的正确操作方式：白和宝贝橘的520》H5，帮助各位用最正确的姿势过一个幸福的520。

首先奉上H5线上地址，看看白和宝贝橘两只猫是怎么过这一天的：

接下来，我和大家分享一下在这次实现这支H5中的一些心得体会。

一、创意和策划

H5主要讲述白和宝贝橘两只猫在520这一天的三个情景故事：玩王者荣耀拿下四杀时也要接听另一半的电话、有好吃的东西要主动让给另一半吃、最好的情人节礼物就是给对方发个充满感情的QQ红包。从这些情景中提醒情侣们正确的520操作方式就是要懂得要替另一半着想、给对方惊喜。最后可在落地页给心爱的Ta发红包、领取厘米秀装饰和动作表情秀恩爱。故事从猫的角度去叙述，显得更生动形象有趣，而在每个关键时刻给予用户操作选择，使用户更具代入感，以及对正确的操作方式这一主题印象更加深刻。

二、交互、动画

这个H5以故事动画的形式演绎，那怎么去做好这个动画就是最核心的问题之一了。在此我想到了三个方案：纯H5+CSS3、视频、animate cc+createjs。用H5+CSS3纯代码实现的方式不够直观、编写复杂、比较抽象、不适合用于制作这个内容丰富、时间长的动画；视频体积较大，用户习惯在有wifi的情况下才会打开，不便于传播，且无法在播放过程中提供交互操作（如在各场景结尾都会让用户操作如何应对各种难题），所以也不合适；而animate cc+createjs则很好地解决了以上方案的各种弊端：可以可视化直观地制作动画，体积比视频小很多，可以实现各种交互操作、逻辑处理，比较契合这次动画的需求，因此也自然而然使用这个方案了。

实际上，animate cc+createjs的实现动画的方式有很多好处，在此简单列举一下：

1.可视化实现，制作时可以很直观地看到效果。

2.组件化的概念让动画组织得很有条理，即使遇上各种改需求也能针对目标组件修改，避免牵一发而动全身的情况。这个可以结合面向对象的编程思想去理解。如下图将3个场景都转成组件组织，可以很好地解耦管理每个场景的内容，而不是将场景动画内容都铺在同一条时间轴上，避免修改了前面的内容，影响了后面的动画。

场景内可以继续分解成各个动作部分，将其组件化以进一步解耦，方便组织和管理，替换素材时也能够尽量减少修改点。例如将玩游戏时手上下晃动的动作组装成一个不停循环的组件放在主场景下，当主场景中有其他修改，时间轴发生变化，也不会影响到这个手晃动效果的展示。

3.animate cc制作动画可以实现一些H5上比较难实现的效果，如遮罩效果、从一个图形变成另一个图形的渐变效果、沿着路径运动效果等，使可创作空间得到大大提升。

4.createjs提供了丰富的方法来和动画进行交互，开发者用熟悉的js就能编写逻辑，相比animate cc需要使用action script来处理逻辑，学习成本进一步下降，上手更容易。

接着简单介绍一下如何用animate cc实现H5中常见的位移变换、大小变换、旋转变换。

由动图可见这些效果是很容易实现的，而且制作效率比编码高得多了。

三、小细节

制作效率高了，就有更多的时间打磨细节了。虽然开发时间还是很紧张，但我们还是努力在细节上把动画做得更自然生动。在这抽出几点细节简单介绍一下：

1.loading页开始时两只猫相继探出头来，白猫看到黑猫出现时会转动眼睛偷瞄一下他。原方案他们会捉迷藏，白猫会去到黑猫的位置，然后瞄到黑猫又跑去其他地方了，如此循环。后来又想到用猫爪拉开门的方式表现加载进度，就将2个创意结合在一起了。

2.在玩游戏时，随着拿下三杀四杀，手的动作会变得越来越大，屏幕的发射光也越来越频密，以表现出玩游戏时的激动，以及为后面另一半突然来电话不知所措做出较强烈的反差效果。

3.用户操作猫爪进行选择时，既可以拖动猫爪，又可以点击目标位置完成选择。对于给鱼的场景，猫爪左边大量的空白位置也能拖动猫爪，方便各种操作习惯的用户。当用户没操作的时候，会显示提示箭头指引用户操作。

4.场景切换时会有屏风打开和合上，屏风上有时间跳动，说明故事的时间发展。例如从打游戏场景切换到中午约会吃鱼场景时，时间从11：00跳到12：30，表示时间的流逝，使故事更具连贯性。

5.在用QQ聊天的场景中，模仿了真实QQ聊天时对话气泡及其从外往内进场的方式，增强真实感和代入感，聊天内容也弄成对方说得比较快，自己说得比较慢的方式，表示出对方想要红包的着急。

6.当有音效发出时，背景音乐音量会适度降低，待音效结束时再恢复到原来的音量，模拟真实的手机声音效果。
7.当用户做出不好的选择时，原本的创意是回放一下两只猫过去的恩爱回忆，然后再做出好的选择。在评审时觉得这让H5有点拖沓了，于是把回忆删去，改为很直观的”想做单身狗吗？还是对他好吧“之类的提示，另外也加快看起来比较拖沓的动效，使得最终H5看起来更加紧凑和节奏感。

四、填坑

在开发的过程中，我们踩了不少坑，耽误了一些时间，也发现了一些好的工作方式以提高效率。在此列一下，方便大家绕坑：
1.由于动画素材较多，素材最好分门别类用不同的目录组织好，减少查找素材的时间，替换素材时也更加轻松容易。同理，设计稿psd也应该将不同的素材放好在不同的组中，方便重构切图。素材在动画中也最好转换成元件，方便素材的替换和管理。
2.将createjs.Ticker.timingMode设为createjs.Ticker.RAF。用默认的RAF_SYNCHED会按照在animate cc里设置的fps播放动画，这在性能不高的安卓机上会卡。而设置为createjs.Ticker.RAF后，会改用requestAnimationFrame来播放动画，在安卓机上也能流畅播放。这样做的坏处是帧率会不确定，完全以requestAnimationFrame的处理速度来决定播放速度。解决办法是制作动画时将fps设成60fps，这样和requestAnimationFrame处理的帧率大致相近，即可按自己想要的速度去制作动画。
3.声音不要放在createjs提供的预加载方法上。因为没有缓存，声音文件预加载会严重拖慢loading的速度。后来我们将音乐文件直接通过new audio加载，并将主BGM体积控制在500K以内，将声效控制在几十K内，经处理后，主BGM能快速播放，声效也能及时响应动画发出。用audio的另一个好处，是能够用多个audio在手机上同时播多个声音，而用createjs的方法在iphone中只能同时播一个声音，因此在声音处理方面建议使用audio。此外还需要记录声音在各个时刻的播放状态，以免在静音后重新打开声音时不知道该播什么。
4.jpg图片在qq域名里会自动将mine-type转为webp，导致在iphone上不能正常显示图片，将其放在http://i.gtimg.cn/ 域名下就能正常显示图片了。这个问题也向相关人员反馈了。

五、上线效果

接着，我们看看这个H5上线后的几个统计数据吧

1.留存率

从数据上可以看出，用户对这个H5是比较感兴趣的，大部分人看完第一个场景后会继续把第二和第三个场景看完。

2.点发红包转化率42.2%，同比上一年22.7%转化率，提升86%。分享次数达到100万。

此外，该H5也被“H5案例分享”网站收录，助力宣传QQ钱包和厘米秀。在朋友圈、空间也看到很多朋友转发，很多爱猫人士也表示这2只猫很萌很可爱。

六、展望

由于这次开发时间比较紧张，有一些展望和创意没来得及尝试，将来如有类似的机会会继续尝试：
1.手机来电时可加上震动手机效果
2.给游戏添加双屏互动，情侣双方一起玩，到最后可以查看对方在游戏中做出的选择
3.骨骼动画的应用，用在猫手的动作上。
4.虽然这是QQ的活动，但可以讨探一下如果在微信上打开，可不可以让整个动画都在微信上播放，到了发QQ红包和领厘米秀装饰时再跳到QQ上进行。这样在微信上的传播范围应该会更广。

小结

经过这次H5活动，我们可以看到使用animate cc+createjs的方式能够高效可视化地进行动画的制作。生动有趣的故事内容能吸引用户一直体验下去，更愿意使用目标功能，提高转化率，而细节的打磨能使动画更加自然生动。在此感谢设计师joerysheng、产品artisttong、lornali、开发kavink、测试v_hswhu奋斗多天的辛劳，也感谢sunnychu、jundabei、freywang、rustyma、cherylli、doraliao、ternenceyu、v_jjinshi等大神给予宝贵的意见。另祝愿所有看到这儿还没关闭页面的用心读者，未拍拖的早日遇到心仪的另一半过上幸福的情人节，已拍拖的能赶上过今年的父亲节。大家也可以在评论区留言搭讪，说不定缘分就这样来了，friends嚟噶嘛！