H5教程：Epub360实现碰撞检测触发动画

随着互联网的发展，移动设备的普及，H5作为信息载体发挥着十分重要的作用。其实，今天我们在移动设备上看到很多交互动画基本上都是基于HTML5，在H5里可实现多种交互手势和触发事件，今天我们来介绍一下，使用Epub360这个H5页面制作工具实现多个元素碰撞检测触发动画 ，基于这个功能可以制作很多H5小游戏。

百度搜索：epub360 了解更多

二、应用场景

Epub360的碰撞检测组件，可以侦测组件的位置变化，当不同组件之间碰撞时，利用触发器触发各种动作，常用于H5小游戏。

三、素材准备

需要准备两张不同的图片素材，Epub360注册账号一个（百度搜索epub360，几秒可以免费注册）

四、碰撞检测的几个概念

1.碰撞目标元素／碰撞元素

被用来设定为可以触发碰撞事件的两组组件，针对任意一个碰撞检测组件，都需要设置这么两组对象。这两组对象，可以各一个，也可以各多个。

2.碰撞时触发器

用于设定当发生碰撞时，可以触发到动作

五、组件用法

基本用法

1.点击操作页面上方的菜单栏，点击高级组件，在交互组件下选择碰撞检测组件

2.碰撞检测对象设定。针对一个“碰撞检测”组件，设定方法如下图：PS作两张图，命名为小球和碰撞方块，并导入到画布中:

3.设置碰撞物小球：点击碰撞组件，点击右侧添加按钮，勾选小球，点击确认；

4.同理设置碰撞目标方块：点击碰撞组件，点击右侧添加按钮，勾选方块，点击确认；

5.设置小球飞入动画：给小球添加飞入动画，设置重复次数为一直播放，设置动画效果为Expo.easeIn，点击确认；

6.同理设置小球飞出动画：给小球添加飞出动画，设置出现方式为和上一个一起开始，设置动画效果为Expo.easeOut，勾选等待触发，设置动画结束时触发刚刚设置的小球飞入动画，点击确认；

7.选中碰撞检测的触发器，触发时播放小球飞出的动画。

8.将小球移动到画布的的最下方；

9.设置碰撞方块可移动：点击碰撞方块，勾选可拖动，设置拖拽限制为水平；

10.预览效果。这时候我们点击左上角的预览按钮，选择预览当前页，在小球一直掉落的时候左右拖拽方块，看看小球与方块碰撞后的效果吧。

10.小技巧提示

• “小球”上设定了两个动画

• 设定为等待触发，在“碰撞时”，触发播放

• 飞出动画结束时，也需要再次触发“飞入动画（1）”

• 飞入动画（1），并且飞入动画结束时，再次触发执行 “飞入动画（1）”

• 飞出动画（2）

• “色块”设定了可拖放，并且限定在水平方向拖动

11.碰撞检测配置项说明

前面介绍了 “碰撞目标元素”、“碰撞元素”以及“碰撞触发器”，其他需要介绍的配置项如下：

（1）偏移

（2）边界：是指以组件边界为基准，周围多少像素内，算是碰撞区域。以 “以边界计算偏移 10个像素”举例，示意图如下：

（3）中心：是指以组件中心为圆心，周围多少像素内，算是碰撞区域

4.触发

单次：触碰时触发，在接触后，不会再触发

持续：只要处于接触状态，就一直触发

（5）碰撞后消失

勾选后，碰撞元素会在发生碰撞时消失（如下图所示）