资源预览内容
第1页 / 共6页
第2页 / 共6页
第3页 / 共6页
第4页 / 共6页
第5页 / 共6页
第6页 / 共6页
亲,该文档总共6页全部预览完了,如果喜欢就下载吧!
资源描述
H5里可实现多种交互手势,其中就包括拖动,今天我们来介绍一下,如何使用epub360实现在H5里拖动元素到指定位置触发动画的效果,如下图:二、应用场景拖放目标是一个容器组件,可以置入允许拖动的图片,并触发相应的事件。使用这个组件,会给交互带来趣味性,也可以结合一些逻辑判断。三、素材准备至少准备2个元素图片,碰撞素材与被碰撞素材。四、组件用法基本用法1.高级组件中找到并添加“拖放目标”组件,调整为合适的大小2.调整拖放目标组件的位置、大小。3.添加一张图片,设置为可拖动的图片,在右侧面板勾选“可拖动”4.勾选好可拖动,下方可以设置拖拽的属性,决定拖拽途中元素的动作;还可以对元素的拖拽方向做出限制,这里我们就不另外设置了,使用默认即可。5.选中拖放目标,添加图片为正确置入元素。还可以勾选“仅限正确元素置入”,增加趣味性。5.给火箭添加一个飞出动画,目的是当火箭放在拖放目标里时,可以有一个飞出去的效果。注意:动画设置为等待触发,目的是让火箭动画不要早早的自己播放了。6.再次选中拖放目标,添加正确置入时的响应操作,即火箭拖动到目标区域时,播放飞出动画。7.注意事项:拖放目标组件和可拖动图片的初始位置不能相同。=
收藏 下载该资源
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号