使用H5创意展示实现上下对切特效

在手指的滑动中可以同时把上下两个容器里的图片或内容进行切换，已形成相互对切的效果。下面我们来展示一下做出这样的效果所需要的步骤。

步骤一：添加页面和滑动时间轴

1. 在舞台下添加一个页面。选中舞台，在工具栏里点击页面工具，添加一个页面。

2. 选中页面，点击工具栏里的滑动时间轴工具，在舞台上画出一个矩形，添加一个滑动时间轴。

步骤二：添加上下容器

1. 在滑动时间轴下添加两个透明按钮，作为存放图片的容器，分别命名为上层容器和下层容器。选中滑动时间轴1，点击工具栏下的透明按钮工具，在舞台的上方画出一个矩形，添加透明按钮，命名为上层容器。选中滑动时间轴1，点击工具栏下的透明按钮工具，在舞台的下方画出一个矩形，命名为下层容器，这两个透明按钮容器用来固定图片的位置。

2. 在两个透明按钮的属性设置中，剪切设置为YES。

步骤三：添加图片和轨迹

1. 在上层容器和下层容器中，各添加若干张图片。选中上层容器对象，点击工具栏里的图片工具，在上层容器框中画出一个矩形，添加图片。选中下层容器对象，点击工具栏里的图片工具，在下层容器框中画出一个矩形，添加图片。

2. 在每张图片下，各添加一个轨迹。选中图片上3对象，点击工具栏里的轨迹工具，添加轨迹，如此类推，每一张图片都给它一个轨迹。

步骤四：设置关键帧

在轨迹上面添加特定的关键帧。点击Add按钮，即可在轨迹上添加关键帧。以图下3和图上3为例。首先设定它们在轨迹上的初始位置，一般的初始位置是定在容器的外面，以滑动的方式进入容器，而第二个关键帧就是图片完全进去容器后的位置，一般设置图片的位置跟容器的位置一样就行。

同理也可以在滑动时间轴上设置图上2和图下2、图上1和图下1的关键帧，从而实现上下容器的连续连贯滑动。

重点工具与参数

1. 滑动时间轴：用于控制图片的滑动出现时间和位置。

2. 透明按钮：作为容器，用于放置需要滑动的图片。

3. 轨迹：用于控制图片的运动轨迹。

4. 滑动放大比例：通过设定手指滑动的距离对滑动时间轴播放进度进行控制，默认值为1。在本案例中，滑动放大比例的数值设置一般为0.2到0.5，以符合浏览的滑动节奏。

小提示

1. 使用透明按钮作为容器，将需要滑动的图片放在里面，利用滑动时间轴控制每张图片滑动出现的时间和位置，从而实现了图片上下对切的效果。

2. 滑动放大比例：使用此参数来设定手指滑动的距离对滑动时间轴轴播放进度的控制，默认值为1。滑动比例设得较小时，滑动时间轴随着同样的滑动动作，会播放得更慢。在本案例中，滑动放大比例的数值设置一般为0.2到0.5，以更符合浏览的滑动节奏。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。