看着快过年了，项目赶了一波又一波，总结什么的必须的，就当给大家的贺岁礼哈；
说到项目总结，必须提及WeBank前海微众银行项目，怎么说我在WeBank项目投入了很大的精力，当然没有一起奋战在最前线的交互/设计好基友们一起，也做不出这样一个突破，为何说突破？如果我说一个手机页面，样式代码：1395行，样式体积：126k，纯手写，你信吗？我不会告诉你前面已经做了几版KO版，别人说多都是马赛克，我说多都是泪哎…

老规矩，有地址有真相，请扫二维码体验下先：



这是其中一屏，我比较喜欢的一个动画“想走就走”



JS只是切换类名实现翻页而已，整个动画都是CSS3写的，有没有很好玩？哈哈…

设计绝逼是很赞的，但对于设计咱这里就不做细说，毕竟非专业设计人士，主要还是说动画，在设计师第一次出稿给我的时候，我就觉得如果做成成品会很赞，不过工作量会比之前的KO版大很多，等设计审核的时候，果真挑了这个设计稿，然后我也就硬着头皮上了，里面涉及的细节点很多，而且不可能只做一屏有动画，需要平衡每个画面，所以所有屏都要有动画，而且动画的精致程度要均衡，或者递进增强，我也是第一次在单个手机页面上尝试这么多的动画细节，总共8个横向主页，4个纵向分页，切完所有的图片，分9个文件夹，180张图片，大致一天一屏的工作量，然后就漫漫长夜无心睡眠，每天都在赶稿中…

下面我将一页一页图文并茂的，为大家分析里面的细节点，还有使用的动画技巧，ready? go! go! go!

一、封面

画面会出现一个地球地面，渐隐半透明大企鹅背景，接着从右往左滑出 主标题 WeBank 还有 口号关键词 科技.普惠.连接 ，然后会有一只‘鬼鬼祟祟’的小企鹅，从‘n’门里探头出来，观望一下下，看看有没有 陈某真，发现陈某真不在，就把头缩回去，屁颠屁颠的跑出来，结果撞‘B’上，弹出去撞‘n’门上，把‘n’门撞回正常形状，动画结束。

当时在看到主标题的品牌设计的时候，就发现，WeBank 的“n”很像一个门，然后“a”又拟成一只企鹅，那如果企鹅从门里出来，会怎么样呢，然后都基于这个主线思路，沿着这个想法，继续扩展细节，才会有现在的首页动画，小企鹅呆萌活泼的形象一览无遗，表达互联网银行基于传统银行却又充满新生生命力企业形象。


二、为钱烦恼

从右往左划屏，画面会旋转到下一屏，因为地球就是旋转的，不可能是左右平移，旋转的时候间隔是0.3s，画面会在地球上出现两栋楼当背景，接着天空掉下一个人，注意，这个人是高薪聘请的主角男一号，将贯穿全场相当牛逼，跟电影情节一样，男一号都是出场穷困潦倒，后面掉下山崖捡到秘籍修得神功，最后出任CEO，迎娶白富美，想想我都帮他小激动的那种，这里男一号也不例外，从天上掉下来之后，地上出现啤酒瓶，同时他顺手掏开自己口袋，发现失意买醉买到一百块都不给我，哦，不是，应该是 一毛钱都没，这个时候，头顶飘来一朵‘没钱云’一个劲的劈…然后出现 引语：人生总有些时刻，为钱烦恼。

这的动画细节，需要注意的是 时间的控制，从背景到前景，再到引语文字，都是线性的主线，同时搭上云，啤酒瓶，掏口袋这些辅线，用来烘托画面氛围。

三、有We在，就不是问题

此刻，男一号已经掉落山崖，拾得iphone一台又爬上来，悠哉的坐在办公椅上晃哒，手机上浮现一只企鹅半身，然后从背后逐个出现各种场景的icon，表示它能帮你hold住所有事，天空阳光明媚，跟前一屏产生强烈对比，凸显了We帮你解决烦恼的主题。

这里换屏的时候，人一直就坐在那里晃哒，场景静止常在，因为主题在那只企鹅身上，所有动画幅度最大的是企鹅以及背后icon这一块，人的手，脚底板，以及椅子都起到陪衬作用，所以动作幅度会稍微小一些。

四、想走就走

划屏后，切换到下一个场景，在地球上出现两颗树，然后男主开着摩托车，后座带着小企鹅，开始了一场说走就走的旅行。

这屏的主线很简单，但是表达起来画面感却很强烈，因为它会‘动’，让看的人感觉到车在开的错觉，这里用到景深视差的技巧，树木是陪衬远景，地面是中景，摩托车是主体近景，然后主题文字则在用户眼前，颜色上，远深近浅，通过多层主次分离，让主体突出来烘托主题。

我把摩托车的动作夸张扩大化了一点，让它动的更加卡通，轮子、车身、排气管，尾气，人的身体，人的头部，企鹅，都是打散的零件再拼装，避免了一张图片的死板动作，从时间上加以动作上的统一，所以动作整体上是一致的，但个体上每个零件都有自己的动作，看起来就更加有趣而不死板。
摩托车会有一个压扁伸张前进后退的循环动作，因为轮子没有轴承，要体现它在动，只能从 挤压伸张 入手，那轮子由于机身跟人重力产生的挤压伸张，体现的是上下的弹动效果，所以机身也会有相应的弹动，由于惯性，同样传递到人跟企鹅，最后把人的头动作幅度在扩大化，就像甩皮鞭一样，开始幅度很小，然后慢慢变大，最后到了末梢就‘啪’的一声，强化效果，人的头部就起到了皮鞭末梢强化效果的作用，如果去除了，感觉画面感就没那么强烈了，而排气管本来设计师是没加的，后面我跟设计师沟通添加上的，多了条排气管，然后尾气从气管里袅袅升起，先浓后淡，跟日常的逻辑一样，这样通过这个附属动画，增加画面的真实感；做动画的时候，需要注意的是，再夸张的动作都是基于正常动作正常逻辑扩大化产生，尽量减少凭空捏造，无中生有，基于现实的动画会让看的人更容易接受，自然而然…也就是接地气的文雅表达…

五、想吃就吃

像《天降美食》一样，天上也可以掉美食，所以我把餐桌设置为从天而降，然后桌上各种美食逐个掉下来，凑成一桌满汉全席，然后吃货男主跟企鹅拉这小板凳（拜托，那不是小板凳好不好！！不要在意这些细节啦，你说沙发我也不拦你的q(๑¯ ε ¯ ๑)p）凑近餐桌，开始大吃一顿，这个时候灯光为他们点亮，灯光的话，可能是变压器的缘故，会闪一下，然后才亮，这个时候 场景渲染完毕，男主举起酒杯，敬了小企鹅一杯，然后举手抬头小酌一口，葡萄美酒夜光杯，不过如此…可惜企鹅未成年，喝不了酒，所以只能在座位眨巴着眼睛，看着男主抿了一口又一口…

六、想玩就玩

地球旋转，场景切换，这时候弧线代表的不再是地平面，而是海平面，因为会从左到右漂浮过来一座小冰山，冰山旁边三块漂浮的小冰块，男主跟小企鹅就在小冰山上，主冰山到位之后，男主以大欺小，向后弯曲手臂，做一个蓄力的预备动作，然后手向前，弯曲手肘到手肘平直的时候，手腕加速，通过旋转手腕向小企鹅扔雪球，雪球抛物线砸向小企鹅，飞行过程中会有零星碎屑洒落，触及企鹅头部的时候，会把企鹅头顶的帽子砸颤，摇晃一下，然后小企鹅奋起反击，用小短腿奋起一跳，做出灌篮状，好像很厉害的样子，抬起右手扔出雪球，然后由于重力，自由落体落地，着地的时候身体会有个缓冲所以需要做个挤压与拉伸缓释掉多余能量，因为帽子是扣在企鹅头上，企鹅跳上去的时候到最高点下落，帽子由于惯性还继续上升一定距离，然后再跟企鹅做自由落体，拉开一小段距离，小企鹅挤压拉伸的时候，跟下落的帽子产生少许碰撞，所以会在接触瞬间摇晃多一下，然后回归主线动画。这个画面涉及的有 投掷动作，弹跳动作 的细节分解，通过时间控制将整个逻辑串联起来，这里有个问题，男主是从地上抓起雪球，向小企鹅投掷、还是接住了小企鹅反击的雪球，继续虐（这个时候，我不得不说，这个动画谁做的，保护小萌宠协会知道吗，拉他出去打靶，啊哈哈q(๑¯ ε ¯ ๑)p）……

七、想约就约

场景再次切换，这次穿越到居家室内，男主有女票了，有女票了，你敢信，一个挨雷劈的骚年，居然，有 女 票 了…我了个去…这里按惯例出现场景后，落地灯拉绳一拉，灯光熄灭，孤男寡女，灯光熄灭，只剩下大屏幕缓慢切换画面，明显就是爱情温馨片，此时，是你你会干啥！！！！ 是我，我会……………………把头靠过去，跟女票依偎在一起…你信么 啊哈哈…其实，最开始的时候，画面出现的时候男主跟女票的侧面，灯光熄灭的时候，男票女票在打KISS，然后头上冒出爱心气泡…后来感觉会教坏小朋友，还是单纯点，就依偎着好了，毕竟男主还是单纯的少年，跟我一样q(๑¯ ε ¯ ๑)p…不跑题啦，回归正轨，当男主跟女票依偎在一起的时候，小企鹅很聪明的，知道自己是电灯泡，害羞的用手把脸捂住，但是脸皮薄没办法，脸上露出两片腮红；随着拉绳一拉，灯光亮起，男票觉得还是应该看电影比较好，要不然继续发展下去，可能整个画面都是马赛克，所以男主跟女票回到自己的位置，继续假装没事看电影，小企鹅把手放下，腮红消失，依旧在那儿电灯泡似的挥手…随着灯光熄灭，尼玛男主你们能不能好好看电影，敢进入马赛克情节么，就依靠有意思么，我受不了啦，赶紧切下一屏…

八、WeBank 为你生活带来更多可能

1）小封面

这次飘来的，不是一座小冰山，而是一片冰大陆，估计你已经到了南极，看，背后路标都有了，这是什么根据地呢？男主背着小背包带着小企鹅慢慢走进来，男主的摩托车呢？估计因为西伯利亚的严寒不能使用了，所以全神贯注盯着手里拿的手机，手指不停的在屏幕上游走切换功能，走到中间的时候，手机里面会弹出各种服务指向的项目icon，引出主题，出现上滑指向icon 指引用户右滑到头，需要下滑查看后续内容。
这里的话，最引人注意的莫过于男主的行走，我第一次尝试人物肢体的骨骼动画，大幅度的骨骼动画，需要整体的协调，时间上的节奏把握难度也增加了许多，这里采用的是多层嵌套元素模拟肢节，变换原点为骨骼关节点，骨骼旋转可转化为元素的旋转，肌肉的伸张与收缩可转化为元素的伸缩与扭曲，小的骨骼节点忽略，挖去主要的躯干来制作动画，需要注意的是大腿顶部的盆骨也会相应的小旋转，加上会自然些，但是不能旋转太大，人走路的时候，盆骨会随着扭转来协调躯干与腿的动作，但是毕竟男人走路扭屁股不太好，还是幅度小点哈…

2）大事件

鉴于男主已经成功着陆，所以要纵向划屏，小封面上滑之后，就会出现 大事件 页面，目前会罗列webank相关的大事件，在最后一个大事件项目 官网上线 出现的时候，小企鹅会从冰窟窿里面出来，然后会有礼花撒落，表示庆祝开业，官网成功上线；左上角的小企鹅也会不时的跃出水面，荡起一阵阵涟漪，潜入水里的时候，涟漪外推，慢慢隐藏；右上角的小船则会从屏幕右部缓缓驶入小湾，然后开启随波飘荡模式。

3）主要股东、管理层

沿着冰山大陆下走，会到打主要股东区域，接着管理层区域，因为这里比较正式，所以内容主题渐隐 自上而下出现，直接通关到下一屏。

4）加入我们

继续冰山大陆，走到这里的话，会有一只好Q大的企鹅站在冰块上，冰块随波飘逸，而这企鹅有一项前面没有的技能：广播体操 （或者你说健身操 健美操 广场舞 都行啦）…关键是，你要心里默念，1234 5678…更特别的是 企鹅们居然玩起了快闪，到4的时候，会有一只小企鹅加入广播体操行列，到8的时候，会有多一只小企鹅加入，然后就在一起愉快的做广播体操，1234 5678，2234 5678…有没有很Q萌爆了？这里最初设计师的稿子给的只有一只站在中间的大企鹅，然后我做到这里的时候，发现如果单纯一只小企鹅在这里摇晃双手的话，感觉有点呆板，那就做个体操吧，记得中学的广播体操是这样的动作，然后做了之后，发现一只在那儿做好像还是有点单调，要不加多两只，三五成群，三只数目差不多，五只就太多了；单只企鹅显得孤单，但是三只的话，那个节奏感跟页面氛围就出来了，而且三只小企鹅依次加入体操行列，呼应‘加入我们’的页面主题。

5）We分享

再往下走，就到了最后一个页面，这里主题的icon是一半银行企鹅，一半互联网的组合，体现了互联网银行的概念，官网上线，蓄势待发…下面按钮的话，点击之后 按惯例会出现一个蒙版，然后有个指引，不过这里与众不同的细节，也是我很喜欢的一只企鹅动画，就是右上角那只小企鹅，它会不时的跃起，在跃起腾空瞬间，小脚丫不停的摇晃，想要蹦得更高一些，同时手不停的向上戳，意在让用户点击微信右上角的分享按钮，分享给朋友或者分享到朋友圈，相当萌哈，不过做出来后，想到有可能用户看到小企鹅很呆萌被吸引，但是它太小不点，可能没有看懂它的寓意，所以让设计师加多一句话，本来想加一些“尼玛，赶紧分享啊”之类调侃用户的俏皮话，但是鉴于银行官网这么正式的页面，还是别太非主流，于是跟下面按钮的文字统一，企鹅在跳起来的时候，就说出一句“We分享”，多了一个对话框，相信看的人都会懂的了…话说刚才说点击按钮，怎么扯到小企鹅上了？这个是关联的哈，点击按钮后的蒙版层，就是小企鹅的放大版，当然，点击小企鹅也会弹出该层咯，毕竟会动的人，大部分都会手痒去点它。

至此，整个官网的页面动画分析就差不多了，要不要来一发具体代码分析呢？ 当然要啦，怎么说也是技术文章，上面分屏分点，说的好像鲁滨逊漂流一样，从地球的一端漂流到另一端，然后登上岛屿逛了一圈…上面的篇幅说的是怎么将动画结合设计，加入自己的思维想法去凸显主题，把动画的流程理顺，可以看为设计稿转化为动画脚本手稿的一个过程，当然我没有一字一句真的写成动画手稿，只是看到一个静态的设计，怎么将它在脑海里转化为动画的一个思路，那下面挑几个动画深入分析，看怎么将CSS3代码跟转化出来的动画脚本对接，并加以实现。

九、封面动画代码实现篇

我们把上面 封面动画手稿 复制下来充个字数：

画面会出现一个地球地面，渐隐半透明大企鹅背景，接着从右往左滑出 主标题 WeBank 还有 口号关键词 科技.普惠.连接 ，然后会有一只‘鬼鬼祟祟’的小企鹅，从‘n’门里探头出来，观望一下下，看看有没有 陈某真，发现陈某真不在，就把头缩回去，屁颠屁颠的跑出来，结果撞‘B’上，弹出去撞‘n’门上，把‘n’门撞回正常形状，动画结束。

整理成动画顺序是：

1、动画开始
2、大企鹅背景渐显；
3、主标题滑出；
4、口号关键字滑出；
5、小企鹅探头张望；
6、小企鹅缩头；
7、屁颠屁颠跑出来；
8、撞到B上，反弹；
9、撞到n上，反弹；
10、n摇晃恢复原状；
11、动画结束；

整一个流程梳理下来，是这样的一个动画顺序，看完感觉只有一下子功夫，其实总的动画时间为3.3s ，用户在看玩这一套动作，就被我忽悠在这个页面停留了3.3s，但是却觉得好快，没有啥晕车晕船呕吐不适的问题，这个就是动画过程顺序的流畅跟时间的控制问题，页面动画需要一定的情节支撑，也就是一条主线，如果发现自己做出来的动画凌乱了，那可以尝试我这样，整理出一条动画过程线，看下过程是否合理符合逻辑，进行相应的增加删除，直至满意为止。



上面就是我实现封面动画的一个动画代码，看起来也不是很多啦，这个逻辑比较简单的，所以贴出来不用把屏幕刷爆，哈哈……

penguin_bg 是大企鹅背景，用透明opacity 0到1来实现；

logo_txt        是主标题，用右边滑入，用的是偏移translate 而由于速度快，所以物体会发生形变，等到物体底部停止，顶部会由于惯性产生摇摆，这是用了跟随动画，用skew来实现；

logo_sub_txt 是口号关键字，跟主标题同理，不过这里这里把时间做了个延迟，跟主标题错开，产生层次感；

penguin        是企鹅，紧接在口号关键字动画结束，就执行企鹅的动画；企鹅变换原点在50% 100% 也就是水平居中，垂直底部的位置，把重心压低，旋转rotate加便宜translate 来实现探头，探头的动作不是探出来就马上缩回去，需要一定的停留时间，这里是25%-45%这段时间，缩回去45%-50%这段，也就是rotate跟translate回归原位，接着屁颠屁颠跑出来，是50%-80%这段，屁颠屁颠体现在前后摇摆，所以用的是位移translate+旋转rotate，这里旋转的服务就不用跟探头那么大，看得出企鹅在摇摆就可以了，然后80%-85%就是撞到B弹出去的一瞬间，时间要短，体现速度感，85%-100%就让企鹅慢慢回归原位；

logo_txt_n      是n门，这里拆开出来，而动画的执行时间是要在企鹅撞到B弹回来这85%启动，所以这里算是主线上的一条直线，并行进行的，换算起来就是延迟2.8s开始n门 动画，执行时间0.5s；门是原来正常尺寸拉伸的，因为n的门洞比较小，需要拉伸少许高度来让企鹅躲进去，所以需要用到scale，而被企鹅撞到之后会摇晃，所以用skew来实现摇摆，底部不动顶部动，又是一个跟随动画，体现它的弹性；

看起来代码不多，但是细节点还是很多，毕竟看的时候是一套，想的时候是一套，到了自己动手做的时候又是一套，如果对CSS3感兴趣，不妨挑WeBank上一两个你喜欢的动画，自己做一遍试试，然后对比一下线上的动画，希望对CSS3动画的制作有所提升，其实我还想写更多，把页面上面所有的屏的动画代码实现都一一罗列，不过由于时间问题，下一个项目接踵而至，要是写完所有屏的具体代码方式，我估计要领多两个月薪水走人了哈…原理是一样的，大家可以以上面封面动画的实现为参考，下载源代码玩下…后面有时间，我再把后续的代码实现，安卓兼容，文件优化加上去，估计是远远超过前面 一万多字的 TEG招聘 文字…

祝 新年快乐…
俺终于也出 贺岁大篇 了，啊哈哈q(๑¯ ε ¯ ๑)p…