制作Loading组件

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

咱们先来看一个截图:

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

实现原理

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

  • 圆点的半径,比如说30px
  • 圆点的颜色,比如说#f36
  • 圆点的位置,按一定的比例分布在一个容器上,并且围成一个圆形

比如图所示:

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

继续简化一下,就如下图这样:

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

一个完整的圆的弧度是,所以2π rad = 360°1 π rad = 180°1°=π/180 rad1 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) * r
dotY = Math.sin(rad) * r

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

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

最后通过CSS的transformtransla

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/animation/loading-animation-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部