SVG_8_CSS-animation_SVG-animateTransform标签_动画解析

知识点：

•  CSS中使用animation控制动画效果；

• SVG中使用animateTransform标签控制动画效果；

 

PS：虽然两者写法上稍微有点区别，但原理上是一致的；

 

一，先来说说CSS中的控制方法。

<style>  #svg {    width: 1500px;    height: 400px;    background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3675415932,4054970339&fm=26&gp=0.jpg")  }  /*  body{background: black}*/  /* animation:name duration timing-function         delay     iteration-count             direction    动画属性  名称， 持续时长， 时间分布函数，默认为ease，延时多长时间，持续次数，默认为1次  infinite表示无限次，指定运行方向*/  /* （ease:比如从左到右，开始较慢，中间较快，末尾较慢的运动） */  /* 后面几个参数可以不指定，只需指定前两个的name和duration即可。*/  /* infinite表示执行无限次  alternate表示镜像执行，这个执行起来有循环效果，有意思 */  #cir {    animation: wjw 2s infinite alternate  }  @keyframes wjw {    0% {      transform: scale(0.5)    }    /* 50% {      transform: scale(5);      fill: aqua;    } */    100% {      transform: scale(10);      /* x:150; */      fill: rgb(73, 255, 88);    }  }</style><div id="svg">    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewbox="0 0 500 500">      <g stroke="yellow" stroke-width="1" id="g">        <polygon points="50 0 100 0 100 100 150 100 75 150 0 100 50 100" stroke-dasharray="2 3 2"></polygon>        <text x="70" y="40" stroke-width=“10” text-anchor="center">点</text>        <text x="70" y="80" stroke-width=“10” text-anchor="center">在</text>        <text x="70" y="120" stroke-width=“10” text-anchor="center">看</text>      </g>
    </svg> </div>

animation:name duration timing-function delay iteration-count direction

各个字段含义分别是：

name--动画属性名称； 

duration--持续时长；

timing-function--时间分布函数，默认为ease；

     （ease:比如从左到右，开始较慢，中间较快，末尾较慢的运动）

delay--延时多长时间；

iteration-count--持续次数，默认为1次 infinite表示无限次

direction指定运行方向，alternate表示镜像执行，这个执行起来有循环效果，有意思。

animation动画

PS：后面几个参数可以不指定，只需指定前两个的name和duration即可。 

 

二，再来看看，直接在SVG中的animateTransform标签的用法。

代码就拿我做的“点在看”来说吧。为了使文字竖排，用了比较笨的方法，就是上下排列三个text

 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewbox="-200 0 300 300">  <g stroke="yellow" stroke-width="1" >    <polygon points="50 0 100 0 100 100 150 100 75 150 0 100 50 100" stroke-dasharray="2 3 2"></polygon>    <text x="75" y="25"  text-anchor="middle">点</text>    <text x="75" y="55"  text-anchor="middle">在</text>    <text x="75" y="85"  text-anchor="middle">看</text>    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="scale" from="0" to="2" repeatCount="indefinite" />  </g>
</svg>

其中，最关键的是<animateTransform>这个标签，这里面定义了与CSS中animation类似的属性，可对比参考下。其中type有五种类型：rotate（旋转）、scale（缩放）、skewX（X轴方向偏移）、skewY（Y轴方向偏移）、tranlate（位移）。

用好这个aniateTransform标签，可以创造出很多意想不到的效果，后面继续。

 

想看展示效果，请移步公众号：Xi说SVG，文章同步更新。