视频教程
一、案例效果
效果1
效果2
二、应用场景
拖放目标是一个容器组件,可以置入允许拖动的图片,并触发相应的事件。
使用这个组件,会给交互带来趣味性,也可以结合一些逻辑判断。
三、素材准备
至少准备2个元素图片,碰撞素材与被碰撞素材。
文末附件下载素材,非商用,仅供学习使用。
四、组件用法
基本用法
1.高级组件中找到并添加“拖放目标”组件,调整为合适的大小
2.调整拖放目标组件的位置、大小。
3.添加一张图片,设置为可拖动的图片,在右侧面板勾选“可拖动”
4.勾选好可拖动,下方可以设置拖拽的属性,决定拖拽途中元素的动作;还可以对元素的拖拽方向做出限制,这里我们就不另外设置了,使用默认即可。
5.选中拖放目标,添加图片为正确置入元素。还可以勾选“仅限正确元素置入”,增加趣味性。
5.给火箭添加一个飞出动画,目的是当火箭放在拖放目标里时,可以有一个飞出去的效果。注意:动画设置为等待触发,目的是让火箭动画不要早早的自己播放了。
6.再次选中拖放目标,添加正确置入时的响应操作,即火箭拖动到目标区域时,播放飞出动画。
7.注意事项:拖放目标组件和可拖动图片的初始位置不能相同。
--------- 不了解设计的程序员不是好客服 ---------------
回复(6)