制作Loading组件

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

最近项目中使用到一个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的transformtranslate()可以将14个圆点围成一个圆圈。此时,如果你的效果中不是14个圆点,而是五个圆点的时候,你只需要修改相关的参数即可。

圆点排列,通过上面的公式计算,已经搞定。现在是需要一个动画效果,让你的圆点变得更为有趣。也就是说,只有配上了动效,才是我们最终需要的Loadingu效果。接下来,来看一下,圆点的动效。

比如,我们有一个简单的动效,这个动效是通过keyframes来完成的。具体效果可以根据自己的需要来做,这里只是一个简单的效果:

@keyframes ball-spin {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 0;
        transform: scale(0);
    }
}

不用我解释,大家一看就明白。假设我们的动画的持续时间是1s。效果如下:

如果你要的是这样的一个效果,那到这里,理论上是完成了。可我们要的效果是这样的:

要实现这样的一个效果,我们需要对每个圆点的animation-delay做一些处理。前面提到过,整个动画的animation-duration1s,那么每个圆点的animation-delay依此延迟1/14 s。如此一来,咱们可以计算出时间:

-1 * (1 + (i + 1) * 1 / 14)

注意:此处的-1控制的是方向,让你能感觉到loading效果是顺时针还是逆时针转。系数为-1表时逆时针,就是上图看到的效果。

整个运用到的原理就如上所述。接下来分别看看几种不同方式的实现。

纯CSS实现方式

Loading效果实现方式有很多种,比如@css_live整理这些Loading动效的Demo,就涵盖了多种实现方式,有纯CSS的、有Canvas的,也有SVG的。而且在CodePen上也有很多Loading的Demo

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

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

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

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