<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>煎饼</title>
</head>
<style>
.wrap {
64px;
height: 64px;
position: relative;
}
img,
.img_div {
64px;
position: absolute;
left: 0;
top: 0;
}
.img_div {
background-color: rgba(0, 0, 0, 0.3);
100%;
height: 100%;
opacity: 1;
z-index: 2;
}
.show_img {
z-index: 3;
left: -13px;
top: -13px;
}
.box {
38px;
height: 38px;
overflow: hidden;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* color: black; */
z-index: 5;
border-radius: 50%;
}
.inner {
position: absolute;
34px;
height: 34px;
border-radius: 40px;
overflow: hidden;
left: 50%;
top: 50%;
z-index: 6;
transform: translate(-50%, -50%);
opacity: 1;
/* animation: second-half-hide 1.6s steps(1, end); */
}
.spiner,
.masker {
position: absolute;
top: 0;
50%;
height: 100%;
overflow: hidden;
}
.spiner {
left: 0;
}
.masker {
right: 0
}
.spiner_a {
border-radius: 40px 0 0 40px;
background-color: rgba(0, 0, 0, 0.3);
transform-origin: right center;
animation: spin 800ms linear 800ms;
100%;
height: 100%;
animation-fill-mode: forwards;
}
.masker_b {
border-radius: 0px 40px 40px 0px;
background-color: rgba(0, 0, 0, 0.3);
transform-origin: left center;
animation: spin 800ms linear;
100%;
height: 100%;
animation-fill-mode: forwards;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
</style>
<body>
<div class="wrap">
<!-- <div class="outer"></div> -->
<img src="./face-09.jpg" style="z-index:1">
<div class="img_div"></div>
<div class="box">
<img class="show_img" src="./face-09.jpg" style="z-index: 3">
</div>
<div class="inner">
<div class="spiner">
<div class="spiner_a">
</div>
</div>
<div class="masker">
<div class="masker_b">
</div>
</div>
</div>
</div>
</body>
</html>
理念是用层级叠加来实现
然后旋转的效果就是利用overflow，我想了很久没想出来，还是小徒弟想出来的，厉害了，人确实老了
里面用的时候还是有些坑，是根据包的返回百分比来实现动画的，开始会有段时间没数据，我就先让它动，到达一定点的时候停下，或者数据大于我这个零界点就跟着数据走了
介绍思路，怎么做看业务需求了
let num1 = 10; let num; let homechild = self.$refs.homechild[index]; if (homechild.downloadNum) return;
let b = setInterval(function() { homechild.getTime(num1, comm.appId); num1 = num1 + 10; if (num1 > 80) { clearInterval(b); } }, 1000);
这里就是还没拿到数据，先让动画走起来，会在80%的时候停下来
//处理多次100的情况 if (num > 100) return; num = Math.ceil(msg.data.percent); if (num == 100) { clearInterval(b); homechild.getTime(100, comm.appId); setTimeout(function() { self.clickstatus = false; }, 1000) //处理多次100的情况 num++; } else { if (num > num1) { //这里就是获取到数据，数据的值也大于上面定时器自己跑的值就启动数据的值来动画 clearInterval(b); homechild.getTime(num, comm.appId); } }
还有一种情况就是数据来的太快，就像龙卷风，你的动画会出现个问题，右边还没跑完，左边的也在跑了
let m = document.getElementsByClassName('downobj_div' + appid)[0];
m.style.display = 'block';
this.downloadNum = num;
//获取2边的动画圆，后续好旋转和影藏
let rightcircle = document.getElementById('rightcircle' + appid);
let leftcircle = document.getElementById('leftcircle' + appid);
if (num <= 50) { //当数据传输小于50%的时候
leftcircle.style.transform = "rotate(" + (3.6 * (num)) + "deg)";
} else if (num == 100) { //资源下载完了
leftcircle.style.display = "none";
rightcircle.style.transform = "rotate(" + (3.6 * 50) + "deg)";
localStorage.setItem(`appcan${appid}`, appid);
setTimeout(function() {
m.style.display = 'none';
}, 1000);
} else { //其他 这里就先影藏右边，在走左边的动画
// leftcircle.style.transform = "rotate(180deg)";
leftcircle.style.display = "none";
rightcircle.style.transform = "rotate(" + (3.6 * (num - 50)) + "deg)";
}
大体就这样实现了，手机下载仿IOS应用下载动画