时间戳

首页 > 解决方案 > 从 React 道具启动 SVG 动画

reactjs - 从 React 道具启动 SVG 动画

问题描述

我想知道是否有办法从 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 组件道具，或更一般地说，是一个变量。

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

问题是在 begin 属性中使用事件不是我想要的，使用 beginElement() 会引发错误“属性 beginElement() 在元素类型上不存在”，并且任何浏览器都不支持 wallclock()。SVG 动画从 wallclock-sync-value 开始

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

标签： reactjstypescriptsvg

解决方案

framer-motion可能是您正在寻找的，而不是太多的转换。

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

推荐阅读