SVG—初识4之描边动画和路径动画

VillanelleS

已于 2022-12-23 16:00:10 修改

阅读量1.4k

点赞数 2

分类专栏： SVG 文章标签： svg

于 2022-09-21 11:37:35 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/126948526

版权

SVG 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

SVG—初识4

SVG描边动画
- stroke-dashoffset
- DrawSVGPlugin插件
路径动画

SVG描边动画

SVG 中实现描边动画的三个相关属性：分别是 stroke、stroke-dasharray、stroke-dashoffset

stroke-dashoffset

stroke-dashoffset 属性用来指定路径从开始位置的偏移量。通过指定偏移量会让绘制好的线偏移

原来的位置一段空白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .line{
            stroke-dasharray: 600;
            stroke-dashoffset: 600;
            animation: offset 2s linear infinite;
        }
        @keyframes offset {
            to{
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
    <svg width="960px" height="500px" viewBox="0 0 960 500">
        <g>
            <line x1="0" x2="600" y1="0" y2="0" style="stroke: #4af;stroke-width: 20;" class="line"></line>
        </g>
    </svg>
</body>
</html>

请添加图片描述
升级版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .leftLine{
            stroke-dasharray: 480;
            stroke-dashoffset: 480;
            animation: leftOffset 2s linear infinite;
        }
        .rightLine{
            stroke-dashoffset: -480;
            stroke-dasharray: 480;
            animation: offset 2s linear infinite;
        }
        @keyframes offset{
            to{
                stroke-dashoffset: 0;
            }
        }
        @keyframes leftOffset {
            to{
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500" >
    <g>
        <line x1="0" x2="480" y1="50" y2="50" style="stroke: #4af;stroke-width: 20" class="leftLine"></line>
        <line x1="480" x2="960" y1="50" y2="50" style="stroke: #4af;stroke-width: 20" class="rightLine"></line>
    </g>
</svg>
</body>
</html>

请添加图片描述

DrawSVGPlugin插件

借助 DrawSVGPlugin 实现了将 SVG path 从 0% 绘制到 100% 的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500">
    <!-- 李 -->
    <path id="mu" d="m100,100 60,0 0,-20 40,0 0,20 60,0 0,30 -40,0  50,20 -10,25 -30,-10 0,-15 -30,0 0,-10 0,16
          -40,0 0,-16 0,10 -32,0 0,25 0,-10 -18,6 -10,-27 50,-15 -50,0  z" style="stroke: black;stroke-width: 3;fill:none;"></path>
    <path id="zi" style="fill:none;stroke:black;stroke-width:3;"
          d="m130,150 30,0 0,7 41,0 0,-6 30,0 0,16 -25,30 -30,-6 10,-20 -2,4 -85,0 0,30 80,0 -30,0 0,28 60,0 0,-28 60,0 0,-30 -44,0"
    ></path>

</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script>
    var tl=gsap.timeline({repeat: -1})
    tl
        .fromTo(
            '#mu',
            { drawSVG: "0%" },
            { duration: 2, drawSVG: "100%", stagger: 0.1 },
        ).fromTo(
        '#zi',
        { drawSVG: "0%" },
        { duration: 2, drawSVG: "100%", stagger: 0.1 },
    )
</script>
</body>
</html>

请添加图片描述

路径动画

一个元素（物体）沿着特定的路径（轨迹）进行运动。

offset-path
offset-distance

offset-path 这个属性接受一个 path 用于指定元素的运动轨迹。
offset-distance 这个属性声明了元素沿着路径运动的距离。常用 100% 表示路径总长度。

CSS写路径动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #circle{
            motion-path: path('M350,256c-0.515-9.764-19.942-15.421-22-16 c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130 c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111 c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60 c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14 c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22 c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99 c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107 c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57 c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10 C227.557,307.081,351.318,280.973,350,256z');
            offset-path: path('M350,256c-0.515-9.764-19.942-15.421-22-16 c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130 c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111 c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60 c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14 c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22 c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99 c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107 c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57 c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10 C227.557,307.081,351.318,280.973,350,256z');
            animation: rao 20s linear infinite;
        }
        @keyframes rao{
            100% {
                motion-offset: 100%;
                offset-distance: 100%;
            }
        }
    </style>
</head>
<body>
<svg version="1.1" id="&#x56FE;&#x5C42;_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 595.276 841.89" style="enable-background:new 0 0 595.276 841.89;" xml:space="preserve" background-color="#00447F">

    <path id="road" style="fill:none;stroke:#4af;stroke-miterlimit:10;" d="M350,256c-0.515-9.764-19.942-15.421-22-16
	c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130
	c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111
	c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60
	c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14
	c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22
	c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99
	c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107
	c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57
	c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10
	C227.557,307.081,351.318,280.973,350,256z"/>

    <circle  r="3" fill="pink" id="circle"></circle>
</svg>
</body>
</html>

请添加图片描述

SVG写路径动画

svg使用的是animateMotion元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg version="1.1" id="&#x56FE;&#x5C42;_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 595.276 841.89" style="enable-background:new 0 0 595.276 841.89;" xml:space="preserve" background-color="#00447F">

    <path id="road" style="fill:none;stroke:#4af;stroke-miterlimit:10;" d="M350,256c-0.515-9.764-19.942-15.421-22-16
	c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130
	c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111
	c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60
	c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14
	c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22
	c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99
	c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107
	c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57
	c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10
	C227.557,307.081,351.318,280.973,350,256z"/>

    <circle  r="3" fill="pink" id="circle"
    >
        <animateMotion dur="20s" repeateCount="infinite" path="M350,256c-0.515-9.764-19.942-15.421-22-16
	c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130
	c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111
	c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60
	c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14
	c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22
	c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99
	c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107
	c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57
	c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10
	C227.557,307.081,351.318,280.973,350,256z" />
    </circle>
</svg>
</body>
</html>

使用 GreenSock 来实现自行车沿着路径运动的路径动画

GreenSock 中使用 MotionPathPlugin 实现路径动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500" style="background-color: #ffff;">
    <g id="road" >
        <path id="biking-road" style="fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dashoffset: 10;stroke-dasharray: 10;stroke:#4af;" d="M71.5,154.5c19.944,33.545,51.705,52.349,79,47
	c16.142-3.163,27-14,27-14c22.186-22.141,13.674-57.487,21-59c10.209-2.108,22.412,67.432,43,69c30.372,2.313,53.208-145.267,82-144
	c30.598,1.347,29.726,169.119,70,176c21.385,3.654,55.033-37.943,110-183"/>
    </g>
</svg>
<svg id="person-biking" x="0" y="0" viewBox="0 0 72 72" version="1.1" width="72" height="72" xmlns="http://www.w3.org/2000/svg">
    <g>
        <g id="color"/>
        <g id="hair"/>
        <g id="skin">
            <circle cx="34.3857" cy="11.0625" r="2.9687" fill="#FCEA2B" stroke="none"/>
            <polyline fill="#FCEA2B" stroke="none" points="34.3857,20.9248 36.417,18 40.25,18.084 46.457,32.2344 44.417,36 41.8896,38.5137 38.7705,49.668 35.3643,56.418 32.96,54.3809 33.8789,47.3027 30.1084,40.3262 30.2051,37 38.25,32 35.3643,24.5"/>
        </g>
        <g id="skin-shadow"/>
        <g id="line">
            <circle cx="34.3857" cy="11.0625" r="2.9687" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
            <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M26.333,28.083l4.2705-2.9473c0.9053-0.6245,2.1602-1.875,2.7871-2.7783l1.8858-2.7148c0.6269-0.9033,2.0029-1.6236,3.0576-1.6006 c1.0537,0.0229,2.2773,0.8662,2.7197,1.8735l4.5996,10.4868c0.4424,1.0079,0.375,2.6231-0.1494,3.5909l-0.1338,0.248 c-0.5244,0.9678-1.7803,2.1143-2.79,2.5498l-5.4922,2.3633c-1.0098,0.4355-1.4922,1.6221-1.0713,2.6387l2.6348,6.3593 c0.4209,1.0166,0.0908,2.2979-0.7344,2.8477c-0.8252,0.5498-1.9277,0.208-2.4512-0.7598l-4.4062-8.1543 c-0.5235-0.9677-0.9297-2.5078-0.9033-3.4228c0.0273-0.9151,0.8134-2.1377,1.747-2.7188l4.6485-2.8886 c0.9336-0.5811,1.4795-1.9287,1.2128-2.9961L36.25,24"/>
            <circle cx="20.084" cy="52" r="10.166" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
            <circle cx="52.084" cy="52" r="10.166" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
            <polyline fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="20.25,52 22.25,28 26,28"/>
            <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M37.9785,50.959l-0.9844,3.1328 C36.6641,55.1416,35.5742,56,34.5723,56c-1.002,0-1.7071-0.8926-1.5655-1.9834l0.8692-6.7178"/>
            <line x1="42.4072" x2="38.7705" y1="36.8652" y2="48.4395" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
        </g>
    </g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script>
    gsap.registerPlugin(MotionPathPlugin);
    gsap.to("#person-biking",{
        duration: 3.3,
        repeat: -1,
        ease: Linear.easeNone,
        motionPath:{
            path: "#biking-road",
            align: "#biking-road",
            autoRotate: true,
            alignOrigin: [0.5, 0.5]
        }
    })
</script>

</body>
</html>

请添加图片描述

VillanelleS

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
SVG—初识4之描边动画和路径动画

SVG 中实现描边动画的三个相关属性：分别是、、属性用来指定路径从开始位置的偏移量。通过指定偏移量会让绘制好的线偏移原来的位置一段空白升级版借助 DrawSVGPlugin 实现了将 SVG path 从 0% 绘制到 100% 的动画效果。一个元素（物体）沿着特定的路径（轨迹）进行运动。这个属性接受一个 path 用于指定元素的运动轨迹。这个属性声明了元素沿着路径运动的距离。常用 100% 表示路径总长度。svg使用的是元素使用 GreenSock 来实现自行车沿着路径运动的路径动画
复制链接

扫一扫

专栏目录