<!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应用下载动画

　

仿苹果app下载动画-煎饼的更多相关文章

  1. 8个超炫酷仿苹果应用的HTML5动画

    苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...

  2. 怎么找到苹果App Store的应用程序下载链接地址

    http://jingyan.baidu.com/article/6dad5075f6fa79a123e36e85.html 怎么找到苹果App Store的应用程序下载链接地址 每个上传到苹果app ...

  3. 苹果App部署HTTPS进行在线下载安装

    苹果App的ipa下载需要有几个前提,可参考:Android和IOS的本地App如何安装(apk&ipa) 本文主要介绍如何部署https提供ipa的下载,步骤如下: 1. 搭建一个HTTPS ...

  4. Vue仿微信app页面跳转动画

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...

  5. 使用贝赛尔曲线画扇形、圆形、弧线、多边形，实现App下载时的动画效果demo

    // // MyView.swift // TestUIBezierPath // // Created by iCodeWoods on 16/5/8. // Copyright © 2016年 i ...

  6. 微信不支持App下载的解决方案 微信跳转打开外部浏览器下载（苹果跳转商店下载）

    在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...

  7. 下载苹果APP历史版本

    1.参考教程: iOS 下载旧版本 app 或者已下架 app 方法 - 简书 https://www.jianshu.com/p/33dc8bfd4134 2.步骤总结: 下载旧版带 app 管理的 ...

  8. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  9. 发布iOS应用程序到苹果APP STORE完整流程

    参考:http://blog.csdn.net/mad1989/article/details/8167529(xcode APP 打包以及提交apple审核详细流程(新版本更新提交审核)) http ...

随机推荐

  1. jQuery ajax参数后台获取不到的问题

    <script type="text/javascript"> init(); var alldate = {a : "0",b:"1&q ...

  2. HDU 5381 The sum of gcd （技巧，莫队算法）

    题意:有一个含n个元素的序列,接下来有q个询问区间,对每个询问区间输出其 f(L,R) 值. 思路: 天真单纯地以为是道超级水题,不管多少个询问,计算量顶多就是O(n2) ,就是暴力穷举每个区间,再直 ...

  3. Web开发者不容错过的10个HTML5工具

    HTML5已经成为当今世界的一个必然组成部分.由于World Wide Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之一.随着网络的不断扩张,Web开发人员非常 ...

  4. Python——集合与字典练习

    集合与字典练习question1问题描述:有一个列表,其中包括 10 个元素,例如这个列表是[1,2,3,4,5,6,7,8,9,0],要求将列表中的每个元素一次向前移动一个位置,第一个元素到列表的最 ...

  5. 约瑟夫环（java）

    问题描述:n个人围成一圈,每隔k个杀死一个,问最后的幸存者的编号 假设标号是0 ~ n-1,幸存者是f[n] 1.特殊情况:f[1]=0 2.一般情况:f[n] = (f[n-1]+k)%n 游戏开始 ...

  6. Linux Shell参数扩展（Parameter Expansion）

    Shell Command Language在线文档: http://pubs.opengroup.org/onlinepubs/9699919799/utilities/V3_chap02.html ...

  7. 简单DP内容

    1. 最长上升子序列 [题目描述] 给定N个数,求这N个数的最长上升子序列的长度. [样例输入] 7 2 5 3 4 1 7 6 [样例输出] 4 第一种解法:时间复杂度O(n^2), 状态设计:DP ...

  8. Linux下安装Redis5.0.2

    1.下载redis 地址 http://download.redis.io/releases/redis-5.0.2.tar.gz 2.解压tar -zxf redis-5.0.2.tar.gz 3. ...

  9. 关于 vertical-align

    默认情况下(行内基线位置 = 行内元素最大高度): 如果对这个正方形使用 vertival-align:middle.在最大高度的元素上使用负值(middle = - 50% * 元素高度),可以提升 ...

  10. JAVA：windows myeclipse jdk tomcat maven 完美搭建

    文章来源:http://www.cnblogs.com/hello-tl/p/8305027.html 0.下载所需安装包 jdk-7u71-windows-x64.exe   链接:http://p ...