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

 时间:2024-09-23 14:31:42

微信H5页面中控制物体运动的效果不用PS也可以做出来,可以灵活的运用iH5的时间轴来控制物体的运动等。

工具/原料

iH5

方法/步骤

1、选中舞台,将舞台的宽高设置为1024*768px,背景颜色设置为灰色,添加时间轴。选中舞台,点击工具栏里的“时间轴”图标,在舞台下添加时间轴1。时间轴1属性面板设置总时长6秒,自动播放YES,循环播放NO。

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

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

2、添加图片。选中时间轴点击工具栏里“图片”图标点击“上传”在时间轴下添加需要移动的图片添加4张图片,背景文字,近,中,远。

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

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

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

3、添加轨迹。选中图片点击工具栏里的“轨迹”图标在需要移动的图片下添加一个轨迹。

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

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

4、添加关键帧。选中轨迹给每个轨迹添加关键帧,点击时间轴上的Add按钮选中关键帧,调整图片的位置,关键帧的图片位置设置好就会有图片移动的效果,就像动画一样。

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

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

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

5、艽鹤绚趣选中近图片,点击工具栏时间轴工具,添加时间轴。总时长2秒。自动播放yes,循环播放为yes。选中时间轴,点击固嗟喹账工具栏图片工具,在舞台上画一个区域添加花的图片。选中花的图片,点击工具栏轨迹工具,添加轨迹。点击时间轴窗口的ADD,添加关键帧,在时间轴窗口的第一个框里填2,点回车,花图片属性面板旋转720度,点ADD添加关键帧。

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

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

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

6、添加交互事件。选中时间轴点击工具栏里的“事件”图标在时间轴下添加交互事件,可以用来控制时间轴的循环播放、,也可以当时间轴播放到特定时间的时候去控制其他物体的运动或隐藏。

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

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

7、重点控件:时间轴、轨迹、事件知识点:需要整体移动时间轴下擢爻充种的图片,只需要再添加一个透明按钮,透明按钮的x裘沲谡迹和y坐标设置为0,然后把时间轴剪切粘贴到透明按钮下,成为透明按钮的子对象就可以了,这样移动透明按钮就可以整体移动时间轴下面的图片了。时间轴下面也还可以套用时间轴。重点事件:在时间轴下添加交互事件,可以用来控制时间轴的循环播放、,也可以当时间轴播放到特定时间的时候去控制其他物体的运动或隐藏。触发对象:时间轴触发条件:结束目标对象:时间轴目标动作:反向播放触发对象:时间轴触发条件:反向停止目标对象:时间轴目标动作:从头播放触发对象:时间轴触发条件:播放时间时间:2目标对象:舞台目标动作:振动时间:1触发对象:时间轴触发条件:播放时间时间:3目标对象:花目标动作:隐藏

ih5滑动时间轴如何使用 【平面设计必备】ih5中普通时间轴的基本用法 iH5初级教程:动画必备,H5+时间轴动画 iH5初级教程:排版必备,掌握H5的对象树 iH5怎么设置自动翻页
热门搜索
少女大人电视剧 通灵妃漫画 动漫帅哥图片 荷兰豆图片 抽象画中的越南少女