使用Adobe XD蒙版制作交互动效UI设计UX

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

教程内容:

通过绘制不规则形状的蒙版来制作自动动画达到交互效果

按照下面的步骤一步一步实现吧!


1.制作第1个画板


使用钢笔工具沿着素材绘制一个同样外形的蒙版

671A8536-9911-4B7D-94A0-7A32E25BE187.png

制作一下素材的阴影

3A7DD956-9CD8-4AD8-90EC-7EBD95FC0E6D.png

绘制一个带波浪线的填充图形。

DB7380E3-2427-4C15-A557-3A8DD0B211B9.png

将以上所有素材都打蒙版组


2.制作第2个画板


复制第1个画板,将蒙版组内的波浪图形调整一下位置


BAAB3188-CE91-4BDB-9D1C-D766E9D3A9EA.png

链接两个画板,制作交互动画

8D4DD124-5475-4CBD-80B5-64C884E65630.png

按照下面的顺序制作一下3、4两个画板,重点表现波浪从无到有到覆盖的过程

DB6EFB38-7CC2-431C-B1DE-97238DCFF611.png

2、3两个画板之间添加的交互需要有一点区别

10D9FF16-717B-48F2-B109-51B48F3FBE12.png

使用重复网格工具制作一下百分比数据,粘贴到各个画板中,再分别调整一下显示的数字。

06D594DB-0E77-41E8-92BB-B4BDB63ACDE9.png

最后排列上所有的素材,完成效果

81769285-1D52-402D-B0CA-1F1CFDE22B00.png

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

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