脑内映像馆H5:你不知道的滴滴科技

来源: 鲸梦 | 时间:2017-10-25


众所周知,中国的交通问题是一个世界级难题。

但是,这个难题既是挑战,也是机会。

滴滴便抓住了这个机会,经过过去五年的高速发展,现在已经成为全球最大的一站式出行平台。在2017年的战略布局中,更是一直在践行“共享出行数据、共建智慧交通”,并且,不断在用层出不穷的“黑科技”解决这个世界难题。

 

那么,滴滴科技具体都有哪些、都是些什么呢?

为了让普通用户都能更清晰、更直观地了解,鲸梦受滴滴邀请,制作了这支脑洞大开的H5——《脑内映像馆》。

 

下面,为大家来揭开《脑内映像馆》的制作始末和创作秘密。

 

一、什么是“脑内映像馆”

顾名思义,你可以理解为这是一个展览脑内秘密的博物馆,这里陈列了很多名人,古今中外应有尽有。

Loading页面是一个不断旋转的木偶人头,弥漫着一股诡异的气息。

H5的主体分为两大块:

一是脑内映像馆,里面有6个名人大脑可供选择,每一个名人对应一种科技。

二是滴滴智慧大脑,集中展示介绍这6大科技。

 

Loading页加载完之后,我们就来到了“脑内映像馆”的大门,门口还有两个呆萌的守门人。他俩惶恐不安,悄悄进行脑内对话,原来是怕客人打开馆内的脑袋,秘密被发现。

 

点击门口的红色帷帐进入之后,有几个不停旋转的名人人头等待挑选,他们分别是——雍正皇帝、阿尔法狗、哥伦布、印度人、发明家、唐代地理学家贾耽,任君挑选。

 

任意选择一个人物之后,他的大脑就被打开了,跳出一个与这个人物相匹配的脑内动画。细细一看,这些脑内动画还在微微浮动,轻轻摇晃你的手机,还会惊奇地发现:动画会随着手机的运动而运动。

注意注意,这里运用了陀螺仪技术,增强了动画的立体感和层次感,也增加了观看的趣味性。


接着,我们就钻进他的脑洞里看一看,到底有什么秘密吧。

温馨提醒:横屏观看效果更佳。

每一个秘密,都是一项滴滴科技。这里嵌入的是6支动画短片(由滴滴提供)。分别是:

雍正——滴滴大数据;阿尔法狗——机器学习;哥伦布——智能规划路线。

印度人——智能拼车;发明家——潮汐车道;贾耽——智慧诱导屏。

       


当这些全部看完之后,我们就穿越到现代的滴滴智慧大脑里了,这里面又用文字详细地介绍了6大科技——滴滴大数据、机器学习、智能规划路线、智能拼车、潮汐车道、智慧诱导屏。

 

二、你可能没注意到的细节

到这里,整个H5就结束了,检验一下你的细心程度,下面这3个细节你注意到了吗?

1、在观看脑内秘密短片的过程中,你可以有两个选择,一个是“关掉”按钮,关掉之后,你可以返回去重新选择一个脑袋;旁边还有个“下一个”按钮,你就可以直接观看下一个脑内秘密短片了。

2、看完一个秘密短片后,便会直接跳到与之对应的科技介绍。比如,“雍正的大脑”跳转到“滴滴大数据”。同时,这是一个双行道,你也可以通过“去看看别的大脑”按钮返回到雍正的界面,然后再去选择别的大脑。

3、除了一个西域风情的背景音乐之外,每一个互动的地方,我们还设置了不同的细节音效,比如门口的“管他呢”、选脑袋时的“下一个”按钮,划开大脑的“手指”处等。

 

三、再来说说几个技术处理

如果你不是技术宅,也不是程序员,可能对H5里运用的技术不太了解,让我来给你浅显地说明一下。

在长达一个月的制作过程中,我们的H5技术团队提供的程序方案也经历了各种尝试,甚至是推翻性重改。最终呈现给我们的就是一个风格诡异、画面流畅、声音和谐的脑内世界。值得一说的是我们对声音文件、图片请求、资源加载等的处理,主要是以下三个方面:


1、声音方面:由于无法进行正常地预加载,将会导致音效无法精准契合时间点。但是,如果没有加载页面,那么观众就无法提前熟悉我们的场景设定,也就不能愉快地到脑内映像馆里自由参观了。为了解决这个问题,我们对aac的声音文件做了一个base64码的转码处理。

2、图片请求:这支H5中包含了大量的图片,为了使观看更为流畅,我们将图片资源转换为JS资源,从而将图片的请求数量从近2000个压缩到了100多个;同时,也将原始的超过100M的资源包压缩到了不到60M

3、资源加载:资源加载是按需加载,就是在合理的时间加载合适的资源,如图片、音频等,让观众更快地观看到第一页的内容。


        

长按二维码或点击阅读原文,到脑内映像馆逛逛~

 

客户:滴滴出行

服务机构:鲸梦文化

客户经理:胡松

H5美术:滴滴CDX

H5动画合成:王淮民

H5前端:李辉

H5监制:胡松 郭钊成

 



文章出自鲸梦微信公众号

  • 鲸梦微信号:whaledream611
  • 北京市鲸梦文化传播有限公司
  • 手机微信扫描上方二维码进行订阅