iH5中级教程：微场景H5必备，视差滑动效果

iH5中级教程：微场景H5必备，视差滑动效果

第一步：新建一个滑动时间轴，导入和新建相关素材。 1、选中舞台，选择工具栏的滑动时间轴工具

，在舞台画一个框。选中滑动

时间轴工具，将滑动时间轴属性面板中的坐标设置为（0,0），将滑动时间轴的大小设置为与舞台一样大，由于滑动时间轴的框大小决定了滑动时间轴内对象的可滑动区域，所以将坐标和宽高设置好可以保证滑动时间轴完全覆盖舞台。

2、为了让视差滑动的效果更好，我们需要再设置一下滑动放大比例和自动跳转时长。滑动放大比例指的是滑动的距离（也可以说是滑动灵敏度），例如设置滑动放大比例为10，那么当我们滑动1个像素，它就会播放10个像素。这里我们设置滑动放大比例为0.8，使其的滑动起来慢一些。另外还有一个要注意的是自动跳转时长的属性，自动跳转时长指的是滑动停止后，滑动时间轴播放至下一关键点的时间，以秒为单位。当自动跳转控制点设置为YES的时候，它能控制跳转的下一关键帧的时间，时间越长跳转得越慢，这里我们设置为0.8。

第二步：

1.选中滑动时间轴，点击透明按钮工具

，新建9个透明按钮，为了方便

识别，将其重命名为容器1 - 容器9。将这9个“容器”的坐标设为（0,0），大小设置为与舞台一样大。透明按钮的属性面板中勾选“剪切”选项。另外为了案例的美观，可以设置透明按钮的背景颜色。

2.将相应的素材放到透明按钮下。透明按钮在这个案例中等同于文件夹的作用。由于后面将会用到轨迹，多个对象同时运动可能会影响案例的播放速度，所以文件夹包含多个对象的做法能使运动相对流畅。分别选中透明按钮“容器”，选择图片工具上传图片

，字体（字和标题）可以选择用中文字体输入字体

，

为了清晰结构对象，在这里可以重命名各个对象。

添加对象的时候，由于层级的问题，容器1会挡住后面的其他容器对象，在导入素材时，可以将当前“容器”对象前面的“容器”都取消勾选，使其暂时隐藏，上传完相关素材之后再恢复勾选使其显示。

第三步：为对象添加轨迹和关键帧

1.为对象“容器”和“字”添加轨迹。分别选中“容器1”至“容器8”为

其添加轨迹，然后再分别选中“字1”至“字8”添加轨迹，在“容器9”

中，选中“图9”对象，添加轨迹。

2.为已经添加轨迹的“容器1”添加关键帧，制作视差效果。在时间为0时添加一个关键帧。为了方便后面的设置，我们将第二个关键帧设置在第2秒。

注意：视差效果中，容器实际上都是不动的，在“容器1”中动的只是“容

器1”的高，所以我们先跳转到2秒，将“容器1”的高更改以后，再添加关键帧，这样滑动时间轴将会自动记录。这样就可制作图1滑动到图2的视差效果。

3.为字1添加关键帧。由于“字1”是“容器1”的子对象，所以会“容器1”的效果而固定不动，但如果这样会出现“字1”的截图效果。

所以我们需要文字要有往上移动的效果，这样能使视差效果更明显。在时间为0时添加一个关键帧，然后再把“字1”的关键帧设置一下y轴坐标，在“字1”的1秒处添加关键帧，记录移动位置的状态。

4.制作其他容器的轨迹。“容器2”至“容器8”的轨迹设置同“容器1”的设置。为了让每两个容器对象之间更好地过渡，前一个容器的最后一个关键帧到下一个容器开始的关键帧可以间隔0.5秒。每个容器的轨迹都有两个关键帧，关键帧之间的时间距离都是2秒。

5.为“字2”至“字8”的轨迹添加关键帧。以“字2”为例，将图片放在舞台的中下方，第一个关键帧时间为0的时候添加，第二个关键帧间隔3.5秒，改变y坐标后添加。其他剩下的字如此类推地制作。但是同样的缓冲问题，“字3”至“字8”的第一个关键帧都要设置在距离上一个字体的第二关键帧前一些的位置，这里我们在距离1秒的地方添加。

本文来源：https://www.bwwdw.com/article/l1ho.html