<!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. JAVA自带的加密算法-MD5\SHA1\BASE64

    需要导入jar包: commons-codec.jar MD5 String str = "abc"; DigestUtils.md5Hex(str); SHA1 String s ...

  2. Node.js Addons翻译(C/C++扩展)

    PS:请先升级Node 6.2.1,Node 升级命令 npm install -g n;n stable.NOde.js扩展是一个通过C/C++编写的动态链接库,并通过Node.js的函数requi ...

  3. 指针-AC自动机

    大家都不喜欢指针,但是这个AC自动机仿佛不用不行…… 先引用我最喜欢的话:“AC自动机,不是自动AC的机器.” 如果写不好还可能一直WA AC自动机是KMP与Trie树的完美结合,适用于多字符串匹配, ...

  4. python爬虫---从零开始（三）Requests库

    1,什么是Requests库 Requests是用python语言编写,基于urllib,采用Apache2 Licensed 开源协议的HTTP库. 它比urllib更加方便,可以节约我们大量的工作 ...

  5. 函数内部属性之arguments和this

    在函数内部,有两个特殊的对象:arguments和this. 1.arguments arguments是一个类数组对象.包含着传入函数中的所有参数.但这个对象还有一个名叫callee的属性,该属性是 ...

  6. java反编译工具jad

    下好以后解压就可以用了,软件就只有一个exe文件和一个帮助文件.在众多的JAVA反编译工具中,有几种非常著名的工具使用了相同的核心引擎——JAD,其中主要包括:FrontEnd Plus.mDeJav ...

  7. 8. Truncate undo表空间

    8. Truncate undo表空间 要Truncate Undo 表空间,必须为MySQL实例配置至少两个undo表空间(两个undo表空间可确保一个undo表空间保持活动状态,另一个处于脱机状态 ...

  8. log4j 、logback 以及slf4j三者之间的关系

    在项目的开发中由于对于log4j.logback以及slf4j之间的关系和相关的知识不能清晰掌握,在业余时间进行记录. 1.三者之间的关系 1) 简答的讲就是slf4j是一系列的日志接口,而log4j ...

  9. python初体验 ——>>> 模拟体育竞技

    python初体验 ——>>> 模拟体育竞技 一.排球训练营 1. 简介: 模拟不同的两个队伍进行排球的模拟比赛. 2. 模拟原理: 通过输入各自的能力值(Ⅰ),模拟比赛的进行( P ...

  10. LeetCode（57） Insert Interval

    题目 Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if nece ...