iH5中级教程︰微场景H5必备,滑动时间轴轨迹.doc

iH5中级教程：微场景H5必备，滑动时间轴+轨迹 你是否还在羡慕别人做的H5各种华丽各种切换各种来?使用一个免费的在线H5编辑工具不需要写代码也可以 工具 第一步： 1、选中舞台 2、点击工具栏里的“图片”图标 3、在舞台上画出一个框 4、在舞台下添加图片，并调整好图片的位置。 第二步： 1、选中舞台 2、点击工具栏里的“滑动时间轴”图标 3、在舞台上画出一个框作为你滑动的区域 4、在这区域外滑动则无效，选中图片Ctrl+X，选中滑动时间轴Ctrl+V，把图片移动到滑动时间轴下。 第三步：为滑动时间轴下的图片，添加轨迹和控制点 1、选中图片 轨迹图标轨迹 第四步： 1、在0秒的时候Add按钮一个关键帧 3、跳转到2秒；点击“图片旋转（） 1、设置滑动时间轴总时长一般与最后一个控制点的时间相同 2、方向是你往哪边滑动是让滑动时间轴正向播放 3、自动跳转控制点设置成否 4、比例是设定手指滑动的距离对滑动时间轴轴播放进度的控制，默认值为1，即手指按设定方向划过滑动时间轴整个范围时，滑动时间轴会从起点播放到终点。 重点控件：滑动时间轨迹知识点： 点击工具栏上的时间轴工具，在舞台上画出一个框作为滑动区域，添加滑动时间轴。选中滑动时间轴，点击图片工具，添加素材。选中素材，点击轨迹工具，添加轨迹，点击时间轴窗口上的 如果要修改关键帧里记录的素材的属性，必须选中关键帧为橙色，再移动素材的位置或修改大小透明度等。 在时间轴窗口的第一个框内填入数字1，点回车，则时间轴窗口里的控制关键帧位置的小方块就自动到达1秒的位置，点击 5、滑动方向：滑动方向是指设定一个滑动的方向，即手指或鼠标向此设定方向滑动时，滑动时间轴会正向的播放；注意，手指也可以向此设定的方向反向滑动，那么滑动时间轴会反向播放。比如，滑动方向设置成为向右，那么手指或鼠标向右滑动的时候，滑动时间轴会正向播放，如果手指或鼠标向左滑动，则滑动时间轴反向播放；注意，当滑动时间轴在起点时，向反方向滑动是不会起作用的，因为起点时无法反向播放。 6、自动跳转控制点：自动跳转控制点是指滑动时滑动时间轴是否在滑动停止时自动播放至下一个控制点，如果将这个选项设为是，那么在滑动停止时，将会自动播放到下一控制点再停止，呈现出类似惯性滑动的效果 7、自动跳转时长：如果将“自动跳转控制点”设置成为是，那么可以通过自动跳转时长来设定滑动停止后，滑动时间轴播放至下一控制点的时间，以秒为单位。如果时间设得长，那么自动跳转的时间便会慢。