制作Loading组件

最近项目中使用到一个Loading效果，其实是一个很简单的效果，主要是因为这个Loading出现在不同的场景之中，而且大小也不一致。对于这样的效果，往往都会想通过组件的方式来处理，其出发点就是更易维护，易扩展。当然，这对于前端的同学而言并没有什么复杂性，也没有多少技术含量。不过我还是希望把这个过程记录下来。

咱们先来看一个截图：

从上图可以看出来，其效果是一样的，不同之处是使用场景不同，大小不同而以。那么接下来，就来聊聊这样的一个效果怎么通过不同的方式来完成。

实现原理

实现上面的这样的一个效果，我们需要有一点点数学相关的知识，这样更有易于后续效果制作。比如说，示例中有14个圆点，那么这14个圆点具有自己相关的特性参数：

• 圆点的半径，比如说30px

• 圆点的颜色，比如说#f36

• 圆点的位置，按一定的比例分布在一个容器上，并且围成一个圆形

比如图所示：

注意，上较绘制的不是很标准，只是为了阐述问题。这里将会使用到一些数学公式，因为我们需要知道每个圆点的圆心的位置。

继续简化一下，就如下图这样：

这里会运用到一些角度和弧度相关的知识，其实这部分知识点，在学习Canvas的时候有所涉猎。在CSS中，咱们做旋转一般使用的是deg（角度）为单位，但在JavaScript绘制圆或圆弧却常用弧度rad为单位。

一个完整的圆的弧度是2π，所以2π rad = 360°，1 π rad = 180°，1°=π/180 rad，1 rad = 180°/π（约57.29577951°）。以度数表示的角度，把数字乘以π/180便转换成弧度；以弧度表示的角度，乘以180/π便转换成度数。

rad = (π / 180) * deg

同样的：

deg = (rad * 180) / π

使用JavaScript来实现角度和弧度之间的换算。一个π大约是3.141592653589793，在JavaScript中对应的是Math.PI。那么角度和弧度之间的换算：

rad = (Math.PI * deg) / 180

同样的：

deg = (rad * 180) / Math.PI

下图展示了常见的角度和弧度之间的换算：

接下来回到我们的示例中来，示例有14个圆点，那么其每个圆点对应的位置可以通过下面的公式计算出来。首先计算出每个点对应的rad值。

rad = Math.PI * deg / 180

根据上面的公式，我们需要知道deg。众所周知，一个圆是360deg，我们在这个圆上平均布了14个点，那么每个圆对应的deg值是

deg = 360 / 14 * i

其中i是一个从0 ~ 13的索引值。套到对应的公式中：

rad = Math.PI * 360 / 14 * i / 180

在JavaScript中，使用一个for循环，可以打印出其值：

for (let i = 0, len = 14; i < len; i++) {    let rad = Math.PI * 360 / 14 * i / 180    console.log(`第${i+1}个圆点对应的rad值：${rad}`) }

根据上面的计算得到每个圆点对应的rad值，接下来就需要利用三角函数相关的知识，来计算每个圆点圆心的(x,y)值。

换成JavaScript中的数学公式：

dotX = Math.cos(rad) * rdotY = Math.sin(rad) * r

假设外圆的容器半径r = 100。继续将上面的值放到for循环中：