web网页加载圈之进阶篇

web网页加载圈之进阶篇

做完简单的加载效果后,相信大家也想接着做一些更为复杂的效果。我也是这么想的。很多网页的加载动画都是由很多帧组成的,要做到这种效果也不难,说到底就是看你拆分动画的思路。下面讲一个简单的例子。

从左到右循序渐进的加载效果

一个典型的动画加载效果就是,从左到右循序渐进的圆点加载。效果如下:
蒋文斌博客之圆点加载效果
那么怎么来实现这种效果呢?

绘制n个圆点

我这里绘制了6个圆点,相信画圆点应该难不倒各位。

1
2
border-radius: 50%;
background-color: gray;

如何做圆点的动画效果

我这里采用的方案是背景色变化,每个圆点的颜色按照顺序依次由灰色变为红色。那么具体怎么做呢?

定义关键帧

这里先定义关键动画帧,描述背景色的变化过程。

1
2
3
4
@keyframes highlightBack {
0% { background-color: gray; }
100% { background-color: red; }
}

应用动画

使用animation属性来应用highlightBack,并给到0.2s的一个动画时间。

1
2
3
.loading-animate {
animation: highlightBack 0.2s ease forwards;
}

设计动画过渡效果

我需要圆点的颜色一个个变化,那么执行动画的时间点就必须不一样。因此我给了每一个圆点不一样的animation-delay值。

1
2
3
4
// 比如第二个圆点,我给它的动画时延是0.2s,相当于第一个圆点的动画执行完了,才执行第二个圆点的动画。
.loading-point:nth-child(2) {
animation-delay: 0.2s;
}

一轮动画结束后怎么重新开始

页面加载的时间或长或短,不可能动画只执行一轮就结束了。所以我们需要让一轮动画结束后,接着开始第二轮的动画。具体怎么做呢?
我们可以监听最后一个圆点的动画结束事件animationend,然后在回调函数中移除动画类,经过短暂的延时后,重新添加动画类即可做到。

1
2
3
4
5
6
7
8
9
10
11
12
// 关键代码
document.getElementById('last').addEventListener('animationend', () => {
var points = document.getElementsByClassName('loading-point');
for (var i = 0; i < points.length; i++) {
points[i].classList.remove('loading-animate');
}
setTimeout(() => {
for (var i = 0; i < points.length; i++) {
points[i].classList.add('loading-animate');
}
}, 500);
});

根据状态隐藏圆点

这个跟上文说的是一样的,当document.readyState的值为complete时,隐藏圆点。点击参考上文。到此就完成了整个效果,点击查看效果页面


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

# demo

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×