汇源：人生不易，很难吃鸡

2018-06-19 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

人生不易，很难吃鸡-查阅二维码

完整欣赏此案例大约需要3分15秒

案例：人生不易，很难吃鸡

出品：汇源

亮点：

策划上，结合吃鸡游戏，类比人生之路。将一个人从升学到踏入职场的一系列过程，具象化为游戏中的一个个场景。通过这种方式，用户可以更容易的感知人生之路上的种种不易，更容易产生情感上的共鸣。片尾转到温馨的家庭画面，让我们感受到自己的一路成长，父亲的一路陪伴，点出父亲节的主题。
技术上，采用 zepto 操作 dom, 减小依赖的体积。使用 howler.js 加载音频资源，适配多种运行环境。使用 greensock(https://greensock.com/)操作动画，使动画运行更为流畅，提高性能。
设计上，采用动画的方式，进行脚本的组织和推进，画风写实，使得内容更为贴近现实，易于情感的传递。
体验上，开篇的跳伞动画十分逼真，一个婴儿在无任何外部辅助的前提下，从高空跳落，寓意深刻。细节处理也很到位，流动的云，飞机引擎的声音，婴儿的哭声，给用户一种紧迫感。随后，画面孩子成长过程中的一个个典型画面，高考冲刺、求职、创业，在外受到了种种的压力，点出主题人生不易。接着，画面从冷色调的室外，转到暖色调的室内，明暗对比间，更显父亲爱的伟大。这种前后反差的效果，过渡却十分自然，升华了父亲节的主题。

技术实现： Zepto + Scroller + GreenSock + Pixi + howler + lodash

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签