从 React 道具启动 SVG 动画答案

【问题标题】：Start SVG animation from React prop从 React 道具启动 SVG 动画
【发布时间】：2021-06-28 04:30:22
【问题描述】：

我想知道是否有办法从 React 中的道具开始动画。

type ComponentProps= {
  startAnimation: boolean;
}
class Component extends React.PureComponent<ComponentProps>
{
  ...
  render()
  {
    return <svg
      ..
        <animate begin={this.props.startAnimation ? What goes here? : "indefinite"} />
    </svg>;
  }
}

我在互联网上进行了广泛的研究，似乎有一些方法可以启动 SVG 动画，但不是从 React 组件 prop，或者更一般地说，是一个变量。

我在 StackOverflow 上找到了这个： SVG animate starts without being started

问题是在 begin 属性中使用事件不是我想要的，使用 beginElement() 会引发错误“Property beginElement() does not exist on type Element”，并且 wallclock() 不受任何支持浏览器。 SVG animation begin at wallclock-sync-value

另一种解决方案是使用繁琐的 CSS 动画或它们各自的库。我不确定从这里去哪里。

【问题讨论】：

标签： reactjs typescript svg

【解决方案1】：

framer-motion 可能就是你要找的，而且转化率也不高。

只需将<svg> 更改为<motion.svg> 等，就可以使用它们的动画、隐藏和变体道具来启动/停止不同的animation.framer

【讨论】：