SVG 动画效果

SVG 支持多种动画方式：SMIL 动画、CSS 动画和 JavaScript 动画。

SMIL 属性动画

                <circle cx="100" cy="100" r="30"> <animate attributeName="r" values="30;50;30" dur="2s"
                  repeatCount="indefinite"/> </circle>
              

SMIL 路径动画

                <circle r="8"> <animateMotion dur="3s" repeatCount="indefinite"> <mpath
                  href="#path"/> </animateMotion> </circle>
              

SMIL 变换动画

                <rect x="75" y="75" width="50" height="50"> <animateTransform attributeName="transform"
                  type="rotate" from="0 100 100" to="360 100 100" dur="3s" repeatCount="indefinite"/>
                  </rect>
              

CSS 动画 - 脉冲

                @keyframes pulse { 0%, 100% { r: 30; opacity: 1; } 50% { r: 40; opacity: 0.6; } } .pulse { animation:
                  pulse 2s infinite; }
              

CSS 动画 - 旋转

                @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate {
                  animation: rotate 3s linear infinite; transform-origin: center; }
              

CSS 动画 - 滑动

                @keyframes slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(100px); } }
                  .slide { animation: slide 2s infinite; }
              

🎮 JavaScript 动画控制

              let position = 0; let animationId; function animate() { position += 2; if (position > 450) position =
                50; circle.setAttribute('cx', position); animationId = requestAnimationFrame(animate); } function
                start() { animate(); } function pause() { cancelAnimationFrame(animationId); }
            

🎮 交互式动画编辑器

属性:

起始值:

中间值:

结束值:

持续时间: 2s

              <animate attributeName="r" values="30;50;30" dur="2s" repeatCount="indefinite"/>
            

💡 关键知识点

SMIL 动画: 使用 <animate>, <animateTransform>, <animateMotion> 等元素
CSS 动画: 使用 @keyframes 和 animation 属性，性能更好
JavaScript 动画: 使用 requestAnimationFrame 实现精确控制
dur: 动画持续时间（如 "2s", "500ms"）
repeatCount: 重复次数（"indefinite" 表示无限循环）
values: 关键帧值列表，用分号分隔
from/to: 简单的起始和结束值