仿苹果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应用下载动画

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

8个超炫酷仿苹果应用的HTML5动画
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
怎么找到苹果App Store的应用程序下载链接地址
http://jingyan.baidu.com/article/6dad5075f6fa79a123e36e85.html 怎么找到苹果App Store的应用程序下载链接地址每个上传到苹果app ...
苹果App部署HTTPS进行在线下载安装
苹果App的ipa下载需要有几个前提,可参考:Android和IOS的本地App如何安装(apk&ipa) 本文主要介绍如何部署https提供ipa的下载,步骤如下: 1. 搭建一个HTTPS ...
Vue仿微信app页面跳转动画
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
微信不支持App下载的解决方案微信跳转打开外部浏览器下载（苹果跳转商店下载）
在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...
下载苹果APP历史版本
1.参考教程: iOS 下载旧版本 app 或者已下架 app 方法 - 简书 https://www.jianshu.com/p/33dc8bfd4134 2.步骤总结: 下载旧版带 app 管理的 ...
一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
发布iOS应用程序到苹果APP STORE完整流程
参考:http://blog.csdn.net/mad1989/article/details/8167529(xcode APP 打包以及提交apple审核详细流程(新版本更新提交审核)) http ...

随机推荐

（转）在编写Spring框架的配置文件时，标签无提示符的解决办法
http://blog.csdn.net/yerenyuan_pku/article/details/52831618 问题描述初学者在学习Spring框架的过程中,大概会碰到这样一个问题:在编写S ...
mysql中的 enum (枚举)
mysql enum是指字段的类型表示枚举类型 mysql> alter table student add adders enum("sichuang","sh ...
END - 提交当前的事务
SYNOPSIS END [ WORK | TRANSACTION ] DESCRIPTION 描述 END END 提交当前事务. 所有当前事务做的修改都可被其它事务看到并且保证在发生崩溃的情况下的 ...
安卓获取数据demo出现的问题
时间戳是long型的数据,但其他数据都是float型,但AsyncTask要求是统一数据类型.这样我就不能把时间戳放进AsyncTask里面进行处理,我就在doInBackground中获取时间戳然后 ...
微信公众号：theTree20181123
哈哈哈哈~我开通了一个微信公众号,以后的文章会发在公众号内啦~走过路过的小伙伴们过来围观一下呀~~ 主要是分为三个模块:视觉SLAM,ACM,变美树洞这里面写下来的文章都是我再读研阶段的所学所想当然 ...
（待解决）IDEA配置JDBC查询数据库PreparedStatement pstmt = dbconn.prepareStatement(sql)出现空指针错误
package com.demo; import java.io.*; import java.sql.*; import java.util.*; import javax.servlet.*; i ...
前段开发 react native tab功能
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, } from 'react-nati ...
6. 将单独表空间（File-Per-Table Tablespaces）复制到另一个实例
6. 将单独表空间复制到另一个实例本节介绍如何将单独表空间从一个MySQL实例复制到另一个MySQL实例,也称为可传输表空间功能. 将InnoDB单独表空间复制到其他实例的原因有很多: - 在不对 ...
Go：单元测试
测试用的文件名必须以 _test.go 结尾: 测试用的函数名必须以 Test 开头,一般来说:Test+被测试的函数名(第一个字母必须大写): func TestXx(t *testing.T) { ...
Wall Treatment
* wall treatment You can combine the turbulent flow interfaces with different types of wall treatmen ...

仿苹果app下载动画-煎饼

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

随机推荐

热门专题