SVG动画

最新推荐文章于 2024-07-11 15:29:37 发布

不期望不希望不奢望

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量161

点赞数

文章标签：前端 html 动画

本文链接：https://blog.csdn.net/weixin_72101182/article/details/125821873

版权

SVG动画使用方式

1.创建动画，告诉动画标记哪个元素需要执行动画

2.创建元素，在元素中说明需要执行什么动画SVG动画属性

SVG动画属性

attributeType: CSS/XML规定的属性值的名称空间

attributeName:规定元素的哪个属性会产生动画效果

from/to:从哪到哪

dur:动画时长

fill:动画结束之后的状态，保持freeze结束状态/remove回复初始状态

案例：把一个圆形从50%大小变成100%且填充颜色从aqua变为pink

 <svg width="800" height="800">
        <circle id="circle1" cx="100" cy="100" r="50" fill="aqua"></circle>
        <animate 
        repeatCount="indefinite"
        attributeName="r" 
        attributeType="XML" 
        from="0" 
        to="100"  
        dur="3s" 
        fill="freeze"
        xlink:href="#circle1"></animate>
        <animate 
        repeatCount="indefinite"
        attributeName="fill" 
        attributeType="XML" 
        from="aqua" 
        to="pink" 
        dur="3s"  
        fill="freeze" 
        xlink:href="#circle1"></animate>

repeatCount =“indefinite"规定动画重复的次数 indefinite为无限次

案例：让一个小球从左到右再从右到左

 <svg width="1000" height="1000">
     <circle cx="100" cy="100" r="10">
         <animate attributeType="XML" attributeName="cx" 
from="100" to="500" dur="5" begin="click" id="circle0"></animate> 
          <animate attributeType="XML" attributeName="cx" 
from="500" to="100" dur="5" begin="circle0.end"></animate>   
     </circle>
 </svg>

begin="circle0.end" 在id值为circle0的动画结束后开始

案例：矩形旋转

<rect x="300" y="300" width="300" height="200" fill="red">
   <animateTransform attributeName="transform" type="rotate" 
    from="0 300 300" to="360 300 300" dur="2" 
    repeatCount="indefinite"></animateTransform>
</rect>

transform动画 type类型旋转