ih5中级教程微场景h5横向滑动切换.docxVIP

iH5 中级教程：微场景 H5 横向滑动切换 听语音 |浏览： 480|更新： 2016-06-13 19:331234567 分 步阅读下面我们一起来学习一下 iH5 中级教程的第二节微场 景 H5 必备，横向滑动切换方法 / 步骤 1.选中舞台，点击工 具栏页面工具，添加五个页面。 2、选中第一个页面，点击 工具栏图片工具，添加窗户的背景图片 3、 选中页面 1， 点击时间轴图标添加时间轴 14、（ 1）时间轴下添加箭头图 片（ 2）图片下添加轨迹（ 3）时间轴总时长 0.6 秒（4）为 图片添加三个关键帧，通过调整 y 坐标和透明度，制作箭 头指示上滑页面的效果。 5、（1）页面 1 下添加时间轴 2 （2）时间轴总时长 3 秒 （ 3）选中时间轴，点击图片 工具，添加人物素材 （ 4）选中素材，点击轨迹工具， 添加轨迹 （ 5）缩小图片，透明度为 0 （6）点 ADD 添加关键帧 （ 7）移动小方块到轨迹 1 秒的位置，调节图 片透明度 100 （ 8）把图片放大，移动到窗边的位置，点 ADD 添加关键帧这样就有人物从无到有出现的效果。 6、 （1）时间轴 2 里添加两张文字图片（ 2）每张图片下都添 加一个轨迹（ 3）通过设置关键帧，制作文字从两边往中间 靠拢的轨迹。 1、选中第二页，点击图片工具，添加一张人 物图片。 2、 （1）点击时间轴图标，页面 2 下添加时间轴 2）选中时间轴，点击富文本工具，在舞台画一个框，在 编辑框里填写一些文字。 （3）选中富文本，点击轨迹工 具，添加轨迹（ 4）轨迹开始显示为 NO （5）选中富文本， 添加两个关键帧，调整透明度和位置，使文字会从无到 有，从上到下出现。 1、 选中页面 3，点击工具栏滑动时间 轴工具，在舞台上画一个区域，添加滑动时间轴，滑动时 间轴与舞台一样尺寸。 2、选中滑动时间轴，点击透明按钮 工具，在舞台上画一个区域，添加透明按钮，此透明按钮 宽 3200 ，高 1008 ，是一个比舞台宽的长方形。 3、选中透 明按钮，点击工具栏图片工具，添加 6 张食物的图片作为 子对象。 6 张图片平铺在透明按钮上，其中第一张图片和第 六张图片是同一个食物图片。 （前后图片一样才能在循环播 放时前后衔接。 ） 4、选中透明按钮，点击轨迹工具添加轨 迹，点击 ADD 添加关键帧。 5、轨迹控制透明按钮往左移 动，关键帧的坐标分别是（ 0， 0）（-640 ， 0）（-1280 ， 0） （-1920 ，0）（ -2560 ， 0）（ -3200 ，0）。 2、滑动时间轴属 性面板设置，总时长 5秒，循环播放yes,滑动放大比例 0.2，滑动方向左，自动跳转控制点 YES滑动放大比例越 小，动画越平稳，越大，速度越快。自动跳转控制点就是 滑一下屏幕，自动跳到下一个关键帧的状态。 1、选中滑动 时间轴，点击富文本工具，添加 6 个富文本。 2、选中富文 本，点击工具栏轨迹工具，每个富文本都添加一个轨迹。 3、在对应食物图片的关键帧处添加富文本的关键帧。富文 本的轨迹属性面板，开始显示、结束显示为 NO ，即当图片 1 显示的时候，富文本 1 显示，其他时间均不显示。 4 、滑 动时间轴下，添加碟子图片作为遮罩装饰。为食物添加碟 子阴影的效果。 5、页面 3 下添加时间轴，时间轴下添加箭 头图片，为箭头图片添加轨迹。 1、 选中页面 4，点击时间 轴工具，添加时间轴。 2、时间轴下添加宽度大于舞台的图 片，图片下添加轨迹，图片往左移动。 3、选中时间轴，点 击工具栏事件工具，添加事件，时间轴结束，目标对象时 间轴，目标动作反向播放。 4、页面 4 下添加时间轴，控 制富文本从上往下显示。页面 5 下添加时间轴，时间轴控 制富文本从下往上、从无到有显示。第一个关键帧透明度 为 0，第二个关键帧透明度为 100 。 重点控件：滑动时间 轴、轨迹、透明按钮、富文本 知识点： 1、 滑动放大比 例：使用此参数来设定手指滑动的距离对滑动时间轴轴播 放进度的控制，默认值为 1，即手指按设定方向划过滑动时 间轴整个范围时，滑动时间轴会从起点播放到终点。滑动 放大比例越小，动画越平稳，越大，速度越快。 2、 自动 跳转控制点：自动跳转控制点是指滑动时滑动时间轴是否 在滑动停止时自动播放至下一个控制点，如果将这个选项 设为是，那么在滑动停止时，将会自动播放到下一控制点 再停止，呈现出类似惯性滑动的效 3、 自动跳转时长：如 果将“自动跳转控制点”设置成为是，那么可以通过自动跳转 时长来设定滑动停止后，滑动时间轴播放至下一控制点的 时间，以秒为单位。如果时间设得长，那么自动跳转的时 间便会慢。 TIPS:1、 在时间轴与滑动时间轴里，如果希望 循环播放可以前后衔接，应该使第一个关键帧和最后一个 关