颠覆性的H5新技术!iH5可视化工具实现3D动画

2024年1月7日发(作者：十大不建议入手的摩托车)

颠覆性的H5新技术！iH5可视化工具实现3D动画

上面这个有点萌的3D小怪物就是用iH5工具做滴，而且整个H5只有100K不到。

虽然用H5做3D动画不是很新鲜的事，但重点是，用可视化工具就能构建3D图形，这是一件具备革新意义的事情。

1.制作一个可控制移动的立方体

接下来要教大家制作基于CSS3 3D的H5动画，任何人都能学会，只要你能认真看完本文。

（当然Canvas和WebGL也可以做，但是需要较强的编程基础，如果要讲的话，还得从基础的JavaScript语言说起，以后有机会再跟大家分享。）

以下教学中的重要知识点会用中括号“【】”标识，这些地方务必认真阅读。

本文用到的工具是iH5，电脑端用谷歌浏览器访问，用我的高级账号登录：

账户名：whales@

密码：xianrenyige

当然，你也可以自己注册一个，或者用原来自己的。不过用我的账号是顶级账号，可以随便用一些高级功能，而且我做的现成案例也可以帮助你学习。

另，请大家文明使用账号，新建作品的标题统一命名为【个人昵称】+作品名称。还有，不要删掉别人的作品。

【温馨提示】：你可以用手机看这篇教学，并且同时打开电脑操作。

1.1 新建案例，并构造一个立方体。

进入首页，点击右下角新建案例“+”

进入编辑页面，界面如下图：

中间那块白色的地方叫做舞台，相当于手机屏幕，所有的元素都在这个区域显示。

工具栏：点击工具栏上的按钮可以添加各种元素，文字、图片、时间、动效等。

对象树：添加的各种元素会以树状的机构显示在这里，方便查找和编辑。

对象属性：选中任意元素，它的属性就会出现在这里，可以设置元素的大小、坐标、颜色等。

再着重介绍一下对象树。如下图所示，点击工具栏中的透明按钮（第三行第一个），在舞台下添加透明按钮1 并设置为黄色。鼠标选中透明按钮1，添加透明按钮2，此时，透明按钮2 在对象树中会显示为透明按钮1的子对象。如图所示：

【重要知识点】：

父对象移动会带动子对象移动，子对象移动不影响父对象，在H5动画中会经常用到。如下图所示：

现在我们在透明按钮2下，绘制四个透明按钮（为了不让父对象被覆盖，透明度均设置为50%），并如图分布：

接下来，我们要建立一个立体空间，把透明按钮1的视距设置为400，把透明按钮2底下的四个矩形的Y轴/X轴旋转设为90度（左右矩形设置X轴旋转，上下矩形设置Y轴旋转），就得到了一个立方体，如下图：

（注：视距、X轴/Y轴旋转都可以在元素的属性中找到）

整个虚拟空间的视点中心是黄色的透明按钮1，鼠标移动透明按钮2，我们会看到立方体的形态围绕 透明按钮1（即视点）变化，（为了更好的展示效果，现在把舞台背景设置为黑色）：

1.2 利用iH5做一个简单的控制器控制立方体的移动。

接下来，我们要做一个控制器控制立方体的移动。

在舞台上添加一个透明按钮并命名为控制器（无需设置颜色，此时透明按钮只是起到分类标识和方便移动的作用），然后在控制器 底下添加四个按钮（工具栏第5行第2个），如图所示：

首先我们要实现，当手指按下 “向上按钮”时，立方体向上移动，当手指离开时停止移动。

实现方式就是设置一个记录立方体移动距离的中间变量S，当按下向上按钮时S加1，然后再设置立方体的Y坐标为：初始值 + S 。

具体的操作：

1、选中舞台，点击工具栏中的变量按钮（工具栏第16行第一个按钮）在舞台下添加变量1，并在变量1的属性面板中将变量名称设置为S。

2、选中舞台，在舞台下添加计数器1（工具栏第十三行第二个），并在属性中的绑定变量一项，设置绑定变量1。（绑定后，计数器1和变量1的数值会同步）

3、选中舞台，在舞台下添加时间轴1（工具栏第15行第1个），时间轴的属性中，自动播放设置为 No，时长设置为0.1 ，循环播放设置为 Yes，播放速度设置为100。

4、选中时间轴，在时间轴底下添加两个事件（工具栏第13行第1个）。事件1的触发条件为开始，对象为 舞台.计数器1，动作为 加1。

事件2的触发条件为 结束，对象为 舞台.透明按钮1.透明按钮2，动作为 设置属性，在Y坐标那里填200-5*$S。（这里的200是透明按钮2的初始Y坐标，也就是立方体的初始Y坐标，$S是S作为参数代入时的固定表达）如下图：

5、选中向上按钮，添加两个事件，事件1的触发条件为手指按下，目标对象为舞台.时间轴1，动作为从头播放。

事件2的触发条件设置为 手指离开，目标对象为 舞台.时间轴1，动作为 暂停。

6、点击舞台上方的预览按钮， 用手机扫描二维码，就可以看到效果啦。手指按下向上按钮，立方体向上移动，手指离开按钮则立方体停止。

【核心的原理解释】：

时间轴在开始时让距离S加一，结束时通过 $S 改变立方体坐标，并且循环播放，实现不断的改变立方体坐标的效果。

然后通过向上按钮控制时间轴的播放和暂停，就可以实现按下的时候立方体动，离开时立方体停止。立方体的移动速度可以通过时间轴的播放时长和播放速度改变。

7、根据向上按钮的制作原理，自行补充完 下、左、右的 按钮控制（提示：上下共用一个计数器1，左右共用一个计数器2）。为了显得好看些，给立方体贴了星空墙纸，最终效果如下：

2. 利用iH5制作一个3D微官网

最终效果如下：

具体制作步骤：

1、按照教程1的做法，建立一个立方体，并且，立方体可以被控制器控制移动。如下图：

2、把立方体下方的面，X轴旋转设置为0。立方体其他的面隐藏，得到这样的状态：

3、选中绿色的透明按钮 下，添加一个5*5的矩形矩阵，如下图所示：

4、将透明按钮 下 的X轴旋转设为-90度。得到：

5、选中透明按钮下，Ctrl+C复制，然后选中父对象透明按钮1 Ctrl+V粘贴。修改复制出来的透明按钮下的Y坐标，在原来的值上减100，得到下面的状态：

6、以此类推，我们最终能得到一个5*5*5的立方体组合：

7、通过计算隐藏不必要的矩形，就可以组成任意字母和丰富的形状，比如下面这个iH5：

8、最终三维微官网的效果就如开头所示。核心就是用小立方体去拼凑三维图形，可以用来组成公司logo，也可以用来组成字母表白。

不过整个案例做起来比较繁琐，需要极大的耐心和细致的空间坐标计算，所以比较懒的话，也可以直接用我做好的成品来改，只需要通过隐藏和显示这些小矩形就能拼出你要的字母和形状。

再次提供一下共享账号的使用方法：电脑端用谷歌浏览器登录，账号 whales@，密码 xianrenyige

3.制作一个创意3D动画

最终效果就是开头那只，看起来像金子塔的生物。

只要你完整学习了上文的教程1.3和1.4，做出这个就非常简单啦，其实就是改变立方体各个面的旋转角度并且贴上三角形就能做出金字塔。动画的话，就是给每个面加上轨迹，让各个面的X/Y坐标随着时间改变就能得到有趣的动画效果。

具体制作步骤：

1、先建立虚拟空间（就是一个透明按钮），视距设置为300，添加子对象定位器（同样是透明按钮，仅用于控制视角），定位器下添加时间轴（时长为2秒，设置为循环播放），时间轴下添加金字塔动画的定位矩形（透明按钮，长宽为100），如下：

2、在金子塔矩形底下添加八个三角形（工具栏第26行第1个）作为子对象，所有三角形旋转（顺时针）90度，相对位置如下图所示，最大的三角形是三角8，

长宽为均320，其他的长宽依次递减40。宽度为200*200的三角5，X和Y坐标分别设置为-100和-50：

3、将八个三角形的X轴旋转设置为-60度，得到这样的状态：

4、选中三角1，在三角1底下添加轨迹1（工具栏第15行第2个），选中轨迹1，点击时间轴面板右上角的 “+Add”， 添加关键帧，把关键帧拖到轨迹最左边（即0秒处）；再次点击“+Add”，添加第二个关键帧，把关键帧拖到轨迹中间（1秒处）；同理添加第三个关键帧，放在最右边2秒处。切记要选中轨迹才能添加关键帧。

5、鼠标选中三角1在1秒处的关键帧，在关键帧被选中的状态下（关键帧被选中会变成橘黄色），设置三角1的X坐标为原来的两倍。

6、其他7个三角形，用同样的方法添加轨迹和设置关键帧。

播放时间轴，我们就得到了金字塔左侧“翅膀”的循环动画：

7、用同样方法的可以做出另外的两个面，最后再加一个在上文中一样的控制器，控制定位器的移动就行啦。里面有一些其他的按钮比较简单，就自己研究吧，不过不影响效果，最终的结构如下：