<!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. 7-Java-C（四平方和）

    题目描述: 四平方和定理,又称为拉格朗日定理: 每个正整数都可以表示为至多4个正整数的平方和. 如果把0包括进去,就正好可以表示为4个数的平方和. 比如: 5 = 0^2 + 0^2 + 1^2 + ...

  2. String系列之replaceAll方法替换.

    直接使用String类的replaceall方法的第一个参数并不是简单的字符串,而是一个正则表达式.在正则表达式中,英文点号(.)表示任意字符,所以你原先的写法会把所有字符都替换成空白. 转义使用所以 ...

  3. java程序在一个电脑上只启动一次，只开一个进程

    方案1: 单进程程序可以用端口绑定.程序启动的时候可以尝试看该端口是否已经被占用,如果占用则程序已经启动. 方案2:你可以在java程序中创建一个隐藏文件,程序退出的时候删除这个文件.这样在程序启动的 ...

  4. Qt _六天的学习路线

    六天的学习路线:第一天:    1.Qt的介绍    2.Qt的框架    3.项目文件(.pro)    4.第一个Qt程序(hello Qt)    5.父窗口和子窗口的区别(控件,部件,构件)  ...

  5. HTML中 DOM操作的Document 对象详解(收藏)

    Document 对象Document 对象代表整个HTML 文档,可用来访问页面中的所有元素.Document 对象是 Window 对象的一个部分,可通过 window.document 属性来访 ...

  6. Java中的枚举--Enumeration

    之前并没有注意到枚举这个知识点,因为之前在项目中并没有使用过枚举,可能是项目并不是很复杂的原因吧,今天看张孝祥老师的讲解,觉得,这个枚举真的有很多值得学习的地方,探究一下枚举的设计原理,底层到底是怎么 ...

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

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

  8. kvm客户机存储方式

    前面介绍了存储的配置和qemu-img工具来管理镜像,在QEMU/KVM中,客户机镜像文件可以由很多种方式来构建,其中几种如下: 1) 本地存储的客户机镜像文件. 2) 物理磁盘或磁盘分区. 3) L ...

  9. Python之微信-微信好友头像合成

    仔细看下图,你的头像就藏在里面哦!!! 有没有犯密集恐惧症?这并不震撼,如果你有 5000 位好友的话,做出来的图看着会更刺激些. 看完了图,你可能想知道这个图咋做出来的,不会是我闲着无聊把把好友头像 ...

  10. centos7下安装Python3.7（与python2共存）

    2019-01-22   22:50:05 centos7默认安装的是python2.7,然而python2基本上要淘汰了,所以有必要安装最新的python3 python,g++这些工具一般安装在/ ...