svg 简单动画

最新推荐文章于 2024-04-12 11:00:00 发布

IT00123

最新推荐文章于 2024-04-12 11:00:00 发布

阅读量161

点赞数 2

文章标签： html 前端 css 动画

本文链接：https://blog.csdn.net/IT00123/article/details/125822627

版权

本文详细介绍了SVG中的动画效果，包括如何使用animate元素实现圆形的缩放、颜色变化以及位置移动。同时，展示了如何通过animateTransform实现矩形的旋转动画，并解释了各属性的作用和参数设置，帮助理解SVG动画的基本原理和应用。

摘要由CSDN通过智能技术生成

svg圆形的缩放

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

2创建元素。在元素中说明需要执行什么动画

<svg width="500" height="500">
         <circle cx="100" cy="100" r="0">
            <animate attributeName="r" attributeType="XML"  from="50" to="100"   dur="3" fill="freeze"></animate>
           
         </circle>

r是圆的半径 animate是开始动画 attributeName="r" 是开始移动的是半径

from="50" to="100" 是在半径为50 放大到100 dur是放大的秒数

 <circle cx="100" cy="100" r="0">
            <animate attributeName="r" attributeType="XML"  from="50" to="100"   dur="3" fill="freeze"></animate>
           <animate attributeName="fill" attributeType="XML" from="red" to="green" dur="3" fill="freeze"></animate>

         </circle>

fill是circle 里的填充属性以上没有填充所以是黑色

attributeName="fill" 是改变填充色 from="red" to="green" dur="3" 同理这个是在红色到绿色

过程的时间是3S

  <svg width="500" height="500">
         <circle cx="100" cy="100" r="0">
            <animate attributeName="r" attributeType="XML"  from="50" to="100"   dur="3" fill="freeze"></animate>
            <animate attributeName="fill" attributeType="XML" from="red" to="green" dur="3" fill="freeze"></animate>

            <animate attributeName="cx" attributeType="XML" from="100" to="400" dur="3" fill="freeze"></animate>

         </circle>

所以attributeName="cx" 是移动圆的 x 方向（cy 就可以移动y的反向） from="100" to="400" dur="3" 是x 100 移动到 x 400的位置时间3s 加入 repeatCount="indefinite"属性可以重复无限次动作加入数字就是多少次

旋转

 <svg width="500" height="500">
         
            <rect x="150" y="150" width="20" height="200" fill="" stroke="green"  stroke-width="5" >
              <animateTransform attributeName="transform" type="rotate" from="0 160 250"
              to="360 160 250" dur="1" repeatCount="indefinite">
              </animateTransform>
            </rect> 
    </svg>

是一个矩形研中心点旋转旋转首先找到矩形的中心点这是最难的，

from="0 160 250" 第一个值是角度0开始 160 250是中心点
to="360 160 250" 旋转到360° 160 250是中心点

dur="1" 是在1S时间

repeatCount="indefinite" 无线次