聊天表情lottie嵌套组件动效实例

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

版本要求:

这个教程需要用到的Adobe XD 45版本以上的功能——添加Lottie文件

主要通过制作多态组件来实现功能。


需要制作三个画板,跟着下面的步骤开始制作吧!


1.制作第3个画板


准备好素材,我们先制作第3个画板

在对话框中绘制一个矩形,拖入准备好的表情Lottie素材

58C966DA-A05E-44F5-A7F3-D619BEC33D43.png

将这个Lottie文件设置为自动循环播放

30B4B8C0-9A7E-4DC6-97E9-39E97D528A2E.png


2.制作第2个画板


复制这个Lottie图层到对话框中

F04202CC-5744-4DE7-A22E-26043FE53057.png

绘制发送按钮,给这个按钮添加一个颜色变深的悬停状态

F55A8C10-FBA9-4A34-BD29-2AA7FCD8203E.png

给这个按钮的悬停状态添加一个点击动画链接到上面制作好的第3个画板

B2E69CBE-AE17-4840-908D-147C48B48794.png

3.制作第1个画板


D45874F3-2DB8-4852-93B0-3F0F564AD14E.png

制作灰色表情icon的悬停状态,分别绘制四个矩形,拖入四个表情Lottie文件

DA02E10C-5771-467C-9DAB-55D43FDF9083.png

在这个组件内,再将第一个表情制作成一个嵌套的组件,对这个表情制作一个悬停状态,悬停状态下设置Lottie文件为自动循环播放

AB7B6FF6-AF5E-43BB-874F-E3DD9CDB6627.png


并对这个表情的悬停状态制作交互,链接到第二个画板

616D090A-DBBF-411D-9F3C-34DE07D0D7B3.png


4.制作完成


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


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