线段的间隙值制作有趣的loading交互动效(2)

教程内容:

本案例需要XD V36版本以上,通过编辑线段的间隙值等数值来制作loading效果


整体预览


这个案例需要制作5个画板,只有一个元素,案例中圆为244*244大小,边框为10px

F283C991-74F7-48A9-91B1-3EBB054E9880.png


制作画板


首先准备好一个圆画板,从上图可看出第1个圆和第4个圆都是1个点,我们需要将下图的圆变成1个点

计算圆的周长2πR,案例中圆为244*244 间隙值如果为周长长度那么就会变成一个点,2*3.14*122=767,所以将间隙值设置为767即可变成1个点

596851D2-80F0-48D6-B538-2EBB4B002D64.png

287FFF5B-37F5-4521-A149-EF2668FE4F55.png

如果虚线设为圆周长的一半767/2=283间隙值设为0就能得到一个圆

FE6042FD-C2C8-4E2C-AE45-6A8648A65028.png

0DC90C83-0C0D-429F-B380-1F2B8A5450E5.png

根据动画效果点先从下往上聚合成圆,再从上往下变成点

所以第1、2两个画板圆角度设为180°

3、4两个画板圆角度为0度

AAD1D3B0-8BA5-445D-BBED-37DD6DDFEB26.png

第2、3两个画板虽然看着是一样的,实际上圆旋转了180°所以在这里需要添加一个时间为0的交互,让图形在0秒中180°旋转

55143500-8A17-492D-88B9-9AA4EB2EC500.png

其余画板添加一下0.8秒的自动动画

06A56523-178E-42B9-8A9E-CC49FB72EFEF.png


最后,将第5个画板的圆点垂直移动到与第一个画板的点对齐的坐标

7571282E-ED84-4A37-8DC7-154673F97977.png

添加一下弹跳的自动交互

9C0BE71A-788F-426E-9898-E2EDCA7CBA5D.png

制作完成

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

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