Javascript 在React中设置SVG圆弧路径动画

我正在使用React，我想要实现的是在SVG圆弧路径发生变化时在其上生成动画。基本上，我有一个仪表，它显示一个介于0和100之间的特定值，并且该值可以改变（在下面的示例中，它每秒都会改变）

我已经创建了这个模拟我想要的代码笔（下面的代码）：

正如您在示例中看到的，我在SVG中创建了一个使用d3的量表，其中蓝色条可以在时间上占用更多或更少的空间；如您所见，重新渲染仪表时，新的蓝色条只是渲染，在“旧点”和“新点”之间没有任何动画

我想要实现的是在棒之前的点和棒将要到达的点之间有一个平滑的移动（希望我已经清楚了）

类MyComponent扩展了React.Component{ render（）{ 控制台日志（“呈现”）； 常量值=（this.props.value*Math.PI/100）-Math.PI/2； const currentValueFilledCircle=d3.arc（） .内半径（37.5） .外层（49.5） .startAngle（-Math.PI/2） .端角（值）（空）； 常数currentValueEmptyCircle=d3.arc（） .内半径（37.5） .外层（49.5） .startAngle（值） .端角（数学PI/2）（空）； 返回( ); }; } 类应用程序扩展了React.Component{ 构造函数（）{ 超级（）； 该值=77； } componentDidMount（）{ this.interval=setInterval（（）=>{ 常数差=数学楼层（数学随机（）*7）-3； 设newCurrentValue=this.value+diff； 如果（newCurrentValue>100）newCurrentValue=100； 如果（newCurrentValue<0）newCurrentValue=0，则为else； this.value=newCurrentValue； 这个.forceUpdate（）； }, 500); } render（）{ 返回（） } } ReactDOM.render（，document.getElementById（'app'））；

---

所以，我挣扎了好几次，但我找到了一个解决方案，使用

反应移动/动画

：

因为我无法在Codepen上运行，所以我在沙箱中重新创建了这种情况，就是这样：

主要内容为以下代码部分：

<Animate
  start={{ value: this.props.value }}
  update={{
    value: [this.props.value], // Before the sqaure brackets!!
    timing: { duration: 750 }
  }}
>
  {(state: { value: number }) => {
    const scaledValue = (state.value * Math.PI) / 100 - Math.PI / 2;
    const currentValueFilledCircle = arc()
      .innerRadius(37.5)
      .outerRadius(49.5)
      .startAngle(-Math.PI / 2)
      .endAngle(scaledValue)(null);

    const currentValueEmptyCircle = arc()
      .innerRadius(37.5)
      .outerRadius(49.5)
      .startAngle(scaledValue)
      .endAngle(Math.PI / 2)(null);

    return (
      <React.Fragment>
        <path d={currentValueFilledCircle} fill="blue" />
        <path d={currentValueEmptyCircle} fill="gray" />
      </React.Fragment>
    );
  }}
</Animate>

{（状态：{value:number}）=>{
常量scaledValue=（state.value*Math.PI）/100-Math.PI/2；
常数currentValueFilledCircle=arc（）
.内半径（37.5）
.外层（49.5）
.startAngle（-Math.PI/2）
.endAngle（scaledValue）（空）；
常数currentValueEmptyCircle=arc（）
.内半径（37.5）
.外层（49.5）
.startAngle（scaledValue）
.端角（数学PI/2）（空）；
返回(
);
}}

---

基本上，通过编写

update={{value:[this.props.value]…}}

，

Animate

组件只需运行一组具有不同值的render（）方法，从上一个到当前，因此，它提供了平滑的移动效果。

在设置笔划偏移动画的位置，使用无填充的简单路径更容易实现这种类型的动画。请看一看这支笔：。抱歉，我还没有尝试您的解决方案，但我确实认为它可能在React方面存在一些问题：当我再次渲染时，它会从

dashoffset=0

重新开始，因此我认为它将始终从一开始就开始。无论如何，我找到了一个解决办法，谢谢你！

<Animate
  start={{ value: this.props.value }}
  update={{
    value: [this.props.value], // Before the sqaure brackets!!
    timing: { duration: 750 }
  }}
>
  {(state: { value: number }) => {
    const scaledValue = (state.value * Math.PI) / 100 - Math.PI / 2;
    const currentValueFilledCircle = arc()
      .innerRadius(37.5)
      .outerRadius(49.5)
      .startAngle(-Math.PI / 2)
      .endAngle(scaledValue)(null);

    const currentValueEmptyCircle = arc()
      .innerRadius(37.5)
      .outerRadius(49.5)
      .startAngle(scaledValue)
      .endAngle(Math.PI / 2)(null);

    return (
      <React.Fragment>
        <path d={currentValueFilledCircle} fill="blue" />
        <path d={currentValueEmptyCircle} fill="gray" />
      </React.Fragment>
    );
  }}
</Animate>