SVG动画

Posted 2020-10-04 学如逆水行舟，不进则退。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SVG动画相关的知识，希望对你有一定的参考价值。

说起动画我是十分感兴趣的，你们呢？哈
下面说说SVG动画是如何实现的。

svg路径描边动画

实现原理：
该动画的实现原理是根据stroke-dasharray和stroke-dashoffset来实现的，那这两个属性是干什么的呢？再次简单的说一下，想具体了解的自行百度0.0
stroke-dasharray属性是用来设置虚线的，有两个值，分别是每段虚线的长度和虚线点的间隔长度。
stroke-dashoffset设置的是虚线的起始位置偏移。

将stroke-dasharray和stroke-dashoffset都设置为线条的总长度，目的是将该虚线各线段间的空白间隔放到可视区域，而将线条放到可视区域之外。
然后我们通过动画一点点减小stroke-dashoffset来使线条平移显现出来，最终呈现出路径描边的效果。

实现方法：
一般我们是将stroke-dasharray设置为线条的总长度，然后将stroke-daashoffset也设置为线条的总长度。
然后利用animation和@keyframes添加动画，动画中将stroke-dashoffset其值最终变为0即可。

其他：
一般我们将stroke-dashoarray和stroke-dashoffset设置为线条总长度，有时我们不能精准知道线条总长度，所以该值设置稍大一些也没问题，仅仅是动画时间变短一些即可。
如果我们非要获取线条的精准总长度，我们通过path.getTotalLength()获取即可，其中path是绘制该线条path的dom。

小demo:

html代码：

<svg width="500" height="500">
        <path d="M 50 200 Q 100 100 200 200 T 400 200" class="ani"></path>
    </svg>

css代码：

svg {
        border: 1px solid #ddd;
    }
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }
    .ani {
        stroke: red;
        fill: transparent;
        stroke-width: 2px;
        stroke-dasharray: 500;
        stroke-dashoffset: 500;
        animation: dash 3s linear forwards;
        -webkit-animation: dash 3s linear  forwards;  
    }

SVG SMIL animation动画

SMIL是什么？
SMIL是Synchronized Multimedia Integration Language（同步多媒体集成语言）的缩写，而SVG可以基于这种语言实现动画。

SVG使用SMIL可以做什么？
主要是以下两点：

实现平移旋转等
沿着运动路径运动

如何使用？
SMIL上有很多标签，我们选择合适的标签，在其上添加需要的属性，即可实现svg动画效果，而不需要css和js代码，由此可见此方法的简单。以下介绍一些SMIL动画标签（那些属性通过看demo例子应该很容易理解）：

set
实现特定时间后改变某个属性，但无法实现连续的动画

<svg width="500" height="500"> 
            <text x="100" y="200" style="font-size: 2em">
                SIML
                <set attributeName="x"  to="300" begin="3s"></set>
            </text>
    </svg>

animate
实现单属性的动画过渡效果

<svg width="500" height="500"> 
        <g>
            <text x="100" y="200" style="font-size: 2em;font-weight: bold;">
                SIML
                <animate attributeName="x" from="100" to="400" dur="3s" repeatCount="indefinite"></animate>
            </text>
        </g>
    </svg>

animateColor
实现颜色的动画，但使用animate即可实现该功能，所以已被废弃。
animateTransform
实现单属性的transform的变换动画效果（如果设置多个animateTransform则只有最后一个生效，其他被覆盖）

<svg width="500" height="500"> 
        <g>
            <text x="200" y="200" style="font-size: 2em;font-weight: bold;">
                SIML
                <animateTransform attributeName="transform" begin="0s" dur="3s" type="rotate" from="0" to="45" repeatCount="indefinite"></animateTransform>
            </text>
        </g>
     </svg>

animateMotion
实现svg图形沿着特定路径运动

<svg width="500" height="500"> 
        <g>
            <text x="0" y="0" style="font-size: 2em;font-weight: bold; stroke: red;">
                人
               <animateMotion  path="M 50 200 Q 100 100 200 200 T 400 200" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"></animateMotion>
            </text>
            <path d="M 50 200 Q 100 100 200 200 T 400 200" style="stroke-width: 2px; fill: none"></path>
        </g>
     </svg>

animate的组合动画 animateTransform是不能自由组合的，会产生覆盖（后面的覆盖前面的），而animate的动画效果是可以组合叠加的。

<svg width="500" height="500"> 
        <g>
            <text x="100" y="200" style="font-size: 3em;font-weight: bold;fill:none;">
                SIML
                <animate attributeName="x" from="100" to="400" begin="0s" dur="3s" repeatCount="indefinite"></animate>
                <animate attributeName="opacity" from="0" to="1" begin="0s" dur="3s" repeatCount="indefinite"></animate>
                <animate attributeName="stroke" from="#000" to="red" begin="0s" dur="3s" repeatCount="indefinite"></animate>                
            </text>
        </g>
    </svg>