360极速3分彩—大发分分彩屋(pyvg.cn)精品网站极速3分彩—大发分分彩,织梦模版,游戏极速3分彩—大发分分彩分享平台
当前位置:网站首页 网络资源 正文

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

时间:2019-11-29 17:00:44 [网络资源]作者:epub360

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

百度搜索:epub360 了解更多

H5教程:Epub360实现碰撞检测触发动画 第1张

二、应用场景

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

三、素材准备

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

四、碰撞检测的几个概念

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

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

2.碰撞时触发器

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

五、组件用法

基本用法

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

H5教程:Epub360实现碰撞检测触发动画 第2张

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

H5教程:Epub360实现碰撞检测触发动画 第3张

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

H5教程:Epub360实现碰撞检测触发动画 第4张

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

H5教程:Epub360实现碰撞检测触发动画 第5张

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

H5教程:Epub360实现碰撞检测触发动画 第6张

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

H5教程:Epub360实现碰撞检测触发动画 第7张

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

H5教程:Epub360实现碰撞检测触发动画 第8张

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

H5教程:Epub360实现碰撞检测触发动画 第9张

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

H5教程:Epub360实现碰撞检测触发动画 第10张

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

H5教程:Epub360实现碰撞检测触发动画 第11张

10.小技巧提示

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

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

  • 飞出动画结束时,也需要再次触发“飞入动画(1)”

  • 飞入动画(1),并且飞入动画结束时,再次触发执行 “飞入动画(1)”

  • 飞出动画(2)

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

11.碰撞检测配置项说明

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

(1)偏移

H5教程:Epub360实现碰撞检测触发动画 第12张

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

H5教程:Epub360实现碰撞检测触发动画 第13张

(3)中心:是指以组件中心为圆心,周围多少像素内,算是碰撞区域

H5教程:Epub360实现碰撞检测触发动画 第14张

4.触发

H5教程:Epub360实现碰撞检测触发动画 第15张

单次:触碰时触发,在接触后,不会再触发

持续:只要处于接触状态,就一直触发

H5教程:Epub360实现碰撞检测触发动画 第16张

(5)碰撞后消失

H5教程:Epub360实现碰撞检测触发动画 第17张

勾选后,碰撞元素会在发生碰撞时消失(如下图所示)

H5教程:Epub360实现碰撞检测触发动画 第18张


本文标签:AutoTags插件服务端需要您提供购买者的账号和密码才能继续访问  福利活动  自由织梦  织梦猫  秀站网  跟版网  dede58  莎莎极速3分彩—大发分分彩  折翼天使  吾爱极速3分彩—大发分分彩 

转载请注明来源:H5教程:Epub360实现碰撞检测触发动画

本文永久链接地址:http://pyvg.cn/1499.html

郑重声明:
本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
如无法链接失效或侵犯版权,请给我们来信:han2311678@163.com