svg如何做到一组动画循环

发布于 2022-09-04 08:50:11 字数 677 浏览 24 评论 0

如果只有一个动画的话 **repeatCount="indefinite" 就可以了

<svg>
    <rect x='20' y='20' width='250' height='250' fill='blue'>
        <animate attributeType="CSS" attributeName="width" from="250" to="0" dur="1s" repeatCount="indefinite" />
    </rect>
</svg>

如果2个以上动画的话，怎么让两个动画作为一组循环

<svg>
    <rect x='20' y='20' width='250' height='250' fill='blue'>
        <animate attributeType="CSS" attributeName="width" from="250" to="0" dur="1s" />
        <animate attributeType="CSS" attributeName="width" from="0" to="250" begin='1s' dur="1s"/>
    </rect>
</svg>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

︶￣淡然 2022-09-11 08:50:11

如果只是单纯的改变宽度，少年可以这样实现

<svg>
    <rect x='20' y='20' width='250' height='250' fill='blue'>
        <animate animateType="css" attributeName="width" values="250;0;250" dur="3s" repeatCount="indefinite"/>
    </rect>
</svg>

回复收藏 0

执手闯天涯 2022-09-11 08:50:11

给animate添加id后，使用begin来指定动画开始的时间为另一个的结束。

不清楚有没有更好的办法。

<svg>
    <rect x="20" y="20" width="241.667" height="250" fill="blue">
        <animate attributeType="CSS" attributeName="width" begin="0s; second.end" id="first" from="250" to="0" dur="1s"></animate>
        <animate attributeType="CSS" attributeName="width" begin="first.end" id="second" from="0" to="250" dur="1s"></animate>
    </rect>
</svg>

回复收藏 0

清风夜微凉 2022-09-11 08:50:11

如果单纯只是实现动画效果，可以不使用animate，转而使用js控制
具体实现思路是使用js中的setInterval函数，每次更新相应的值（如题即width），设置边界条件
如下是我实现一个圆球循环滚动的代码及效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    circle {
      stroke-width: 5;
      stroke: #f00;
      fill: #ff0;
    }
  </style>
</head>

<body>
  <svg width="400px" height="100px" viewBox="0 0 400 100" style="background-color: thistle;">
    <circle cx="50" cy="50" r="50" fill="blue" id="circle" />
  </svg>

</body>
<script>
  const circle = document.getElementById('circle');
  let x = 50
  let distance = 3
  setInterval(() => {
    if (x > 350 || x < 50) distance = -distance
    x += distance
    circle.setAttribute('cx', x)
  }, 20);
</script>

</html>

球体循环滚动动画