Question

我创建了一个非常简单的SVG动画，其中有两个圆圈，一个是虚线内的实心圆圈。动画外部虚线圆的360度旋转很简单。

我想尝试的是拥有内在的，坚实的圆圈＆＃34;脉冲＆＃34;通过缩小10％然后回到100％。

问题是，到目前为止，我为class Popup extends React.Component { constructor(props){ super(props); this.state = {opened: false}; } componentDidMount(){ var popupOpenBtn = document.querySelectorAll('[data-popup]'); var component = this; popupOpenBtn.forEach(function(item) { item.addEventListener("click", function() { component.setState({ opened: true }); }) }); }找到的所有文档都涉及2＆＃34;关键帧＆＃34;只有，从 - 到。因此，圆圈将从100％变为90％，然后它将重复并跳回到100％。我正在寻找乒乓球＆＃34;，去animateTransform等。

可以使用原生SVG动画（即没有CSS和没有库）吗？

100->90->100->90

Answer 1

如果有人有兴趣，我发现了一个隐藏的答案。对于内圈：

  <circle cx="50.5" cy="50.5" r="36" fill="#084b86">
      <animate attributeName="r"
               values="36;20;36"
               dur="2s"
               repeatCount="indefinite" />
  </circle>

键是values属性，可以采用以分号分隔的列表。

如果有人知道更好或更聪明的方式，请分享！

原生SVG循环动画

1 个答案: