H5教程:Epub360实现碰撞检测触发动画
时间:2019-11-29 17:00:44 [网络资源]作者: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)碰撞后消失
勾选后,碰撞元素会在发生碰撞时消失(如下图所示)
本文标签:AutoTags插件服务端需要您提供购买者的账号和密码才能继续访问 福利活动 自由织梦 织梦猫 秀站网 跟版网 dede58 莎莎分分欢乐生肖-分分欢乐生肖彩票 折翼天使 吾爱分分欢乐生肖-分分欢乐生肖彩票
转载请注明来源:H5教程:Epub360实现碰撞检测触发动画
本文永久链接地址:http://vcqc.cn/1499.html
郑重声明:
本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
如无法链接失效或侵犯版权,请给我们来信:han2311678@163.com
- H5教程|如何零基础在H5中实现数据图表可视化效果?
- H5教程|零代码,手把手教你制作超酷的横屏H5
- H5教程:Epub360实现碰撞检测触发动画
- HTML5教程|0代码,快速制作调查问卷?教你用Epub360一招搞定
- 【开源】网校在线培训系统.net分分欢乐生肖-分分欢乐生肖彩票
- 【在线教育】中小学微课学习系统.net分分欢乐生肖-分分欢乐生肖彩票
- 韩式裱花蛋糕培训报名
- 免费领取3天爱奇艺会员 完成简单任务即可领取 秒到
- 两波自动发红包 2.8 统一地理位置限制 支持订阅号 可限制活动地区
- 大王卡用户再次升级 每月可多领500M-1G国内流量 流量通话二选一
- 最新大商创2.5.0全开源版分分欢乐生肖-分分欢乐生肖彩票下载入驻开店商城分分欢乐生肖-分分欢乐生肖彩票pc+wap+微分销+拼团+众筹+拍卖
- 最新仿网易云课堂完整分分欢乐生肖-分分欢乐生肖彩票分享,基于THINKPHP内核二次开发版在线视频教育培训系统分分欢乐生肖-分分欢乐生肖彩票
- discuz整站分分欢乐生肖-分分欢乐生肖彩票 育儿母婴亲子论坛商城商家+手机版,PHP精品母婴商城社区分分欢乐生肖-分分欢乐生肖彩票
- 360分分欢乐生肖-分分欢乐生肖彩票屋分分欢乐生肖-分分欢乐生肖彩票分享:ZP安全团队渗透测试视频教程第1期
- 梦磊代刷免费版
- 栏目导航
-
- 最新文章
- 热门文章