制作点赞爆炸爱心多态组件交互动效UI

这个案例通过制作多态组件通过元素的放大缩小和透明度来呈现一个放射状的点击效果


跟着下面的步骤开始制作吧!


1.制作心形


使用三角形工具绘制一个三角形,边框输入<3即可得到心形,并填充灰色

BCAA8EA2-F224-4E48-BB2B-3EEA2079D838.png

再复制一个心形缩小填充红色

EE29CB71-FBFD-44F8-9C18-C27F84EEFB01.png


绘制线段并复制,调整复制线段的角度为180°,如下图,灰色线段为0°,蓝色为180°,起始点从上到下。

F6EBF9D3-975D-49CD-A7B3-4212BF12C6A0.png

将两个线段一起加选并复制得到下图的图形,线段可

0C18E93B-5B77-4921-9353-91E9AAF125F6.png

在线段上层再绘制一个红色圆形去掉填充,制作红色边框。

098F065A-0CCF-4CE9-9362-3DF7ABA30DD0.png

将灰色心形置顶层并选中所有元素打组制作组件。

C8E6EF21-B577-4977-BD0E-D6258A874558.png


2.制作组件


添加一个新状态命名为点赞

F6115805-2126-4554-A9C5-7672262E5926.png

切换到点赞状态,将底层小红色爱心放大到和灰色一样的大小,

0A50E549-62C4-4175-87A8-E2DFA4F24DB0.png

并且将灰色爱心的透明度调整为0。

618CC6A5-497D-4AA8-ACA8-B3C98DD763C7.png

选中所有线段放大

C15C5CEC-ED38-4E0B-AD2A-B3BAAE528945.png

将线段高度H调整为0,得到下面的图形,并调整透明度为0。

6109A48F-CD43-4AC5-ABCC-F72CC5373080.png

放大红色边框图形,如下图

96A643E6-ABAD-42FD-BB82-9A0DBF08B0E6.png


3.制作交互


切换到默认状态

制作一个点击的自动动画

EBAB479C-7818-47A4-8F35-D6BC06CB1CB1.png

切换到点赞状态,制作一个点击的过渡动画

57AC99AB-D66B-4769-959C-5D15C774245C.png

制作完成,组件可以直接复制


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



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