拖拽对齐自动动画购物appUI教程

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

教程内容:

通过添加拖拽自动对齐动画,呈现比较精致的拖拽交互效果

跟着下面的步骤一步一步制作吧!


1.整体预览


这个案例需要制作6个画板,前四个画板制作的是滑板拖拽的效果,后两个画板制作添加购物车的效果。

B7EF3C47-6FF2-43D7-8257-42869CDCCCFA.png


2.准备素材


需要准备四个滑板素材并打组

1B8CAA5B-483C-42BB-BF4B-B0A1661C6B6D.png

按照如下四个画板滑板的位置调整好

3FED18E4-5C7A-4D53-A04F-35E77480C531.png

1-2两个画板链接滑板素材组添加一个拖移的自动动画

24C12CFD-3349-46F3-9054-DD51FE6DAECE.png

2、3两个画板制作一个时间为0的自动动画,这样在1、2两个画板拖拽后会自动回到3画板的位置

CBAFDF48-FB2E-4BDB-BA18-2E2B8277FB0C.png

同样的做法制作一下3、4、1画板的循环


3.制作添加购物车效果


点击第1个画板的红色滑板链接到第4个画板制作一下点击自动动画

081923E8-3317-4DFC-8632-624C9469B83C.png

同样方法,第5个画板制作一个点击画板到第6个画板

96C93C08-72D4-4613-B70A-87C8AA751581.png

BE61E6B0-2080-4A34-B425-79C71BA1395A.png

制作完成

点击前往查看→查看视频教程获取源文件

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作