Material Design的Loading动画

作者: im宇 | 来源:发表于2016-10-04 15:36 被阅读1157次

Material Design的Loading动画
材料的动画
使用Circular Reveal为你的应用添加揭露动画效果
Material Design动画
动画·Material Design
Material Design控件使用
Material Design重新学系列 - 1.简介以及主题样
还在用AE做动效?Keynote才是真的动效神器
Android Material Design 常用控件介绍和使
设计Android App

写在前面：
这是一篇菜鸟的学习笔记，记录效果实现过程，而没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。

这篇文章将一步一步记录实现一个Material Design的Loading动画，该效果模仿自Materialize网站的Loading动画，效果如下：

Materialize网站的效果.gif

我的最终效果.gif

Loading链接展示

实现的小思路：

之前一直在想通过border的方法只能是实现一个完整的圆圈（或缺n*45°的圆圈），但是上面的效果明显是一个可变长度的圆圈的一部分，那么该如何实现呢？后来查看了下Materialize网站Loading部分的css布局。发现原来是另一种思路的实现。Materialize是通过一个小div设置overflow:hidden属性将圆圈的一半给挡住，然后在同个border-left等属性使圆圈只有一半，这样结合transform: rotate()属性选择这一半的圆圈就可以实现非完整圆圈了。而实际上实现上图任意程度的非完整圆圈，需要使用两个div分别各占布局的左右以及两个半圆来实现。具体如何使用，参考详解用CSS3制作圆形滚动进度条动画效果

第一部分动画（去掉外布局旋转的效果）

先来看看Materialize的效果：

去掉外布局旋转的效果.gif

我的实现效果：

动画一.gif

我的实现思路：
大布局下分为两个div，两个div下又有各自的圆圈。同时设置旋转动画以达到该效果。

实现代码：

<!DOCTYPE html>
<html>
<head>
    <mate charset="utf-8"></mate>
    <title>Material Design Loading Animation</title>
    <style>
        /*外层布局*/
        .circle-layout{
            width: 110px;
            height: 110px;
        }
        /*左div*/
        .layout-left{
            float: left;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*右div*/
        .layout-right{
            float: right;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*左圈*/
        .circle-left{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            border: 5px solid #F88E8B;
            border-radius: 50%;
            border-left: 5px solid transparent;
            border-bottom: 5px solid transparent;
            transform: rotate(40deg);
            animation: animation-circle-left 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*右圈*/
        .circle-right{
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            border: 5px solid #F88E8B;
            border-radius: 50%;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
            transform: rotate(-310deg);
            animation: animation-circle-right 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*左圈动画*/
        @keyframes animation-circle-left{
            0%{
                transform: rotate(40deg);
            }
            50%{
                transform: rotate(-100deg);
            }
            100%{
                transform: rotate(40deg);
            }
        }
        /*右圈动画*/
        @keyframes animation-circle-right{
            0%{
                transform: rotate(-310deg);
            }
            50%{
                transform: rotate(-170deg);
            }
            100%{
                transform: rotate(-310deg);
            }
        }
    </style>
</head>
<body>
    <div class="circle-layout">
        <div class="layout-left">
            <div class="circle-left"></div>
        </div>
        <div class="layout-right">
            <div class="circle-right"></div>
        </div>
    <div>
</body>
</html>

第二部分动画（加上外层布局旋转的效果）

先来看看Materialize的效果：

加上外布局旋转的效果.gif

我的实现效果：

动画二.gif

我的实现思路：
仔细看就会发现这个动画是先从一个点往前进方向伸张，然后又从尾部开始往前进方向收缩成一个点。那么如何通过上面“去掉外布局旋转的效果”基本动画得到“加上外布局旋转的效果”动画呢？从名字当中就可以看出来，答案就是加上外布局的旋转。外布局的动画时间是基本动画时间的两倍，总旋转角度为720°，旋转速度大致与“基本动画”相当（本来应该是一致，但注意到“基本动画”的圆圈伸张距离并没有达到360°，而外布局的动画又要在周期之间灰度过度）。
细心的人会注意到“加上外布局旋转的效果”与“动画二”的效果不大一样：前者的圆圈缺口方向会改变，二后者的方向一直向上。好吧，我承认是我不知道如何做到前者的效果。但看下面“动画三”的效果与Materialize的效果还是比较像的，先这样凑合用着吧！^_
代码实现：

<!DOCTYPE html>
<html>
<head>
    <mate charset="utf-8"></mate>
    <title>Material Design Loading Animation</title>
    <style>
        /*外层布局*/
        .circle-layout{
            width: 110px;
            height: 110px;
            animation: animation-circle 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*左div*/
        .layout-left{
            float: left;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*右div*/
        .layout-right{
            float: right;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*左圈*/
        .circle-left{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            border: 5px solid #F88E8B;
            border-radius: 50%;
            border-left: 5px solid transparent;
            border-bottom: 5px solid transparent;
            transform: rotate(40deg);
            animation: animation-circle-left 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*右圈*/
        .circle-right{
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            border: 5px solid #F88E8B;
            border-radius: 50%;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
            transform: rotate(-310deg);
            animation: animation-circle-right 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*左圈动画*/
        @keyframes animation-circle-left{
            0%{
                transform: rotate(40deg);
            }
            50%{
                transform: rotate(-100deg);
            }
            100%{
                transform: rotate(40deg);
            }
        }
        /*右圈动画*/
        @keyframes animation-circle-right{
            0%{
                transform: rotate(-310deg);
            }
            50%{
                transform: rotate(-170deg);
            }
            100%{
                transform: rotate(-310deg);
            }
        }
        /*外层动画*/
        @keyframes animation-circle{
            0%{
                transform: rotate(0deg);
            }
            25%{
                transform: rotate(180deg);
            }
            50%{
                transform: rotate(360deg);
            }
            75%{
                transform: rotate(540deg);
            }
            100%{
                transform: rotate(720deg);
            }
        }
        
    </style>
</head>
<body>
    <div class="circle-layout">
        <div class="layout-left">
            <div class="circle-left"></div>
        </div>
        <div class="layout-right">
            <div class="circle-right"></div>
        </div>
    <div>
</body>
</html>

第三部分动画（在加一个最外层布局）

先来看看Materialize的效果：

在加最外层布局旋转的效果.gif

我的实现效果：

动画三.gif

我的实现思路：
“动画三”只是在“动画二”的基础上加上了一层旋转，以达到圆圈缺口方向的变化仅此而已。至于圆圈缺口的变化，读者可自行修改animation-wrap动画以及animation-circle动画的时间以调整效果，但是必须保证animation-circle的动画时间一定是animation-circle-left/right的两倍。
实现代码：

<!DOCTYPE html>
<html>
<head>
    <mate charset="utf-8"></mate>
    <title>Material Design Loading Animation</title>
    <style>
    body{
        margin: 100px 200px;
    }
        /*最外层布局*/
        .wrap{
            width: 110px;
            height: 110px;
            animation: animation-wrap 2.5s linear infinite;
        }
        /*外层布局*/
        .circle-layout{
            width: 110px;
            height: 110px;
            animation: animation-circle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*左div*/
        .layout-left{
            float: left;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*右div*/
        .layout-right{
            float: right;
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        /*左圈*/
        .circle-left{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            border: 5px solid #F88E8B;
            border-radius: 50%;
            border-left: 5px solid transparent;
            border-bottom: 5px solid transparent;
            transform: rotate(40deg);
            animation: animation-circle-left 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*右圈*/
        .circle-right{
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            border: 5px solid #F88E8B;
            border-radius: 50%;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
            transform: rotate(-310deg);
            animation: animation-circle-right 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        /*左圈动画*/
        @keyframes animation-circle-left{
            0%{
                transform: rotate(40deg);
            }
            50%{
                transform: rotate(-100deg);
            }
            100%{
                transform: rotate(40deg);
            }
        }
        /*右圈动画*/
        @keyframes animation-circle-right{
            0%{
                transform: rotate(-310deg);
            }
            50%{
                transform: rotate(-170deg);
            }
            100%{
                transform: rotate(-310deg);
            }
        }
        /*外层动画*/
        @keyframes animation-circle{
            0%{
                transform: rotate(0deg);
            }
            25%{
                transform: rotate(180deg);
            }
            50%{
                transform: rotate(360deg);
            }
            75%{
                transform: rotate(540deg);
            }
            100%{
                transform: rotate(720deg);
            }
        }
        /*最外层动画*/
        @keyframes animation-wrap{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        
    </style>
</head>
<body>
    <div class="wrap">
        <div class="circle-layout">
            <div class="layout-left">
                <div class="circle-left"></div>
            </div>
            <div class="layout-right">
                <div class="circle-right"></div>
            </div>
        <div>
    </div>
</body>
</html>

后续内容

将该效果封装成可复用且方便使用的控件，打算使用js动态生成众多的布局减少html中的代码量。

更新，2016.10.6
完成后续内容，同时增加可设置大小颜色功能

最终效果如下：

是不是和Materialize网站的很接近了。^_

最终效果.gif

代码如下：

<!DOCTYPE html>
<html>
<head>
    <mate charset="utf-8"></mate>
    <title>Material Design Loading Animation</title>
    <link rel="stylesheet" type="text/css" href="loading.css"></link>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            function LoadingClass(){
                this.wrap = jQuery(".mmd-loading-wrap");
                this.run = function(){
                    this.wrap.each(function(i){
                    
                        //计算圆圈的宽度
                        var bw = Math.round($(this).width()/15);
                        var w = $(this).width() - 2 * bw;
                        //通过自定义属性得到圆圈的颜色
                        var circleColor = $(this).attr("circleColor");
                        
                        //动态生成圆圈。即将上一个版本中html的代码搬移到js中，减低html代码使用量
                        var div = "<div class='mmd-loading-circle-layout'>"
                              +"<div class='mmd-loading-layout-left'>"
                                +"<div class='mmd-loading-circle-left'"
                                    +"style='width:"+w+"px;height:"+w+"px;border-width:"+bw+"px;border-color:"+circleColor+";"
                                        +"border-left:"+bw+"px solid transparent;"+"border-bottom:"+bw+"px solid transparent;'"+"></div>"
                              +"</div>"
                              +"<div class='mmd-loading-layout-right'>"
                                +"<div class='mmd-loading-circle-right'"
                                    +"style='width:"+w+"px;height:"+w+"px;border-width:"+bw+"px;border-color:"+circleColor+";"
                                        +"border-right:"+bw+"px solid transparent;"+"border-top:"+bw+"px solid transparent;'"+"></div>"
                              +"</div>"
                          +"</div>";
                        $(this).append(div);
                    });
                }
            }
            //自动运行
            (function(){
                var loading = new LoadingClass();
                loading.run();
            })();
        });
    </script>
</head>
<body>
    <!-- 需要设置circleColor -->
    <div class="mmd-loading-wrap" style="width:60px;height:60px;position:absolute;left:300px;top:100px;" circleColor="#F88E8B"></div>
    <div class="mmd-loading-wrap" style="width:40px;height:40px;position:absolute;left:500px;top:100px;" circleColor="#DC4C40"></div>
    <div class="mmd-loading-wrap" style="width:30px;height:30px;position:absolute;left:700px;top:100px;" circleColor="#26A668"></div>
</body>
</html>

附上源码：

Loading示例代码

Material Design的Loading动画
写在前面：这是一篇菜鸟的学习笔记，记录效果实现过程，而没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。...
材料的动画
材料的动画 Google - Material motion Material design世界的动画用来描述空间...
使用Circular Reveal为你的应用添加揭露动画效果
随着material design设计规范的普及，material design中的动画将为用户提供操作反馈并在用...
Material Design动画
Material Design中特有的动画效果，如水波纹，Activity转场动画等 1.Touch FeedBa...
动画·Material Design
【真实的动作】动作不可以是线性的，要有平滑的加速度动作不可以是非对称的进入场景的动画，以最高速出现，然后减速退...
Material Design控件使用
Material Design控件使用什么是Material Design Material Design，中文...
Material Design重新学系列 - 1.简介以及主题样
Material Design Material Design简介 Material Design是谷歌新的设计语...
还在用AE做动效?Keynote才是真的动效神器
最近学习 Material Design 文档的时候，发现里面有很多酷炫的交互动画。比如： Material ca...
Android Material Design 常用控件介绍和使
1.Material Design MD 材质的设计理念，超炫的过渡动画，布局阴影等。 2.Material De...
设计Android App
Material Design官网 Material Design配色模板 Material icons