iH5中级教程微场景H5必备,视差滑动效果.docx

《iH5中级教程微场景H5必备,视差滑动效果.docx》由会员分享，可在线阅读，更多相关《iH5中级教程微场景H5必备,视差滑动效果.docx（4页珍藏版）》请在三一办公上搜索。

1、iH5中级教程微场景H5必备,视差滑动效果iH5中级教程：微场景H5必备，视差滑动效果 第一步：新建一个滑动时间轴，导入和新建相关素材。 1、选中舞台，选择工具栏的滑动时间轴工具，在舞台画一个框。选中滑动时间轴工具，将滑动时间轴属性面板中的坐标设置为，将滑动时间轴的大小设置为与舞台一样大，由于滑动时间轴的框大小决定了滑动时间轴内对象的可滑动区域，所以将坐标和宽高设置好可以保证滑动时间轴完全覆盖舞台。 2、为了让视差滑动的效果更好，我们需要再设置一下滑动放大比例和自动跳转时长。滑动放大比例指的是滑动的距离，例如设置滑动放大比例为10，那么当我们滑动1个像素，它就会播放10个像素。这里我们设置滑动

2、放大比例为0.8，使其的滑动起来慢一些。另外还有一个要注意的是自动跳转时长的属性，自动跳转时长指的是滑动停止后，滑动时间轴播放至下一关键点的时间，以秒为单位。当自动跳转控制点设置为YES的时候，它能控制跳转的下一关键帧的时间，时间越长跳转得越慢，这里我们设置为0.8。 第二步： 1.选中滑动时间轴，点击透明按钮工具，新建9个透明按钮，为了方便识别，将其重命名为容器1 - 容器9。将这9个“容器”的坐标设为，大小设置为与舞台一样大。透明按钮的属性面板中勾选“剪切”选项。另外为了案例的美观，可以设置透明按钮的背景颜色。 2.将相应的素材放到透明按钮下。透明按钮在这个案例中等同于文件夹的作用。由于后

3、面将会用到轨迹，多个对象同时运动可能会影响案例的播放速度，所以文件夹包含多个对象的做法能使运动相对流畅。分别选中透明按钮“容器”，选择图片工具上传图片，字体可以选择用中文字体输入字体，为了清晰结构对象，在这里可以重命名各个对象。 添加对象的时候，由于层级的问题，容器1会挡住后面的其他容器对象，在导入素材时，可以将当前“容器”对象前面的“容器”都取消勾选，使其暂时隐藏，上传完相关素材之后再恢复勾选使其显示。 第三步：为对象添加轨迹和关键帧 1.为对象“容器”和“字”添加轨迹。分别选中“容器1”至“容器8”为其添加轨迹，然后再分别选中“字1”至“字8”添加轨迹，在“容器9”中，选中“图9”对象，添

4、加轨迹。 2.为已经添加轨迹的“容器1”添加关键帧，制作视差效果。在时间为0时添加一个关键帧。为了方便后面的设置，我们将第二个关键帧设置在第2秒。 注意：视差效果中，容器实际上都是不动的，在“容器1”中动的只是“容器1”的高，所以我们先跳转到2秒，将“容器1”的高更改以后，再添加关键帧，这样滑动时间轴将会自动记录。这样就可制作图1滑动到图2的视差效果。 3.为字1添加关键帧。由于“字1”是“容器1”的子对象，所以会“容器1”的效果而固定不动，但如果这样会出现“字1”的截图效果。 所以我们需要文字要有往上移动的效果，这样能使视差效果更明显。在时间为0时添加一个关键帧，然后再把“字1”的关键帧设置

5、一下y轴坐标，在“字1”的1秒处添加关键帧，记录移动位置的状态。 4.制作其他容器的轨迹。“容器2”至“容器8”的轨迹设置同“容器1”的设置。为了让每两个容器对象之间更好地过渡，前一个容器的最后一个关键帧到下一个容器开始的关键帧可以间隔0.5秒。每个容器的轨迹都有两个关键帧，关键帧之间的时间距离都是2秒。 5.为“字2”至“字8”的轨迹添加关键帧。以“字2”为例，将图片放在舞台的中下方，第一个关键帧时间为0的时候添加，第二个关键帧间隔3.5秒，改变y坐标后添加。其他剩下的字如此类推地制作。但是同样的缓冲问题，“字3”至“字8”的第一个关键帧都要设置在距离上一个字体的第二关键帧前一些的位置，这里

6、我们在距离1秒的地方添加。 第四步：制作最后一页渐变显示的效果。 给容器9中的图片9的轨迹添加2个关键帧，第一帧将图片9的透明度设置为0，第二帧设置为100，即可出现渐变显示的效果。 第五步：制作向下滑动提示图标。 添加一个箭头图片。移动到合适的位置后，在左边的工具栏中找到动效工具，添加并设置时长为3秒，动效类型为淡入，设置为自动播放。注意：只有将循环播放勾选为YES后，图标才会循环地从隐藏到显示。 第六步：添加跳转到官网的事件动作。 添加内容为“点击进入官网”的中文字体，将其移动到合适的位置后，选中它。添加一个事件，触发条件为轻触，目标对象为舞台，目标动作为打开网页。这里的资源位置则是要跳转

7、的网页链接。 第七步：优化视差滑动。 为了让滑动时间轴更流畅和防止由于层级关系使“上滑提示”的图标妨碍滑动。所以需要在滑动时间轴下添加一个事件。选中滑动时间轴后，添加一个事件，触发条件为触摸开始，即手指滑动时，“上滑提示”的图标隐藏。 重点控件：透明按钮，滑动时间轴，轨迹 相关事件： 触发对象：官网 触发条件：轻触 目标对象：舞台 目标动：打开网页 这里的资源位置则是要跳转的网页链接。 触发对象：滑动时间轴 触发条件：触摸开始 目标对象：上滑提示 目标动：隐藏 TIPS： 1. 将视差滑动的内容放在作为容器的透明按钮里，容器透明按钮属性面板剪切为YES。 2. 滑动时间轴中，每个容器的轨迹关键帧是视差滑动效果是否明显的关键之一。