SVG动画

时间  2019-11-22 标签 svg 动画

提及动画我是十分感兴趣的，大家呢？哈
下面说说SVG动画是如何实现的。css

svg路径描边动画

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

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

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

其余：
通常咱们将stroke-dashoarray和stroke-dashoffset设置为线条总长度，有时咱们不能精准知道线条总长度，因此该值设置稍大一些也没问题，仅仅是动画时间变短一些便可。
若是咱们非要获取线条的精准总长度，咱们经过path.getTotalLength()获取便可，其中path是绘制该线条path的dom。svg

小demo:wordpress

html代码：动画

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

css代码：spa

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能够基于这种语言实现动画。code

SVG使用SMIL能够作什么？
主要是如下两点：orm

  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/

联系我们 沪ICP备13005482号-10