荣耀手机:荣耀手机一镜到底邀请函
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分30
案例:荣耀手机一镜到底邀请函
品牌:荣耀手机
技术实现: egret + tween
亮点:
1.设计:手绘动画风格,呈现了24个城市的文案,通过城市的标志性建筑,特有形象,精美展现各个城市的特色风格
2.交互:整体模拟双指放大交互,好像是用长焦镜头打开的一场不断穿梭一镜到底的环球之旅。并且可长按加速体验穿越效果,视觉震撼效果很惊艳
3.主要画面内容:以24幅不同风格的插画手绘出当地主要建筑来体现世界各地的潮流场景,以三维视觉效果形成穿梭体验,每一个画面都环环相扣,最后是一个发布会的邀请函,及头像生成器
4.技术上
一镜到底采用Canvas标签,配合原生 drawImage方法,进行画面从大到小的绘制。因为画面都是画中画,采用Canvas可以准确的定位画面的位置,兼容不同尺寸的手机屏幕。
动画上,使用了Spine骨骼动画技术,让动画即流畅又节省资源空间占用。
此外,整体体验过程中,还有隐藏的弹窗,这在保证动画流畅度的基础上,又增加了很大的技术难度。
且将24个不同风格特色,构图角度不同的城市完美串联起来,应该花了不少时间和精力,从创意,设计构思,到技术实现都增加了很大的工作量。可以看出,这个项目应该是个较长工期才能完成的精品之作
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号