[英]Animate SVG Arc Path in React
I'm using React, and what I want to achieve is to have an animation on SVG arc path when they change. 我正在使用React,我想要实现的是在更改时在SVG弧路径上制作动画。 Basically, I've a gauge that show a certain value between 0 and 100, and the value can change (in the following example it changes every second).
基本上,我有一个量规,它显示0到100之间的某个值,并且该值可以更改(在下面的示例中,它每秒更改一次)。
I've created this codepen that simulate what I want (code below): https://codepen.io/Gesma94/pen/oJvjwe 我已经创建了这个模拟我想要的代码笔(下面的代码): https ://codepen.io/Gesma94/pen/oJvjwe
As you can see in the example, I've a Gauge created with d3 inside an SVG, where the blue bar can take more or less space in time; 在示例中可以看到,我在SVG中使用d3创建了一个Gauge,其中蓝色条可以占用更多或更少的时间; as you can see, when the Gauge is re-rendered, the new blue bar is just rendered, without any animation between the "old point" and "new point".
如您所见,重新渲染仪表时,将仅渲染新的蓝色条,而在“旧点”和“新点”之间没有任何动画。
What I would like to achieve is having a smooth movement between the point the bar was before, and the point where the bar is going to be (hope I've been clear). 我想实现的是在条形之前的点和条形将要到达的点之间进行平滑的移动(希望我已经清楚了)。
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'));
So, I struggled for some times, but I found a solution using react-move/Animate
: https://react-move.js.org/#/documentation/animate 所以,我挣扎了一段时间,但是我找到了使用
react-move/Animate
的解决方案: https : //react-move.js.org/#/documentation/animate
Since I couldn't make it work on Codepen, I recreate the situation in a sandbox, there it is: https://codesandbox.io/embed/0qyrmyrw 由于我无法在Codepen上使用它,因此我在沙盒中重新创建了这种情况,它是: https ://codesandbox.io/embed/0qyrmyrw
The gist is the following part of code: 要点是代码的以下部分:
<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>
Basically, by writing update={{value: [this.props.value] ... }}
, the Animate
Component just run a set of render() method with different values, from the previous to the current, and so it gives a smooth-movement effect. 基本上,通过编写
update={{value: [this.props.value] ... }}
, Animate
Component只需运行一组具有不同值的render()方法(从前一个值到当前值),因此它给出了平滑运动效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.