svg - react-motion 如何确定要插值的初始值

Question

全部：

我对 react-motion 很陌生，我想知道我什么时候使用 Motion 像：

<Motion style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>

我怎么知道哪个值是它用来插入下一个值的初始值？以及如何插入数组（目的是将该数组与 D3.js 一起使用以生成 SVG 路径），例如：

<Motion style={{data: spring([final data])}}>
  {interpolatingStyle => <div d={linegenerator(interpolatingStyle.data)} />}
</Motion>

谢谢

Answer 1

您可以将初始值设置为defaultStyle属性。

<Motion
  defaultStyle={{x: 0}}
  style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>