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

iH5初级教程:动画必备,H5+缓动特效

时间:2024-09-23 14:39:35

“围住神经猫”这个曾一度刷爆朋友圈的H5小游戏是不是很好玩,使用一个免费的在线H5编辑工具不需要写代码也可以制作这种类似的小游戏,下面教大家来制作一个非常简单的小游戏

工具/原料

iH5

方法/步骤

1、1.添加图片。选中舞台,点击工具栏里的“图片”工具,在舞台上画出一个框,分别在舞台下添加三张图片:水果、树枝和蜗牛,并调整好图片的位置。2.添加缓动。选中“蜗牛”图片,点击工具栏里的“缓动”工具,在“蜗牛”图片下添加“缓动1”和“缓动2”。

iH5初级教程:动画必备,H5+缓动特效

iH5初级教程:动画必备,H5+缓动特效

iH5初级教程:动画必备,H5+缓动特效

2、设置缓动效果。选中“缓动1”,设置缓动距离为30,移动方向为-45,时长为0.2,缓动类型为二次出,自动播放和开始前隐藏设为NO。同理,选中“缓动2”,设置缓动距离为600,移动方向为90,时长为1,缓动类型为二次进,自动播放和开始前隐藏设为NO。

iH5初级教程:动画必备,H5+缓动特效

iH5初级教程:动画必备,H5+缓动特效

3、添加交互事件。选中“蜗牛”图片,点击工具栏里的“事件”工具,在图片下添加事件1。选中“事件1”,设置触发条件为手指按下,按下时间为0,目标对象是舞台下蜗牛图片下的缓动1,目标动作是开始。事件1的效果是当用手指去点击蜗牛时,蜗牛就会朝某个方向运动一个距离,这个距离和方向就是缓动1设置好的距离和方向。

iH5初级教程:动画必备,H5+缓动特效

4、添加被碰撞对象。选中舞台,点击工具栏里的“透明按钮”工具,在舞台下添加一个被碰撞对象,这个被碰撞对象其实就是一个透明按钮,选中透明按钮右键可以重命名。

iH5初级教程:动画必备,H5+缓动特效

5、添加计数器。选中舞台,点击工具栏里的“计数器”工具,在舞台下添加计数器1。添加碰撞事件。在“蜗牛”图片下添加事件2,设置触发条件为碰撞,对象是舞台下的被碰撞对象,选择边缘碰撞,距离设置为25,速度优化设为NO,目标对象是舞台下的计数器1,目标动作是赋值,值设为1。碰撞事件的效果是当蜗牛运动一定的距离,碰撞到了被碰撞对象,就给计数器赋值1。

iH5初级教程:动画必备,H5+缓动特效

6、添加交互事件。选中“计数器1”,在计数器1下添加3个事件佼沣族昀:事件3。事件1的触发条件为等于,值是1,目标对象是舞台下蜗牛下的缓动1,目标动作是删坛冰核哧除。效果是当计数器等于1时删除缓动1,不让蜗牛按缓动1进行运动。事件2的触发条件为等于,值是1,目标对象是舞台下的蜗牛,目标动作是设置属性,旋转(顺时针)设为15。效果是当计数器等于1时让蜗牛顺时针旋转15度。事件3的触发条件为等于,值是1,目标对象是舞台下蜗牛下的缓动2,目标动作是开始。效果是当计数器等于1时让蜗牛按缓动2设置好的距离和方向运动,掉落到水果篮里。注意:事件3的触发条件是计数器等于1,所以要将计数器前面的勾去掉,开始时禁用计数器下面的事件。

iH5初级教程:动画必备,H5+缓动特效

iH5初级教程:动画必备,H5+缓动特效

iH5初级教程:动画必备,H5+缓动特效

7、更多精彩好载睛碥伉玩的H5小游戏都可以用iH5编辑工具制作,快来围观吧!知识点:缓动:缓动对象有些类似于“运动”对象,但是缓动可以设置对象运动的时长,设置缓动的运动方式,如线性运动等。碰撞晗稍噔猷:碰撞后触发动作,即触发对象碰撞指定的对象时。碰撞的选项中,中心距离分为“中心碰撞”和“边缘碰撞”,“中心碰撞”是碰撞到指定对象的中心才会触发动作,“边缘碰撞”是碰撞到制定对象的边缘才会触发动作,距离的大小决定了碰撞的准确度,假如边缘碰撞,距离设置为80,还没接触到指定对象碰撞就会开始和触发动作;勾选速度优化为YES,能优化触发对象在碰撞过程中的移动速度。重点事件:触发对象:蜗牛图片,触发条件:手指按下,目标对象:缓动1,目标动作:开始。效果是当用手指去点击蜗牛时,蜗牛就会朝某个方向运动一个距离。触发对象:蜗牛图片,触发条件:碰撞,对象:被碰撞对象即透明按钮,中心距离:选择边缘碰撞,距离:25,速度优化:NO,目标对象:计数器,目标动作:赋值,值:1触发对象:计数器触发条件为:等于,值:1,目标对象:蜗牛下的缓动1,目标动作:删除。效果是当计数器等于1时删除缓动1,不让蜗牛按缓动1进行运动。触发对象:计数器触发条件为:等于,值:1,目标对象:蜗牛,目标动作:设置属性,旋转(顺时针):15。效果是当计数器等于1时让蜗牛顺时针旋转15度。触发对象:计数器触发条件为:等于,值:1,目标对象:蜗牛下的缓动2,目标动作:开始。效果是当计数器等于1时让蜗牛按缓动2设置好的距离和方向运动,掉落到水果篮里。

© 一点知识