随着VR和H5两个概念在国内兴起，模拟VR效果的H5广告诞生了。

这种H5以立体视觉的冲击力为特色，在手机端的体验近似于VR。实现上，主要利用移动端的陀螺仪制造重力感应的效果，但并不一定真的采用WebGL进行3D绘图。

在移动H5广告领域，目前有三种设计方法：

（1）一镜到底

（2）720°全景聚焦

（3）全景射击游戏

接着以iH5.cn为创作工具，分析三种H5的交互实现，分三期。本期先介绍10月比较火的“一镜到底”——

1、解说华丽的天猫双十一

一镜到底（one continuous shot）是现在影视界很爱用的玩法，镜头不cut、画面不切，一气呵成播到底。它常用于电影（如神作《鸟人》）、各种MV（如让人叹为观止的《I Won’t Let You Down》），画面的连贯性非常有利于故事的讲述。

最近引发业内热议的天猫《尽情尽兴，尽在双11》，就通过拉近镜头/拉远镜头来制造在立体空间中穿梭的视觉氛围。创作团队是VML，今年6月用720°全景重力感应的造物节H5引起一阵刷屏热潮。

这个H5的交互实现关键是控制3D空间的观察点，但很多人不了解背后原理。如果是你要做一镜到底，应该怎么办？

2、素材的准备

VML历时1个月，通过策划、筹备、拍摄、图像设计、网页设计、页面开发等环节，最后做出的H5包含224张分层图片（创作细节可参考文章《天猫双11，穿越宇宙的邀请函》，By LaurentJiang；技术揭秘可参考文章《深度解密双11穿越宇宙的邀请函实现方法》）。

这里为了让视觉上更具冲击力，我找了些GIF和线性图标进行演示。

素材与来源标识如下：

3、素材的导入

点击左侧“全景容器”组件，在工作区域拖拽一片区域，就能创建容器。全景容器只支持全景背景组、全景图片和全景按钮。

这里为初学者提个醒，iH5的工具栏组件比较多，可能需要用鼠标滚动条下滑才能找到第6栏的全景组件。

然后把X、Y坐标都设为0，宽高和舞台保持一致。

接着选中容器，把所有的素材拖到工作区，就能批量上传。

4、原理的把握

上传到全景容器的图片，都会变成全景图片，这时它的属性是下面这样的：

中心点是一个虚拟的原点，只有位置，没有形态。中心距离表示距离中心点的距离，分正负值。如果给原点赋予一个形态，图片的中心距离为正时表示在原点前方；反过来，距离为负时它就在原点的后方。

当你要在图片堆中穿梭，透过图层看到远近处的素材，需要注意什么？

（1）“从远到近”的深刻含义

上面这张图模拟出3D视觉空间，观察点是全景容器的属性，表示你所在位置。

首先你会发现为了看到一定中心距离的图片，观察点需要进行调整——

A、当观察点为0时，我们在正中间，正面只看得到中心距离为正的图；

B、当观察点越小时，我们和中心距离越大的图靠得越近。

所以，从远到近在图片堆中穿梭的过程，其实只意味着观察点的减小。那么对于越远的素材，你就得把中心距离设置得越大。

（2）“视野”的深刻含义

我们眼睛所能看到的视野是一定的。从上面这张图你可以看到同样的金钱图片，在同样的视野范围内，要是离我们太近我们就看不到全貌了，而且不同图层之间也会互相遮挡。

所以你需要注意两点：

（1）控制中心距离大小，为不同的图层之间留出合适的间隙；

（2）控制水平偏移、垂直偏移，让有的图靠左、有的靠右，避免遮挡到视线中部。

5、参数的设置

理解原理后，改参数这步就简单了。

上面是全景容器的属性界面（中间参数太多被省略了一些），关键在于把“滑动焦距控制”设为YES；其中的最小焦距、最大焦距用于控制镜头最短、最长可以拉到什么程度，这里的焦距其实就是观察点。

为了方便调整，堆砌素材最好是从最远的位置开始。

你可以一开始就把全景容器的观察点设为0，然后把最远的那张图中心距离设为正值，调整到适合查看的距离x。这个x表示看到某一层素材的合适距离，可以作为后面层与层之间距离的重要依据。

比如后续图片的中心距离分别设为0、-x、-2x……以此类推即可。

所以做每一层的时候，你需要先调整容器的观察点大小，然后分别调试每一组素材的中心距离、水平/垂直偏移（负值表示靠左/上，正值表示靠右/下）。

效果如下——

>>>效果演示链接（http://465048564698.ih5.cn/idea/Q1p9JQY）

最后的温馨提示：

（1）全景图片有一个放缩比例的参数，支持多位小数，你可以用它来控制图片尺寸。

（2）当你设置好两层素材的参数后，最好先预览一次，看看镜头拉伸的效果是否理想；如果不合适，就需要调整全景容器的焦距控制灵敏度，或者重新选择合适的观察点变化数值。

全景的实现，是HTML5网页本来比较少用到的功能，但随着国内VR类广告的兴起，想必发挥空间还很多。

P.S.：后两期再介绍全景聚焦、全景射击的交互实现。