<!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. EF为什么向我的数据库再次插入已有对象？(ZT)

    最近做了个多对多对实体对象,结果发现每次只要增加一个子实体,就会自动添加一个父实体进去,而不管该父实体是否已经存在. 找了好久,终于找到这篇文章,照文章内容来看,应该是断开连接导致的. 原文地址:ht ...

  2. CATransaction 知识

    CATransaction 事务类,可以对多个layer的属性同时进行修改.它分隐式事务,和显式事务. 区分隐式动画和隐式事务:隐式动画通过隐式事务实现动画 . 区分显式动画和显式事务:显式动画有多种 ...

  3. swift 泛型的类型约束

    总结: 1.类型约束只能添加到泛型参量上面 2.关联类型是泛型参量: 3.关联类型可以通过 协议.关联类型名称的形式引用: func allItemsMatch<C1: Container, C ...

  4. 通过JS加载XML文件，跨浏览器兼容

    引言 通过JS加载XML文件,跨多种浏览器兼容. 在Chrome中,没有load方法,需要特殊处理! 解决方案 部分代码 try //Internet Explorer { xmlDoc=new Ac ...

  5. Python matlab octave 矩阵运算基础

    基础总结,分别在三种软件下,计算 求逆矩阵 矩阵转置 等运算,比较异同 例子:正规方程法求多元线性回归的最优解 θ=(XTX)-1XTY octave: pwd()当前目录 ones() zeros( ...

  6. Python 面向对象 特殊方法（魔法方法）

    Python 的特殊方法,两边带双下划线的方法. 比如:__init__(self, ...).__del__(self) 1.__init__(self,...) : 构造方法 __init__(s ...

  7. Java中的BIO，NIO，AIO分别是什么

    BIO:同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程开销,当然可以通过线程池机制改善.BIO方式适用 ...

  8. PTA|团体程序设计天梯赛-练习题目题解锦集（C/C++）（持续更新中……）

    PTA|团体程序设计天梯赛-练习题目题解锦集(持续更新中) 实现语言:C/C++:      欢迎各位看官交流讨论.指导题解错误:或者分享更快的方法!! 题目链接:https://pintia.cn/ ...

  9. Django框架基础知识05-自定义模板标签与过滤器

    根据一定规则,自己定义出符合需求功能的.用在任何你有需求的地方,因为内置的满足不了我们的需求,不同的东西有不同的定义规则 目前最最重要的就是HOW 一 文件路径配置: templates 存放自定义 ...

  10. Java学习关于集合框架的基础接口--Collection接口

     集合框架(Collection  Framework)是Java最强大的子系统之一,位于java.util 包中.集合框架是一个复杂的接口与和类层次,提供了管理对象组的最新技术.Java集合框架标准 ...