应用css完成android系统软件的loading载入动漫

日期：2021-02-28 类型：科技新闻 

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

web常见的loading标志有2种, 1种是ios的"菊花", 1种是android的"环". 今日大家用svg完成android的"环"动漫, 下节课完成ios的"菊花".

留意 : gif帧数少的缘故, 具体动漫实际效果是很 光滑

的.

xml(svg) 

<svg width="36" height="36" viewBox="0 0 50 50" class="a-loading-android">
    <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor"  stroke-width="5"></circle>
</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: ⑷5;
            }

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

stroke-dasharray

先解释 stroke-dasharray , 他是用来界定虚线的, 例如 stroke-dasharray="50, 20" 表明实线一部分为50, 空隙20的虚线:

试想1下, 假如环也用虚线表明, 而且让 企业实线 一部分的长度在环的周长范畴内转变,这不就完成了(半环/满环等形状), 下面各自是 stroke-dasharray 的值为 25, 200 / 50, 200 / 100, 200

:

留意 : 这里的 200

是随便界定的, 表明虚线的空隙, 要是值超过环的周长便可.

stroke-dashoffset

偏位, 值为正数的情况下, 虚线逆时针返回, 负数顺时针前行(左图的stroke-dashoffset:0, 环的起始点在3点方位, 右图设定为⑴0之后, 环的起始点被顺时针偏位了1段间距):

由于动漫中, 环在提升长度的另外 尾部在收拢长度 , 因此必须相互配合 stroke-dashoffset

完成.

动漫的3个重要時刻

**0%**的時刻

让圆环只展现1个点, 以便让循环系统1周后动漫不突兀(你能够改为0比照下实际效果).

**50%**的時刻

以便让圆环展现80%的环, 因此设定实线一部分长度为100(125*0.8, 125是周长): stroke-dasharray: 100, 200; , 另外尾部在收拢, 因此设定 stroke-dashoffset: ⑷5; .

**100%**的時刻

返回1个点的情况, 和0%情况1致, 这样动漫循环系统起来不突兀, 可是从50%到100%的动漫只是"尾部收拢", 因此大家用 stroke-dashoffset:⑴24 完成, 125⑴24=1 恰好是1个像素, 好了动漫到此就完成结束了.

总体转动

以便和安卓系统系统软件的动漫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: ⑷5;
            }
            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: ⑴24;
            }
        }
        @keyframes color {
            0%,
            100% {
                stroke: #6b5c5b;
            }
            40% {
                stroke: #0057e7;
            }
            66% {
                stroke: #008744;
            }
            80%,
            90% {
                stroke: #ffa700;
            }
        }
    }

本文编码参照 iview , 1个vue架构.

总结

以上所述是网编给大伙儿详细介绍的应用css完成android系统软件的loading载入动漫,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：css3给情况照片加色调遮罩的方式 返回下一篇：没有了