Spin组件库优化

Spin效果在平时的业务开发场景中使用频率很高，而且存在各种各样的spin效果。最近在改组件库的UI走查问题时发现Spin组件存在比较大的问题，最大的问题就是整个Spin组件的效果和UI设计稿上面的存在很大的差异，通过对比发现，原来的实现方案是通过引入Loading Icon实现的，但是Icon本质上为一张Path路径画出来的Svg图片，对css动画的处理只能整体无法做到局部，因此实现的效果也是差强人意，虽然也是一种简便的实现效果，但是没有满足设计稿的效果。
因此本文通过另外一种方案，实现设计稿想要的效果。

原效果

原效果如图1

图1 Spin原有效果

期望效果

期望效果如图2

图1 Spin期望效果

原方案

1. 利用Svg画出Spin形状

2. 利用css动画实现旋转效果

现方案

元素分解

1、根据设计稿可知Spin组件为12个dom元素组成的一个整体。然后对每个元素设置css动画效果。因此dom结构如下：

旋转效果

2、对每个元素进行position: “absolute”定位后相对于父级容器position: “relative”进行旋转

3、相对于旋转后的元素生成Icon-child 这块也可以通过伪元素::before去完成，这样代码会更加简洁，但是本文中Spin组件可以允许用户自定义颜色，因此dom需要嵌套。

设置每个spin-item的样式，这块可以设置成多种形状。具体可以很具设计稿进行调整。

这样spin的现状就完成了。还差一个动画效果。

动画效果

动画效果的实现也很简单。通过对每一个spin-item天剑sk-circleFadeDelay的透明度变化效果。但是这样每个spin-item的透明度变化都是同步的。为了达到不同步的效果。从第二个spin-item开始设置animation-delay。依次延迟0.1s。

总结

通过以上方式利用html+css实现Spin效果，如果只是在业务中想实现，不封装成组件，上述中ssc-spin-icon-child元素可以直接通过伪元素的方式实现，这样可以有效的简化dom结构，dom和css更加简洁明了。其次也可以利用svg技术在画图方面的优势，每个spin-item也可以用svg技术来实现。

参考链接

https://juejin.cn/post/6928591871992135688?
https://juejin.cn/post/6919397632615923726
https://juejin.cn/post/6844903556164616205