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”中动的只是“容