王者荣耀 + 中国艺术研究院：是谁在弹古琴？

2021-11-22 H5案例分享 H5案例分享

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

识别图中二维码

是谁在弹古琴？-查阅二维码

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

案例：是谁在弹古琴？

品牌：王者荣耀 + 中国艺术研究院

技术实现： html2canvas + VueJS + GSAP + Canvas

亮点：

1、创意定位

王者荣耀六周年庆H5，结合中国传统水墨和古琴琴声，中国味道展现的淋漓尽致；在欣赏传统文化后，领取王者荣耀周年庆皮肤，粘合用户。

2、策划上

① 加载完毕后，点击屏幕，屏幕展示古琴的指法“脱、勾、擘、撮”，而后是一个人物在高山流水间弹琴；

② 3次模拟古琴弹奏互动，第1次是连续点击屏幕聆听，伴随人物跳动（场景画面是高山间和俯视的水面），发出不同音符节奏；第2次是长按屏幕聆听，人物滑着扁舟；第3次是按住屏幕左右滑动，人物像是穿越瀑布；三次互动完毕后，展示人物水中倒影；

③ 展示线索界面中，上下拨动琴弦，可以切换线索，一共5个线索，点击“确认选择”按钮，进入尾页，在尾页右侧可以点击“猜测身份”按钮，进行人物身份猜测，还可以领取语音的福利。

3、设计上

传统中国水墨，高山流水中融入小船、仙鹤、古琴。

4、交互上

最出彩的是每次交互都会有水墨感的水波纹特效；古琴的指法与屏幕互动方式相呼应；支持PC和手机多终端体验。

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

标签