养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

iH5初级教程:掌握H5的事件组功能

时间:2024-11-12 07:08:30

把灯笼挂在相应的窗户上,就会触发事件,当七个灯笼挂完,就会有一个成功动画。

iH5初级教程:掌握H5的事件组功能

工具/原料

iH5

方法/步骤

1、在对象树选中舞台,点击工具栏图片工具上传一张模糊的背景图片,点击工具栏中文字体工具添加一个标题。舞台下添加7张灯笼的图片。属性面板拖动类型设为任何方向。舞台下添加7个窗户,窗户下有一个提示的中文字体和对应的灯笼图片。窗户里的灯笼初始可见为NO,之后通过碰撞事件触发,再显示。

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

2、选中舞台,点击工具栏计数器工具,在舞台画一个框,添加计数器。选中可拖动的灯笼,例如“大”这个图片,点击工具栏事件组工具,触发对象“大”这个灯笼图片,触发条件碰撞,对象窗户1,中心碰撞,距离50。选中事件组,点击工具栏事件工具,添加3个事件。当可拖动的灯笼碰撞到窗户1的时候,事件1,窗户1下的灯笼子对象显示。事件2,计数器加1,事件3,删除可拖动的灯笼。

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

3、腩柽鬣盛用时间轴制作成功动画。第一个关键帧图片透明度为0,即显示原来的模糊背景。第二个关键帧,图片透明度为100,即背景变清晰。选中计数器,点击工具栏事件工具,添加事件,当计数器殪讧唁跬等于7时,时间轴1从头播放,即当7个灯笼挂完时,触发成功动画播放。选中舞台,点击工具栏中文字体工具,添加一个中文字体,选中中文字体,点击工具栏缓动工具,添加缓动,自动播放为NO。选中时间轴,添加事件,时间轴播放到2秒时,中文字体的缓动开始。

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

iH5初级教程:掌握H5的事件组功能

4、重点控件:事件组、事件、计数器知识点:事件:事件对象是i郡哏匙芥H5编辑器中制作互动效果的重要工具,它用来设定对象与对象之间的相互控制关系。在一个对象霍丶魇汜下,可以添加多个事件对象,即一个对象可以作为多个事件的触发对象。事件组:如果多个事件都是同样的触发对象与触发条件,则可以使用事件组把这些事件组合管理,优化作品。添加一个事件组的过程包括:选中预添加事件组的父对象,该对象即为触发对象,如果该对象可以设置触发条件,工具栏的事件组组件会点亮,点击事件组工具图标即可添加。重点事件:为可拖动的灯笼添加事件组,触发对象灯笼图片,触发条件碰撞,对象窗户,中心碰撞,距离50。即当灯笼图片碰撞到窗户时触发事件。事件组下添加3个事件。*目标对象窗户下的灯笼子对象,目标动作显示。*目标对象计数器,目标动作加1。*目标对象可拖动的灯笼,目标动作删除。计数器下添加事件,触发条件等于7,目标对象时间轴,目标动作从头播放。

© 一点知识