在前端系统中加入加载图案能增加用户的体验,而一款好的加载图案也能增加用户对你产品的好感,这就说明好的加载图案的重要性了。加油学起来,给你的系统带来一点点的不同!
老样子,先看看效果:
录制的时候有点掉帧了,但是在页面中显示是没有问题的。
首先我们先用 svg 画一个白色的圆。
<svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle fill="#fff" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
那么我们继续下一步,将它变成一个圆环。
利用svg的stroke这个描边属性,将上面的白圆变成一个蓝色的圆环。
.path {
stroke: #4285F4;
}
<svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
接下来,为这个圆环加上绕中心转动的动画。
主要用到svg的两个属性:stroke-dasharray,stroke-dashoffset
.path {
stroke-dasharray: 187; /*创建虚线*/
stroke-dashoffset: 0; /*偏移量*/
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
stroke: #4285F4;
-webkit-animation: dash 1.4s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg);
}
}
这两个的作用就是沿着圆环绘制一条圆弧路径,至于最大为什么是187呢?其实就是圆的周长,上面我们创建的圆的半径是30,所以周长约等于187.
上面主要用到了两个动画,一个是绘制动画,一个是旋转动画,两者是同时进行的,这样一个简单的选择加载图案就实现了。
不过看起来是断断续续的,没有丝滑的感觉。那是因为在圆旋转的时候,部分内容被外面的裁剪掉了,简单的解决方法,我们只需要让外面跟着一起转就好了。
给外面的svg加上旋转动画:
.spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite;
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
效果:
接下来加上颜色渐变就好了。
颜色渐变的动画:
@-webkit-keyframes colors {
0% {
stroke: #4285F4;
}
25% {
stroke: #DE3E35;
}
50% {
stroke: #F7C223;
}
75% {
stroke: #1B9A59;
}
100% {
stroke: #4285F4;
}
}
@keyframes colors {
0% {
stroke: #4285F4;
}
25% {
stroke: #DE3E35;
}
50% {
stroke: #F7C223;
}
75% {
stroke: #1B9A59;
}
100% {
stroke: #4285F4;
}
}
path中加上:
.path {
.....
-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
好了,本期内容就讲到这里,下期再见。