iH5初级教程：动画必备,灵活运用时间轴

iH5初级教程：动画必备，灵活运用时间轴微信H5页面中控制物体运动的效果不用PS也可以做出来，可以灵活的运用iH5的时间轴来控制物体的运动等。

工具/原料：iH5面编辑工具、图片

第一步：

1、选中舞台，将舞台的宽高设置为1024*768px，背景颜色设置为灰色

2、，添加时间轴。选中舞台，点击工具栏里的“时间轴”图标，在舞台下添加时间轴1。时间轴1属性面板设置总时长6秒，自动播放YES，循环播放NO。

第二步：添加图片。

1、选中时间轴

2、点击工具栏里“图片”图标

3、点击“上传”在时间轴下添加需要移动的图片。

4、添加4张图片，背景文字，近，中，远。

第三步：添加轨迹。

1、选中图片

2、点击工具栏里的“轨迹”图标

3、在需要移动的图片下添加一个轨迹。

第四步：添加关键帧。

1、选中轨迹

2、给每个轨迹添加关键帧，点击时间轴上的Add按钮

3、选中关键帧，调整图片的位置，关键帧的图片位置设置好就会有图片移动的效果，就像动画一样。

第五步：

1、选中近图片，点击工具栏时间轴工具，添加时间轴。总时长2秒。自动

播放yes，循环播放为yes。

2、选中时间轴，点击工具栏图片工具，在舞台上画一个区域添加花的图片。

3、选中花的图片，点击工具栏轨迹工具，添加轨迹。

4、点击时间轴窗口的ADD，添加关键帧，在时间轴窗口的第一个框里填2，点回车，花图片属性面板旋转720度，点ADD添加关键帧。

第五步：添加交互事件。

1、选中时间轴

2、点击工具栏里的“事件”图标

3、在时间轴下添加交互事件，可以用来控制时间轴的循环播放、，也可以当时间轴播放到特定时间的时候去控制其他物体的运动或隐藏。

重点控件：时间轴、轨迹、事件

知识点：

1、需要整体移动时间轴下的图片，只需要再添加一个透明按钮，透明按钮的x 和y坐标设置为0，然后把时间轴剪切粘贴到透明按钮下，成为透明按钮的子对象就可以了，这样移动透明按钮就可以整体移动时间轴下面的图片了。

2、时间轴下面也还可以套用时间轴。

重点事件：

在时间轴下添加交互事件，可以用来控制时间轴的循环播放、，也可以当时间轴播放到特定时间的时候去控制其他物体的运动或隐藏。

触发对象：时间轴

触发条件：结束

目标对象：时间轴

目标动作：反向播放

触发对象：时间轴

触发条件：反向停止

目标对象：时间轴

目标动作：从头播放

触发对象：时间轴

触发条件：播放时间

时间：2

目标对象：舞台

目标动作：振动

时间：1

触发对象：时间轴触发条件：播放时间时间：3

目标对象：花

目标动作：隐藏