仿苹果app下载动画-煎饼 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>煎饼</title>
</head>
<style>
.wrap {
    width: 64px;
    height: 64px;
    position: relative;
}

img,
.img_div {
    width: 64px;
    position: absolute;
    left: 0;
    top: 0;
}

.img_div {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 2;
}

.show_img {
    z-index: 3;
    left: -13px;
    top: -13px;
}

.box {
    width: 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;
    width: 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;
    width: 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;
    width: 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;
    width: 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应用下载动画

　 

  

posted on 2018-10-19 14:32  求知的木头  阅读(219)  评论(0)    收藏  举报

导航