Supercell：表情对战群(2v2)

2017-10-19 H5案例分享 H5案例分享

案例：表情对战群(2v2)

出品：Supercell

制作：W

亮点：

策划上，视频+动画。加载时显示“对战表情包下载中”，Loading完毕画面进入一个模拟的微信群聊中，群名是“表情对站群(2v2)”，大家发出的表情会进行合体，还能进行对战。在群聊中熟悉功能后，接着来到2V2对战环节，两两组队，双方发出表情包，玩家中途会有可选择的按钮，或者辅助队友，或者直接PK对手。在对战过程中，画面和内容元素会慢慢过渡到《部落冲突：皇室战争》的游戏画面。对战结束，点击“重斗表情”可以再来一次，点击“开启2V2”可跳转到游戏下载页面。

设计上，一开始的界面是模拟的微信群聊，2V2开启后，画面背景与表情包本身，会慢慢过渡变为游戏的画面与游戏角色。背景音乐也非常热血，甚至到了战斗的高潮，音乐会有所推进。动效很有线条感，配合着背景音效，整体效果很赞。

体验上，表情包大战的题材并不罕见，但是结合了部落战争游戏后，就非常有新鲜感了。案例的画面也充满活力，趣味性很强。从群聊到游戏的过渡是逐层转变，做到了在不突兀的同时，又带给用户惊喜。除此之外，画面中的动画大部分是由视频来完成，同时也伴随了JS动画，比如在视频中预留出头像的位置，让群聊中的头像跟随内容而变换位置等。读取用户头像、选项的点击和拖动的交互等这些细节，让案例的代入感和参与感提升了一个档次，群聊中其他人的头像也是从头像库中随机抽取。

技术实现： jQuery + CreateJS + Video

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

识别图中二维码

表情对战群(2v2)-查阅二维码

完整欣赏此案例大约需要2分30秒

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

标签