《iH5初级教程动画必备,H5+缓动特效》由会员分享，可在线阅读，更多相关《iH5初级教程动画必备,H5+缓动特效（4页珍藏版）》请在金锄头文库上搜索。
1、iH5初级教程动画必备,H5+缓动特效iH5初级教程：动画必备，H5+缓动特效 “围住神经猫”这个曾一度刷爆朋友圈的H5小游戏是不是很好玩，使用一个免费的在线H5编辑工具不需要写代码也可以制作这种类似的小游戏，下面教大家来制作一个非常简单的小游戏。 工具/原料：图片素材 第一步：添加图片。选中舞台，点击工具栏里的“图片”工具，在舞台上画出一个框，分别在舞台下添加三张图片：水果、树枝和蜗牛，并调整好图片的位置。 第二步：添加缓动。选中“蜗牛”图片，点击工具栏里的“缓动”工具“蜗牛”图片下添加“缓动1”和“缓动2”。 ，在第三步：设置缓动效果。选中“缓动1”，设置缓动距离为30，移动方向为-45，
2、时长为0.2，缓动类型为二次出，自动播放和开始前隐藏设为NO。同理，选中“缓动2”，设置缓动距离为600，移动方向为90，时长为1，缓动类型为二次进，自动播放和开始前隐藏设为NO。 第四步：添加交互事件。选中“蜗牛”图片，点击工具栏里的“事件”工具，在图片下添加事件1。选中“事件1”，设置触发条件为手指按下，按下时间为0，目标对象是舞台下蜗牛图片下的缓动1，目标动作是开始。事件1的效果是当用手指去点击蜗牛时，蜗牛就会朝某个方向运动一个距离，这个距离和方向就是缓动1设置好的距离和方向。 第五步：添加被碰撞对象。选中舞台，点击工具栏里的“透明按钮”工具，在舞台下添加一个被碰撞对象，这个被碰撞对象其
3、实就是一个透明按钮，选中透明按钮右键可以重命名。 第六步：添加计数器。选中舞台，点击工具栏里的“计数器”工具下添加计数器1。 第七步：添加碰撞事件。在“蜗牛”图片下添加事件2，设置触发条件为碰撞，对象是舞台下的被碰撞对象，选择边缘碰撞，距离设置为25，速度优化设为NO，目标对象是舞台下的计数器1，目标动作是赋值，值设为1。碰撞事件的效果是当蜗牛运动一定的距离，碰撞到了被碰撞对象，就给计数器赋值1。 ，在舞台第八步：添加交互事件。选中“计数器1”，在计数器1下添加3个事件：事件1、2、3。 事件1的触发条件为等于，值是1，目标对象是舞台下蜗牛下的缓动1，目标动作是删除。效果是当计数器等于1时删除
4、缓动1，不让蜗牛按缓动1进行运动。 事件2的触发条件为等于，值是1，目标对象是舞台下的蜗牛，目标动作是设置属性，旋转设为15。效果是当计数器等于1时让蜗牛顺时针旋转15度。 事件3的触发条件为等于，值是1，目标对象是舞台下蜗牛下的缓动2，目标动作是开始。效果是当计数器等于1时让蜗牛按缓动2设置好的距离和方向运动，掉落到水果篮里。 注意：事件1、2、3的触发条件是计数器等于1，所以要将计数器前面的勾去掉，开始时禁用计数器下面的事件。 更多精彩好玩的H5小游戏都可以用iH5编辑工具制作，快来围观吧！ 知识点： 缓动：缓动对象有些类似于“运动”对象，但是缓动可以设置对象运动的时长，设置缓动的运动方式
5、，如线性运动等。 碰撞： 碰撞后触发动作，即触发对象碰撞指定的对象时。碰撞的选项中，中心距离分为“中心碰撞”和“边缘碰撞”，“中心碰撞”是碰撞到指定对象的中心才会触发动作，“边缘碰撞”是碰撞到制定对象的边缘才会触发动作，距离的大小决定了碰撞的准确度，假如边缘碰撞，距离设置为80，还没接触到指定对象碰撞就会开始和触发动作；勾选速度优化为YES，能优化触发对象在碰撞过程中的移动速度。 重点事件： 触发对象：蜗牛图片， 触发条件：手指按下， 目标对象：缓动1， 目标动作：开始。 效果是当用手指去点击蜗牛时，蜗牛就会朝某个方向运动一个距离。 触发对象：蜗牛图片， 触发条件：碰撞， 对象：被碰撞对象即透明按钮， 中心距离：选择边缘碰撞， 距离：25， 速度优化：NO， 目标对象：计数器， 目标动作：赋值， 值：1 触发对象：计数器 触发条件为：等于， 值：1， 目标对象：蜗牛下的缓动1， 目标动作：删除。 效果是当计数器等于1时删除缓动1，不让蜗牛按缓动1进行运动。 触发对象：计数器 触发条件为：等于， 值：1， 目标对象：蜗牛， 目标动作：设置属性， 旋转：15。 效果是当计数器等于1时让蜗牛顺时针旋转15度。 触发对象：计数器 触发条件为：等于， 值：1， 目标对象：蜗牛下的缓动2， 目标动作：开始。 效果是当计数器等于1时让蜗牛按缓动2设置好的距离和方向运动，掉落到水果篮里。
