卡片拖拽重叠自动对齐UI动效制作

教程内容:

通过制作自动画和拖拽动作实现左右拖拽卡片并重叠的交互效果

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


1.制作画板


制作好卡片素材摆放好重叠位置,3个卡片均需开启3D变换功能

F62A9C3C-EDFB-4635-A176-EB70CCE8962E.png

复制第1个画板,以黑色卡片为例,在第2个画板调整黑色卡片的位置如下

FE8CE763-3BF8-49FB-93A5-42062D23906A.png

复制第2个画板,将黑色卡片置于最底层

67F44750-BE23-4AA6-BBE0-EB1617C0FFF0.png

以此类推制作一下向左拖动绿色卡片和粉色卡片的位置

235A274A-DB2B-4716-B36B-1FD8D127A030.png


2.制作交互


交互只需要添加两种,

一个是拖动的交互,一个是拖动后自动收叠到底层的交互

以黑色卡片为例,


B3FB1300-C768-42CA-BD2F-EF2DF81755E4.png

链接1、2两个画板添加拖移交互

F49831CD-0483-451E-8E8C-8E6D10DDFA92.png

链接2、3两个画板添加时间为0的自动对齐动画,就会在拖移之后自动收到底层的位置

A945A76F-1B0C-465C-9143-66172ADB4B3A.png

7859704D-1B6B-45ED-91A7-2344C7E5582A.png

以此类推制作剩下的画板交互

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

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