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

小酷 8月前 78

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



二、应用场景

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

体验地址>>>>>www.epub360.com
https://www.epub360.com/?hmsr=heima&hmpl=advertorial&hmcu=yunying&hmkw=baibowen&hmci=20191129_6
三、素材准备

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

四、碰撞检测的几个概念

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

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

2.碰撞时触发器

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

五、组件用法

基本用法

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



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



3.设置碰撞物小球:点击碰撞组件,点击右侧添加按钮,勾选小球,点击确认;



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



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



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



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



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



9.设置碰撞方块可移动:点击碰撞方块,勾选可拖动,设置拖拽限制为水平;



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

走过的是人生,路过的是风景!
最新回复 (0)
返回