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

iH5中级教程：微场景H5必备，视差滑动效果第一步：新建一个滑动时间轴，导入和新建相关素材。1、选中舞台，选择工具栏的滑动时间轴工具*，在舞台画一个框。选中滑动时间轴工具，将滑动时间轴属性面板中的坐标设置为（0,0），将滑动时间轴的大小设置为与舞台一样大，由于滑动时间轴的框大小决定了滑动时间轴内对象的可滑动区域，所以将坐标和宽高设置好可以保证滑动时间轴完全覆盖舞台。对象树」舞台滑动时间轴12、为了让视差滑动的效果更好，我们需要再设置一下滑动放大比例和自动跳转时长。滑动放大比例指的是滑动的距离（也可以说是滑动灵敏度），例如设置滑动放大比例为io,那么当我们滑动1个像素，它就会播放io个像素。这里我们设置滑动放大比例为0.8,使其的滑动起来慢一些。另外还有一个要注意的是自动跳转时长的属性，自动跳转时长指的是滑动停止后，滑动时间轴播放至下一关键点的时间，以秒为单位。当自动跳转控制点设置为YES的时候，它能控制跳转的下一关键帧的时间，时间越长跳转得越慢，这里我们设置为0.8。滑动时融I建标0w建标0 A.Iv竟M|w高1040~4V初始可见□wfQMO透明度勺旅转（顺时针）0A.V剪切|flw|背昇颜色无色总时长21Q■ Q|NO滑动放大比例A滑动有向上V自动跳转控制点QYE$自动跳转时长O.B绑定御象V第二步:选中滑动时间轴，点击透明按钮工具土，新建9个透明按钮，为了方便识别，将其重命名为容器1-容器9。将这9个“容器”的坐标设为（0,0），大小设置为与舞台一样大。透明按钮的属性面板中勾选“剪切”选项。另外为了案例的美观，可以设置透明按钮的背景颜色。建标0 4丫坐标0宽64QA高1043初始旬免怛LQMO■舞台逶明度V滑动时间轴1A.器1融转｛顺时针0 Jy咨器2榭旋转0 杏器m撤槌转0-a,右容器4视距0—客嚣5剪切etvB!ano^l卜,■咨器6背易由色无首昙颜色咨器F手势光标DviiB|财②心笞器8-1A靛容器9定制光标'vl

rssiX坐标V坐标0竟64。 匕高1040 0初始可见谖明度眦顺肘针）□ C遍旋转0 麻呻旋转0 棉视距o \Z通切□*ES背景颜色^DIETO |羊垫告标舀V6S皆NQ1将相应的素材放到透明按钮下。透明按钮在这个案例中等同于文件夹的作用。由于后面将会用到轨迹，多个对象同时运动可能会影响案例的播放速度，所以文件夹包含多个对象的做法能使运动相对流畅。分别选中透明按钮“容器”，选择图片工具上传图片字体（字和标题）可以选择用中文字体输入字体，选择图片工具上传图片字体（字和标题）可以选择用中文字体输入字体，为了清晰结构对象，在这里可以重命名各个对象。添加对象的时候，由于层级的问题，容器1会挡住后面的其他容器对象，在导入素材时，可以将当前“容器”对象前面的“容器”都取消勾选，使其暂时隐藏，上传完相关素材之后再恢复勾选使其显示。第三步：为对象添加轨迹和关键帧1.为对象“容器”和“字”添加轨迹。分别选中“容器1”至“容器8”为其添加轨迹其添加轨迹=然后再分别选中“字1”至“字8”添加轨迹，在“容器9”中，选中“图9”对象，添加轨迹。，舞臼-j浴动时间轴:/•图1■/兼2/容器3J酵4/咨器5-•客器6■t帝、宵鄱蛔di容器9J.名字2.为已经添加轨迹的“容器1”添加关键帧，制作视差效果。在时间为0时添加一个关键帧。为了方便后面的设置，我们将第二个关键帧设置在第2秒。注意：视差效果中，容器实际上都是不动的，在“容器1”中动的只是“容

器1”的高，所以我们先跳转到2秒，将“容器1”的高更改以后，再添加关键帧，这样滑动时间轴将会自动记录。这样就可制作图1滑动到图2的视差效果。11初始可见透明度旋转〔顺时针）部泡转'T轴梅转V岩-初始可见透明度旋转〔顺时针）部泡转'T轴梅转V岩-I*W背景颜邑手势光标定制光标^CIFFFO

为字1添加关键帧。由于“字1”是“容器1”的子对象，所以会“容器1”的效果而固定不动，但如果这样会出现“字1”的截图效果。所以我们需要文字要有往上移动的效果，这样能使视差效果更明显。在时间为0时添加一个关键帧，然后再把“字1”的关键帧设置一下y轴坐标，在“字1”的1秒处添加关键帧，记录移动位置的状态。0.000s|U0.000sJI迳天士.Remove

0.000s|U0.000sJI迳天士.Remove47-10B-A47-10B-AV初始可见叟切背景颜邑谖明度旅转I顺时外策舔转CiQ席［SN0制作其他容器的轨迹。“容器2”至“容器8”的轨迹设置同“容器1”的设置。为了让每两个容器对象之间更好地过渡，前一个容器的最后一个关键帧到下一个容器开始的关键帧可以间隔0.5秒。每个容器的轨迹都有两个关键帧，关键帧之间的时间距离都是2秒。

宵圣或色手螂指初抬r风谖明度宵圣或色手螂指初抬r风谖明度'•朝隹转为“字2”至“字8”的轨迹添加关键帧。以“字2”为例，将图片放在舞台的中下方，第一个关键帧时间为0的时候添加，第二个关键帧间隔3.5秒，改变y坐标后添加。其他剩下的字如此类推地制作。但是同样的缓冲问题，“字3”至“字8”的第一个关键帧都要设置在距离上一个字体的第二关键帧前一些的位置，这里我们在距离1秒的地方添加。初始可见剪切背景鞭色旋转山丽外;交字大小手势光标定制卉标拖动类型冗许能转允昏肢菲记录位置第四步：制作最后一页渐变显示的效果。给容器9中的图片9的轨迹添加2个关键帧，第一帧将图片9的透明度设置为0，第二帧设置为100，即可出现渐变显示的效果。第五步：制作向下滑动提示图标。添加一个箭头图片。移动到合适的位置后，在左边的工具栏中找到动效工具，添加并设置时长为3秒，动效类型为淡入，设置为自动播放。注意：只有将循环播放勾选为YES后，图标才会循环地从隐藏到显示。

第六步：添加跳转到官网的事件动作。添加内容为“点击进入官网”的中文字体，将其移动到合适的位置后，选中它。添加一个事件，触发条件为轻触，目标对象为舞台，目标动作为打开网页。这里的资源位置则是要跳转的网页链接。第七步：优化视差滑动。为了让滑动时间轴更流畅和防止由于层级关系使“上滑提示”的图标妨碍滑动。所以需要在滑动时间轴下添加一个事件。选中滑动时间轴后，添加一个事件,，触发条件为触摸开始，即手指滑动时，“上滑提示”的图标隐藏。重点控件：透明按钮，滑动时间轴，轨迹相关事件：触发对象：官网触发条件：轻触目标