面试官: "用css实现android系统的loading动画"

caige 发布于2019-08-30 15:44 / 1897人阅读

摘要：源码常用的图标有种一种是的菊花一种是的环今天我们用实现的环动画下节课实现的菊花注意帧数少的原因实际动画效果是很平滑的首先我们定义的画布尺寸为在浏览器中缩放为显示这个你可以根据实际需要调整定义环的圆心坐标为半径为算下周长大概为后面会用

源码: https://github.com/any86/any-...

ios/android

web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".

注意: gif帧数少的原因, 实际动画效果是很平滑的.

demo

xml(svg)

首先我们定义svg的画布尺寸为50x50, 在浏览器中缩放为36x36显示(这个36你可以根据实际需要调整), 定义环的圆心坐标为25,25, 半径为20(算下周长大概为125, 后面会用到), 颜色为currentColor获取父元素的color属性的值, 环的宽度为5像素, 看下在没写css前的效果:

scss

.a-loading {
    &-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            animation: dash 1500ms ease-in-out infinite;
            stroke-linecap: round; // 端点是圆形
            color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }
    }
}

stroke-dasharray

先解释stroke-dasharray, 他是用来定义虚线的, 比如stroke-dasharray="50, 20"表示实线部分为50, 间隙20的虚线:

试想一下, 如果环也用虚线表示, 并且让单位实线部分的长度在环的周长范围内变化,这不就实现了(半环/满环等形态), 下面分别是stroke-dasharray的值为25, 200/ 50, 200 / 100, 200:

注意: 这里的200是随意定义的, 表示虚线的间隙, 只要值大于环的周长即可.

stroke-dashoffset

偏移, 值为正数的时候, 虚线逆时针回退, 负数顺时针前进(左图的stroke-dashoffset:0, 环的起点在3点方向, 右图设置为-10以后, 环的起点被顺时针偏移了一段距离):

因为动画中, 环在增加长度的同时尾部在收缩长度, 所以需要配合stroke-dashoffset实现.

动画的3个关键时刻

0%的时刻

让圆环只呈现一个点, 为了让循环一周后动画不突兀(你可以改成0对比下效果).

50%的时刻

为了让圆环呈现80%的环, 所以设置实线部分长度为100(125*0.8, 125是周长): stroke-dasharray: 100, 200;, 同时尾部在收缩, 所以设置 stroke-dashoffset: -45;.

100%的时刻

回到一个点的状态, 和0%状态一致, 这样动画循环起来不突兀, 但是从50%到100%的动画只是"尾部收缩", 所以我们用stroke-dashoffset:-124实现,125-124=1 正好是一个像素, 好了动画到此就实现完毕了.

整体旋转

为了和安卓系统的动画一致, 让整体也进行旋转. 这里代码比较简单不赘述.

animation属性的扩展

如果大家仔细看过css的animation的文档, 会发现animation可以同时支持多个过度动画, 比如animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite;, 用","分割多个动画.

所以我们其实还可以对上面的动画进行扩展, 比如旋转的同时还有颜色变化:

    &-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            // 增加颜色变化的代码
            animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; 
            stroke-linecap: round;
            color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }

        @keyframes color {

            0%,
            100% {
                stroke: #6b5c5b;
            }

            40% {
                stroke: #0057e7;
            }

            66% {
                stroke: #008744;
            }

            80%,
            90% {
                stroke: #ffa700;
            }
        }
    }

本文代码参考iview, 一个vue框架.

专线服务云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116140.html

如何&quot;有计划，高效率，优简历&quot;应对面试

摘要：虽然有了十全的计划，但如何高效率去记住上面那么多东西是一个大问题，看看我是怎么做的。前言前一篇文章讲述了我在三月份毫无准备就去面试的后果，一开始心态真的爆炸，但是又不服气，一想到每次回来后家人朋友问我面试结果的期待脸，越觉得必须付出的行动来证明自己了。面经传送门：一个1年工作经验的PHP程序员是如何被面试官虐的？下面是我花费两个星期做的准备，主要分三部分：有计划——计划好...

gyl_coder 2019-07-01 12:40 评论0 收藏0
&quot;双非&quot;应届生校招如何获得大厂青睐?（内附前端大厂面经+技术岗超全求职攻略）

摘要：拿到秋招的同学，如确定入职需与用人单位签署三方协议，以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同，但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论，学习技术也不例外，掌握适当的学习方法才能事半功倍。写在前面的话笔者从17年的2月份开始准备春招，其中遇到不少坑，也意识到自己走过的弯路。故写了这篇文章总结一番，本文适合主动学习的，对自己要学的课程不明确的，对面试有...

jeffrey_up 2019-08-30 14:23 评论0 收藏0
&quot;双非&quot;应届生校招如何获得大厂青睐?（内附前端大厂面经+技术岗超全求职攻略）

摘要：拿到秋招的同学，如确定入职需与用人单位签署三方协议，以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同，但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论，学习技术也不例外，掌握适当的学习方法才能事半功倍。写在前面的话笔者从17年的2月份开始准备春招，其中遇到不少坑，也意识到自己走过的弯路。故写了这篇文章总结一番，本文适合主动学习的，对自己要学的课程不明确的，对面试有...

lindroid 2019-08-26 17:25 评论0 收藏0
《HelloGitHub》第 68 期

摘要：整个项目简单还具有实用价值，可作为的实战项目学习的调试工具栏。查看文档自动在个人首页展示编程时长的工具。通过学习这些前沿的人工智能论文，提前了解在未来更多可能性可以将图片和视频转换成漫画风格的工具。兴趣是最好的老师，HelloGitHub 让你对编程感兴趣！简介HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。https://github.com/521xueweihan...

番茄西红柿 2021-11-26 11:11 评论0 收藏2637
&quot;instanceof 的原理是什么&quot;？大声告诉面试官，我知道！

摘要：一是如何工作的在上是这样描述的运算符用于测试构造函数的属性是否出现在对象原型链中的任何位置换句话说，如果，那么必须是一个对象，而必须是一个合法的函数。下面我们举一个例子一步步来说明第一步每一个构造函数都有一个属性。在 JavaScript 中，我们通常用 typeof 判断类型，但是在判断引用类型的值时，常常会遇到一个问题：无论引用的是什么类型的对象，都会返回 object(当然还有...

CompileYouth 2019-08-23 16:56 评论0 收藏0