由于小程序用到的环形进度条,用canvas画的话有很多问题,如:
1、不能同层渲染
2、绘制画面不能随着滚动条而改变位置
所以最后还是得采取css+js方式写改效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆环运动</title>
<style>
.cirqueBox{
position: relative;
width: 140px;
height: 140px;
border-radius: 50%;
-webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
mask: radial-gradient(transparent 60px, #000 0);
}
.cirqueRed{
position: absolute;
width:100%;
height: 100%;
left:0;
top:0;
background-color:#e31514;
z-index: 1;
}
.cirqueGrey{
position: absolute;
width:100%;
height: 100%;
left:0;
top:0;
background-color:#aaa;
z-index: 2;
}
@keyframes mymove
{
0% {
clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 440px 70px, 70px -300px);
}
25% {
clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 440px 70px, 440px 70px);
}
50% {
clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 70px 440px, 70px 440px);
}
75% {
clip-path: polygon(70px 70px, 70px -300px, -300px 70px, -300px 70px, -300px 70px, -300px 70px);
}
100% {
clip-path: polygon(70px 70px, 70px -300px, 70px -300px, 70px -300px, 70px -300px, 70px -300px);
}
}
</style>
</head>
<body>
<div class="cirqueBox">
<div class="cirqueRed"></div>
<div class="cirqueGrey" id="circleAnimate"></div>
</div>
<script>
document.getElementById('circleAnimate').style.animation="mymove 4.5s linear 1"
document.getElementById('circleAnimate').style.animationFillMode="forwards"
//以上两个顺序不能变,否则结束时动画状态不能为预期效果
</script>
</body>
</html>