荣耀手机:荣耀手机一镜到底邀请函

2020-04-14 H5案例分享 H5案例分享
荣耀手机:荣耀手机一镜到底邀请函


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

识别图中二维码

荣耀手机一镜到底邀请函-查阅二维码

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


案例:荣耀手机一镜到底邀请函

品牌:荣耀手机

技术实现: egret + tween

亮点:

1.设计:手绘动画风格,呈现了24个城市的文案,通过城市的标志性建筑,特有形象,精美展现各个城市的特色风格
2.交互:整体模拟双指放大交互,好像是用长焦镜头打开的一场不断穿梭一镜到底的环球之旅。并且可长按加速体验穿越效果,视觉震撼效果很惊艳
3.主要画面内容:以24幅不同风格的插画手绘出当地主要建筑来体现世界各地的潮流场景,以三维视觉效果形成穿梭体验,每一个画面都环环相扣,最后是一个发布会的邀请函,及头像生成器
4.技术上
一镜到底采用Canvas标签,配合原生 drawImage方法,进行画面从大到小的绘制。因为画面都是画中画,采用Canvas可以准确的定位画面的位置,兼容不同尺寸的手机屏幕。
动画上,使用了Spine骨骼动画技术,让动画即流畅又节省资源空间占用。
此外,整体体验过程中,还有隐藏的弹窗,这在保证动画流畅度的基础上,又增加了很大的技术难度。
且将24个不同风格特色,构图角度不同的城市完美串联起来,应该花了不少时间和精力,从创意,设计构思,到技术实现都增加了很大的工作量。可以看出,这个项目应该是个较长工期才能完成的精品之作





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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

华为云:开发者遭遇史上最大危机

一镜到底的奥妙合集

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~