众所周知，中国的交通问题是一个世界级难题。但是，这个难题既是挑战，也是机会。滴滴便抓住了这个机会，经过过去五年的高速发展，现在已经成为全球最大的一站式出行平台。在2017年的战略布局中，更是一直在践行“共享出行数据、共建智慧交通”，并且，不断在用层出不穷的“黑科技”解决这个世界难题。那么，滴滴科技具体都有哪些、都是些什么呢？为了让普通用户都能更清晰、更直观地了解，鲸梦受滴滴邀请，制作了这支脑洞大开的H5——《脑内映像馆》。下面，为大家来揭开《脑内映像馆》的制作始末和创作秘密。 一、什么是“脑内映像馆”顾名思义，你可以理解为这是一个展览脑内秘密的博物馆，这里陈列了很多名人，古今中外应有尽有。Loading 页面是一个不断旋转的木偶人头，弥漫着一股诡异的气息。H5 的主体分为两大块：一是脑内映像馆，里面有6个名人大脑可供选择，每一个名人对应一种科技。二是滴滴智慧大脑，集中展示介绍这6大科技。Loading 页加载完之后，我们就来到了“脑内映像馆”的大门，门口还有两个呆萌的守门人。他俩惶恐不安，悄悄进行脑内对话，原来是怕客人打开馆内的脑袋，秘密被发现。点击门口的红色帷帐进入之后，有几个不停旋转的名人人头等待挑选，他们分别是——雍正皇帝、阿尔法狗、哥伦布、印度人、发明家、唐代地理学家贾耽，任君挑选。任意选择一个人物之后，他的大脑就被打开了，跳出一个与这个人物相匹配的脑内动画。细细一看，这些脑内动画还在微微浮动，轻轻摇晃你的手机，还会惊奇地发现：动画会随着手机的运动而运动。注意注意，这里运用了陀螺仪技术，增强了动画的立体感和层次感，也增加了观看的趣味性。接着，我们就钻进他的脑洞里看一看，到底有什么秘密吧。温馨提醒：横屏观看效果更佳。每一个秘密，都是一个滴滴科技。这里嵌入的是6支动画短片（由滴滴提供）。分别是：雍正——滴滴大数据；阿尔法狗——机器学习；哥伦布——智能规划路线。印度人——智能拼车；发明家——潮汐车道；贾耽——智慧诱导屏。当这些全部看完之后，我们就穿越到现代的滴滴智慧大脑里了，这里面又用文字详细地介绍了6大科技——滴滴大数据、机器学习、智能规划路线、智能拼车、潮汐车道、智慧诱导屏。二、你可能没注意到的细节到这里，整个 H5 就结束了，检验一下你的细心程度，下面这3个细节你注意到了吗？1、在观看脑内秘密短片的过程中，你可以有两个选择，一个是“关掉”按钮，关掉之后，你可以返回去重新选择一个脑袋；旁边还有个“下一个”按钮，你就可以直接观看下一个脑内秘密短片了。2、看完一个秘密短片后，便会直接跳到与之对应的科技介绍。比如，“雍正的大脑”跳转到“滴滴大数据”。同时，这是一个双行道，你也可以通过“去看看别的大脑”按钮返回到雍正的界面，然后再去选择别的大脑。3、除了一个西域风情的背景音乐之外，每一个互动的地方，我们还设置了不同的细节音效，比如门口的“管他呢”、选脑袋时的“下一个”按钮，划开大脑的“手指”处等。 三、再来说说几个技术处理如果你不是技术宅，也不是程序员，可能对 H5 里运用的技术不太了解，让我来给你浅显地说明一下。在长达一个月的制作过程中，我们的 H5 技术团队提供的程序方案也经历了各种尝试，甚至是推翻性重改。最终呈现给我们的就是一个风格诡异、画面流畅、声音和谐的脑内世界。值得一说的是我们对声音文件、图片请求、资源加载等的处理，主要是以下三个方面：1、声音方面：由于无法进行正常地预加载，将会导致音效无法精准契合时间点。但是，如果没有加载页面，那么观众就无法提前熟悉我们的场景设定，也就不能愉快地到脑内映像馆里自由参观了。为了解决这个问题，我们对 aac 的声音文件做了一个 base 64码的转码处理。2、图片请求：这支H5中包含了大量的图片，为了使观看更为流畅，我们将图片资源转换为JS资源，从而将图片的请求数量从近2000个压缩到了100多个；同时，也将原始的超过100 M 的资源包压缩到了不到60 M 。3、资源加载：资源加载是按需加载，就是在合理的时间加载合适的资源，如图片、音频等，让观众更快地观看到第一页的内容。扫描二维码，进脑内映像馆逛逛！（数英网APP用户需点击放大二维码， 长按识别）“脑内映像馆”系列海报：1.哥伦布勇闯新大陆走一条又对又好的路，到底有多难？2.清宫秘史之雍正帝信息量再大，如今也不在话下。3.三蹦子大闹宝莱坞拼车不开挂，全是技术含量。4.人类智慧捍卫の终局路网可不是19X19，这次是谁棋高一筹？