恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
H5速成1丨淘宝造物节720°伪VR全景H5
0.0°
2017-02-15 原创文章 教程 举报 20351 355 390 22

如何快速实现淘宝造物节H5的720°伪VR全景特效。

Image title


——前阵子淘宝H5很火,朋友圈被刷了好几天屏。


——我知道,是造物节的《ZAO》!它不是一般的720度全景,有伪3D的VR效果。你能上下、左右滑动看到不同视角的画面,还能玩重力感应。对了那些动漫人物,动起来是分前后的。听说淘宝请外包团队,花了30万。


——哦?我刚做出一个这样的H5。


——Seriously?!


我是认真的,对比如下:


Image title

▲淘宝H5原版


Image title

▲淘宝H5致敬版


事情来由是这样的,前两天H5制作工具iH5.cn一下子放出3个全景组件,720度VR、重力感应、页面交互,各种功能1个不落。于是我就屁颠屁颠扒了淘宝造物节H5的素材开始做,结果竟然给我捣弄出来了……动态效果如下:


Image title


相似度:95%


你也要玩玩吗?过程简单得可怕,只有3步——


(1)准备全景素材

Image title

▲淘宝H5的图片


A、1张首尾相连的全景图,当背景;

B、堆叠在全景图上的人或物件的PNG图,当前景。


为方便演示,这里直接扒淘宝造物节80张切好的图,拼合成不同的层。上面半透明的背景是20张切片合成的,前景大概照着淘宝H5的位置放,共分成3层(NO.1最靠前)。


(2)用Photoshop切图

Image title

▲用Photoshop切图


A、把不同层的图片各竖切成N份,然后导出;

B、导出时,越靠后层的图片宽度(W)要越大。


不会切图劳烦百度,我这里把1张背景、3张前景分别切20块导出为PNG。切的份数越多,三维效果就越平滑,但图片也会随着变大容易卡。


(3)用iH5做全景运动

Image title

▲用iH5设置交互

A、新建全景容器,下面放4个全景背景组;

B、把切好的分层切片分别拖到对应的全景背景组里。


比如你要放背景层图片,就保持全景背景组1选中,把20张切片拖到页面里就行。见证奇迹的时刻到了!以下几张图比较高能,是拖好图调试的效果,强烈建议有WIFI的人点开:


Image title

Image title

Image title

▲用iH5分别调试水平转角、垂直仰角、观察点大小的效果


看完上面图片你应该也懂了,每个全景组就是把切片按顺序围成圆柱。


那刚才给前后层图片设不一样的宽度,用处是?宽度越小,围成圆的周长就越小,当观察点在圆的中心,就会感觉这一层离得越近、移动得越快——VR的立体效果就这么来的。


[注]半径=周长/2π,相减可推测不同层的间距,并判断观察点的合适位置。


如果你对点击弹出华晨宇的新歌介绍、H5上方飘着一个造物节LOGO、滑动页面画面会伸缩什么的感兴趣,直接去官网找教学视频吧。加全景和调试其实很快,30分钟不到,主要时间都花在处理淘宝那些素材了……扒人家原图重新拼合构图再切开很费事啊,还是原创好。


因为模仿出来的H5太像了,为避免侵权不敢发出来给大家看。你自己试试吧?

更新:2017-02-15

收藏

355人已收藏

Seedheart

好玩是一切的宗旨。

  • 19

    作品

  • 615

    粉丝

  • 4

    关注

  • 他从瑞典回来后,用了10年让设计师用上H5
  • 腾讯这个H5的套路太深!大部分人没看懂
  • 100个免费可商用字体,你总有一天用到它
  • H5页面制作软件,中国和美国差多少?

    猜你喜欢

      2017-02-15 原创文章 教程 举报 20351 355 390 22

      H5速成1丨淘宝造物节720°伪VR全景H5

      0.0°

      你确定要举报H5速成1丨淘宝造物节720°伪VR全景H5

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年08月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      390
      355
      22

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录