加载中…新年小福神H5 项目分享
(2017-02-06 15:09:28)
标签：
陈在真腾讯公益新年小福神灶王爷it |
分类： 项目分享 |
大家新年快乐，赶一波福利给大家拜年，老板们新年好哇(๑¯∀¯๑)...预祝老板们元宵节好哇(๑¯∀¯๑)...
一不小心，年前又赶了个项目，为何说赶，毕竟预留了半个月开发哇…额…半个月都顶不住天天调整设计稿好伐…这要加页那要加动画，弹层啥的加的加砍的砍，叠了几个方案后还是第一个方案好的那种心情，还不是最惨烈的，最惨烈的是设计师拿把戒尺在你面前量，告诉你某段文字在手机上有1mm的偏移，那个心情，说多TMD全是泪好伐T.T…
项目二维码：
按惯例的阐述下项目背景：
腾讯公益新年小福神项目，年初一的时候在朋友圈推广，通过召唤不同小福神，传递福运的方式，给贫困山区的小孩，或者抗战老兵，或者先心儿童捐赠红包，邀请大家献爱心的活动。每个捐赠项目会对应一个小福神，比如：
康神 对应的是健康保暖的项目（我私底下叫它 撸管神，不要问我为什么，请看它粗壮强健的臂弯），
学神 对应的是贫困儿童文具上学的项目，
食神 对应的是解决温饱的项目，（其实我对这个小神仙比较有爱，不仅吃货，居然还露点！！！！）
山神 对应的是栽植树草的项目，（我去，你看他在吹，在吹，吹…吹出两坨神马那么黑！我艹还会飞！这不是传说中的 怪奇鹅 么）
好吧，这广告卖了有点……没办法，我不这样写，设计妹子又要拿尺子在我面前量手机屏幕了哇 q(๑¯ ε ¯ ๑)p …
然后还有个灶王爷（本来4个神仙的，后面又加了一个，然后设计稿又又又又改了T.T） 稀有品种，既然是稀有品种，我就不贴图啦，它出场几率比较低，据说看到的人新年会 火火火，什么，你没看过灶王爷，尝试下多刷几次“试试召唤其他小福神”，什么，还看不到啊，那只能给你个秘密通道了，一般人我不告诉他的：
关注“ZAO王爷”公众号，右下“传递福运”，100%召唤出灶王爷…看吧，这个广告，是不是卖的行云流水，毫无违和感，咩哈哈q(๑¯ ε ¯ ๑)p…
造型还是萌萌哒的各个小神仙，我不会告诉你这些小神仙造型是出自果汁（就是上面用戒尺量量量的那个设计师啦）的手艺，动画是出自姐姐（表情情感饱满的设计师）的手艺，神仙吗，出场肯定要酷炫啦，然后就落到了死开发的身上，怎么配合设计师做动画，让神仙的出场自然，动作连贯流畅便是这个H5的重点了。
小神仙的动作都是不一样的，而且不能用translate组合技就可以实现，动画时间长度也比较短，不适合做成视频，所以初定方案是做成 序列帧动画，最开始的版本是4个神仙在一个列表里面，用户可以主动选择哪个神仙icon的，从而召唤对于小神仙，所以需要在loading页 load 4个神仙的图片以保证用户点击神仙的时候，动画可以立即播放；
项目二维码：
按惯例的阐述下项目背景：
腾讯公益新年小福神项目，年初一的时候在朋友圈推广，通过召唤不同小福神，传递福运的方式，给贫困山区的小孩，或者抗战老兵，或者先心儿童捐赠红包，邀请大家献爱心的活动。每个捐赠项目会对应一个小福神，比如：
康神 对应的是健康保暖的项目（我私底下叫它 撸管神，不要问我为什么，请看它粗壮强健的臂弯），
学神 对应的是贫困儿童文具上学的项目，
食神 对应的是解决温饱的项目，（其实我对这个小神仙比较有爱，不仅吃货，居然还露点！！！！）
山神 对应的是栽植树草的项目，（我去，你看他在吹，在吹，吹…吹出两坨神马那么黑！我艹还会飞！这不是传说中的 怪奇鹅 么）
好吧，这广告卖了有点……没办法，我不这样写，设计妹子又要拿尺子在我面前量手机屏幕了哇 q(๑¯ ε ¯ ๑)p …
然后还有个灶王爷（本来4个神仙的，后面又加了一个，然后设计稿又又又又改了T.T） 稀有品种，既然是稀有品种，我就不贴图啦，它出场几率比较低，据说看到的人新年会 火火火，什么，你没看过灶王爷，尝试下多刷几次“试试召唤其他小福神”，什么，还看不到啊，那只能给你个秘密通道了，一般人我不告诉他的：
关注“ZAO王爷”公众号，右下“传递福运”，100%召唤出灶王爷…看吧，这个广告，是不是卖的行云流水，毫无违和感，咩哈哈q(๑¯ ε ¯ ๑)p…
造型还是萌萌哒的各个小神仙，我不会告诉你这些小神仙造型是出自果汁（就是上面用戒尺量量量的那个设计师啦）的手艺，动画是出自姐姐（表情情感饱满的设计师）的手艺，神仙吗，出场肯定要酷炫啦，然后就落到了死开发的身上，怎么配合设计师做动画，让神仙的出场自然，动作连贯流畅便是这个H5的重点了。
小神仙的动作都是不一样的，而且不能用translate组合技就可以实现，动画时间长度也比较短，不适合做成视频，所以初定方案是做成 序列帧动画，最开始的版本是4个神仙在一个列表里面，用户可以主动选择哪个神仙icon的，从而召唤对于小神仙，所以需要在loading页 load 4个神仙的图片以保证用户点击神仙的时候，动画可以立即播放；
葫芦 其实是loading页的载体，刚开始设想是葫芦下面有加载的数字，100%了就切换成 摸摸我/召唤小福神
之类的文案，引导用户戳葫芦就进入页面；而这样的话，每个神仙的出场都是统一的，喷烟-蹦出-循环，需要抽取共性的部分，减少画面的冗余，而共同的地方
喷烟 是可以剥离开神仙的，所以最初的序列帧，有尝试把烟剥离开来，减少总体动画图片的体积，如下：
按每秒15帧输出，18张图，大概1秒多点，这样把烟给剥离开来，总的图片体积相对于没把烟剥离开的，就删少了3份烟体积，而神仙的动画则分离为出场动画跟循环动画，出场动画只需要播放一次，与烟动画衔接匹配；
按每秒15帧输出，18张图，大概1秒多点，这样把烟给剥离开来，总的图片体积相对于没把烟剥离开的，就删少了3份烟体积，而神仙的动画则分离为出场动画跟循环动画，出场动画只需要播放一次，与烟动画衔接匹配；
循环动画紧跟出场动画，然后一直循环播放；然而单用CSS3去切换，发现请求也实在太多，图片渲染不能精确的衔接，有卡顿现象出现，按惯例将图片合成gif，起到减少请求的作用，制作流程是：
PS -> 文件 -> 打开 -> 打开对应目录 -> 勾选 图像序列 的checkbox
-> 储存为 Web所用格式 -> gif
这样就可以得到最早版本的gif，然后用GIFmicro压缩下体积，比率可调整，康神为例 这样
烟18张图片（如上），神仙出场25张图片，神仙循环30张图片（如下）：
变成了3张gif，然而刚套上去，发现同时播放2张gif，性能差点的机子有点卡，还没来得及调整，就听到不幸的消息，版本要修改，不要4个神仙一起出来，随机单独出来一个神仙就好，我@#￥@%%￥%&%&…好吧，改就改咯，这样修改反而体验更好，开发难度也降低了，因为随机一个神仙，说明不用同时出现4个神仙，那只要在页头加载一个神仙的动画就可以了，那烟的剥离就没必要了，因为它也是播放一次，那就一起合并到出场动画里面，这样就可以避免上面的
性能差的机子同时播放2张gif会卡的问题，嘿嘿…所以动画帧的输出变成了这样的png序列帧：
一整串，然后设计师将分点帧数告诉我就可以了，动画由我这边生成，于是乎就出现了这样的沟通密码q(๑¯ ε ¯
๑)p：
哦，对了，png输出后，最好先用工具压缩后再制作gif，这样gif体积会更小些，工具随自己喜好，我用的是 Pngyu
对png序列帧进行压缩；
然而发现gif压缩后，还是有点大，比如 山神循环gif 971k，接近1M的体积，需要再进行压缩；
换个格式试试，目前市面流行的无非就是apng跟webp两种格式，还有bgp，压缩体积真的可以很小很流弊（1.91M的gif
可以压缩到 139k
的那种流弊），不过解码时间实在不敢恭维，有兴趣的朋友可以自行了解，这里就不作详谈，apng的话，在IOS下可以默认打开，而webp的话，在安卓下可以默认打开，交换平台的话，需要自行JS（android播放apng动画需添加 apng-canvas.js、ios渲染webp图片需要添加 webpjs.js）做支撑，转成序列帧在canvas播放；
这里就只挑apng说（webp处理方法类似），通过工具 gif2apng
将gif转换为apng图片，拖gif进去直接出来apng，山神循环 体积为
749k，然后只要针对Android跟IOS做分开判断加载显示即可;
而这里有个问题，就是gif在移动端加载播放后，刷新页面，由于缓存原因，不会从头开始播放，对于出场动画只播一次的gif，就TMD尴尬了，刷新后傻子般直接停在最后一帧到时间了就直接切循环动画，我的处理方法是在加载图片的时候，给予一个时间戳，如下：
这样可以保证图片对于加载媒体来说都是每次加载都是新的，从头开始播放，缺点是同一张图片重复加载需要消耗用户多次流量…
还有一个问题，是在算准时间，比如，一帧15张图片，比如 山神的开场动画是
36张图片，那么换算成时间应该是2.40s的播放时间，然后就要隐藏切换成循环动画播放，但是用settimeout
定时2400ms的时候，会出现闪帧现象，图片在切换之间，出现了短暂的空白，虽然一闪而过，但是在关键的时候不断了，体验不好，于是，又开始了新一轮的纠结，是什么原因造成这一bug，尝试检测图片帧不否有空白或者错帧，都是正确的没问题，用不同的机型体验，发现IOS空白时间相对于安卓空白时间短一些，那会不会跟渲染有问题，在解析gif/apng的时候，需要一定的解析时间，图片从解析到渲染播放，这段时间差造成的，于是尝试将出场动画延后消失，将循环动画出场的时间提前，在出场动画延后调整到70ms，循环动画提前40ms，并在出场动画的末尾做了一个99.9%-100%渐隐的处理，循环动画置于出场动画之上，此时在IOS10/小米4
下闪帧消失，出场跟循环动画衔接正常；于是才有这样的代码：
然后在IOS9下，发现图片闪帧依旧出现，但是闪的时间比之前短了些，说明IOS10系统对图片的渲染比IOS9要快一些，所以在针对IOS9系统，循环动画又做了100ms的提前显示，此时IOS9显示正常；这样一来，主要的骨头就算是啃完了，然后突然又有个修改过来，要不前面加个数据页吧，拉取用户的捐助信息，显示出来，然后在末尾显示小葫芦，我@#￥@%%￥%&%&…好吧，改就改咯，说实话，当我收到设计稿的时候，心情是崩溃的，因为刚做好神仙动画的版本葫芦是在这个位置：
数据页的葫芦是在这个位置：
这…当时我跑去厕所冷静了2个小时才出来…………………
从设计角度，数据页的版面数据为重，葫芦为轻，毕竟只是一个切换的触发点，放大挪到原有版面的位置不合适；而如果修改原有版面，所有神仙喷烟的出口都要调整，动到的设计修改太多，于是就出现了一个矛盾点：怎么让页面过渡自然，而且工作量要小…
葫芦从小要变大，位置变化，假想用户戳了葫芦，那么注意力就集中在葫芦上，背后背景图的修改，轻量化，不要引起用户特别的注意，所以我选择了渐隐，渐隐时间0.6s，然后重点葫芦有一个下压向上弹跳的动作，也就是动画十四原则里面的
挤压变形原则，用这个动作吸引用户视觉焦点，在这个过程中，葫芦同时改变体积，因为有变形因素的存在，葫芦的体积大小变化便变得和谐，本来跳上去还需要用户再点击一下触发喷烟操作，不过鉴于这步操作有点多余，最后便成了点击数据页的葫芦，葫芦往上跳跃喷烟出来小神仙一气呵成的动画；
而在 试试召唤其他小福神
的模式下，就会在该页面停留，让用户触发才喷烟出来小神仙，这个停留，其实是预留一定时间，用于随机其它小神仙时，加载新的动画图片所需，所以没有直接出来小神仙。
期间还有一些动画调整，兼容适配之类的，感兴趣的可以扒代码看，这里就不一一描述，毕竟都是陈腔老调，就不在这里浪费时间说多也无谓啦，有时间还不如扫下上面项目二维码，给山区小朋友捐个丰盛午餐好过，让小朋友们吃顿好的过个年q(๑¯
ε ¯ ๑)p……
喜欢
0
赠金笔
前一篇：腾讯WE大会 项目分享
后一篇：陈在真-博客搬迁