SVG动画

Posted 学如逆水行舟,不进则退。

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可以做什么?
主要是以下两点:

  1. 实现平移旋转等

  2. 沿着运动路径运动

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

  1. 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>
  1. 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>
  1. animateColor
    实现颜色的动画,但使用animate即可实现该功能,所以已被废弃。

  2. 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>
  1. 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>
  1. 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>

 

 

这些标签上的基本属性

attributeName
动画设置改变的属性

begin
动画开始前的延迟时间

dur
动画持续时间

from
过渡动画改变属性的初始值

to
过渡动画改变属性的最终值

repeatCount
动画播放次数,默认是播放一次,而‘indefined‘表示无限循环播放

path
是animateMotion上的一个属性,设置运动路径,和path标签上的d属性设置完全一样

参考来源

http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

以上是关于SVG动画的主要内容,如果未能解决你的问题,请参考以下文章

使用填充为 svg 设置动画

前端开发常用代码片段(中篇)

在 svg 路径更改后再次执行动画

SVG 元素上的角度动画

VSCode自定义代码片段——CSS动画

将 SVG 动画转换为图像序列