记录一个有意思的svg动画加载效果

CMS博客 2022-05-15 23:04 前端笔记 2216

广告位联系客服QQ：9029855

前言

这是我研究stroke-dasharray参数百度搜到的一篇文章，当时只复制了代码，时间长了一下子找不到原文了，在这里先给作者道个歉。

哪天再拜读到大作的时候一定补上来源。

正文

svg我是小白，只是最近苦于甲方大大非得要一些动画效果，就只能硬着头皮来研究一下。

这片文章注释写的较为详细，自己动手修改数值能更直观的了解到每个参数对应的效果。

话不多说，贴上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="preloader">
        <svg>
            <!-- <circle> SVG 元素是一个SVG的基本形状，x，y轴坐标，半径，。-->
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2"></circle>
            <!--注：与SVG2开始，x，y，width，和height是几何Propertie S，这意味着这些属性也可以用作CSS属性。全局属性
                fill它定义了它应用的图形元素内部的颜色。
                stroke-width 定义要应用于形状的笔触的宽度。值：<length> | <百分比> ; 动画：是的
            -->
        </svg>
    </div>
    <style>
        .preloader {
            z-index: 1;
            position: absolute;
            border: 1px red solid;
            width: 100%;
        }
        /*infinite无限*/
        .preloader .path {
            -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
            animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        }
        /*关键的关键是,设置关键帧,针对什么类*/
        @-webkit-keyframes dash {
            /*stroke-dasharray:给的一个数,那么就是实线为1,虚线也是1,两个数就是实线1 虚线200相当于没有
            * 而单独89 ，除开虚线89，不足以再产生一条虚线
            官方没有给逗号，给不给都可以
            默认起点，即偏移为0情况，封闭图形，即是顺时针方向，负数为逆时针
            */
            0% {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 89;
                /*stroke-dashoffset: -35px;*/
                /*起点拽回顺时针30开始*/
            }
            100% {
                stroke-dasharray: 89 200;
                stroke-dashoffset: -126;
                /*负值为逆时针方向,顺着轨迹移动126,即是产生消失效果*/
            }
        }
        /*stroke-dasharray="167" stroke="red"
            * <!--stroke-dasharray="167" stroke="red" 这意味着疏密程度变化 ，要么百分数，要么数字，实际上相对周长而言，比如
            * r=20 周长为120左右，89差不多占据四分之三-->
            */
        /*
             * 作为呈现属性，它可以被应用到任何元素，但它只有在下列十元素效果：
             * <altGlyph>，<circle>，<ellipse>，<path>，<polygon>，<polyline>，<rect>，<text>，<textPath>，<tref>，和<tspan>
             * stroke-dasharray
                定义用于绘制形状轮廓的破折号和间隙的图案。
                价值：none| <dasharray>; 动画：是的
                个人理解是间隙和非间隙的比例，单独一个数，那么间隙和非间隙都是它，
                两个数， 正好一个是非间隙，一个是间隙,重点是
                stroke-dashoffset
                定义关联的虚线阵列的渲染时的偏移量。
                值：<百分比> | <length> ; 动画：是的*/
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -35px;
            }
            100% {
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -126px;
            }
        }

        @-webkit-keyframes color {
            100%,
            0% {
                stroke: #d62d20;
            }
            /*40% {
                stroke: #0057e7;
            }
            66% {
                stroke: #008744;
            }
            80%,
            90% {
                stroke: #ffa700;
            }*/
        }
        @keyframes color {
            100%,
            0% {
                stroke: #d62d20;
            }
            40% {
                stroke: #0057e7;
            }
            66% {
                stroke: #008744;
            }
            80%,
            90% {
                stroke: #ffa700;
            }
        }
    </style>
</body>

</html>

效果是一个转圈的动画，很细节，有兴趣的朋友可以复制到本地学习一下。