Question

我正在使用React，我想要实现的是在SVG弧形路径发生变化时制作一个动画。基本上，我的压力表显示的是介于0到100之间的某个值，并且该值可以更改（在下面的示例中，它每秒更改一次）。

我已经创建了这个模拟我想要的代码笔（下面的代码）：https://codepen.io/Gesma94/pen/oJvjwe

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

我想实现的是在条形之前的点和条形将要到达的点之间进行平滑的移动（希望我已经清楚了）。

class MyComponent extends React.Component {
   render() {
      console.log("Rendering");
      const value = (this.props.value * Math.PI / 100) - Math.PI/2;

      const currentValueFilledCircle = d3.arc()
      .innerRadius(37.5)
      .outerRadius(49.5)
      .startAngle(-Math.PI/2)
      .endAngle(value)(null);

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

      return (
         <div style={{width: "300px", height: "300px"}}>
            <svg height="100%" width="100%" viewBox="-50 -50 100 100">
               <g>
                  <path d={currentValueFilledCircle} fill="blue" />
                  <path d={currentValueEmptyCircle} fill="gray" />
               </g>
            </svg>
         </div>
      );
   };
}

class App extends React.Component {
   constructor() {
      super();
      this.value = 77;
   }

   componentDidMount() {
      this.interval = setInterval(() => {
         const diff = Math.floor(Math.random() * 7) - 3;
         let newCurrentValue = this.value + diff;

         if (newCurrentValue > 100) newCurrentValue = 100;
         else if (newCurrentValue < 0) newCurrentValue = 0;

         this.value = newCurrentValue;
         this.forceUpdate();
      }, 500);
   }

   render() {
      return (<MyComponent value={this.value} />)
   }
}

ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

所以，我挣扎了一段时间，但是找到了使用react-move/Animate的解决方案：https://react-move.js.org/#/documentation/animate

由于我无法在Codepen上使用它，因此我在沙盒中重新创建了这种情况，它是：https://codesandbox.io/embed/0qyrmyrw

要点是代码的以下部分：

<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>

基本上，通过编写update={{value: [this.props.value] ... }}，Animate组件只需运行一组具有不同值（从前一个值到当前值）的render（）方法，即可提供平滑的运动效果。

在React中对SVG弧形路径进行动画处理

1 个答案: