如何在react-native中使用Animated制作svg动画

Question

ReactNative：

<ScrollView style={styles.container}>
    <Svg
      height="100"
      width="100">
        <Circle
          cx="50"
          cy="50"
          r="50"
          stroke="blue"
          strokeWidth="2.5"
          fill="green"/>
      </Svg>
</ScrollView>

我想用Animated.Value制作圆形比例。我试过这个：

    let AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
    let AnimatedCircle = Animated.createAnimatedComponent(Circle);

    <ScrollView style={styles.container}>
            <Svg
              height="100"
              width="100">
                <AnimatedCircle
                  cx="50"
                  cy="50"
                  r={this.state.animator}
                  stroke="blue"
                  strokeWidth="2.5"
                  fill="green"/>
              </Svg>
        </ScrollView>

然后闪回，没有错误。

我该怎么办？

更新2016.8.24

我发现了一种新的方式，而不是requestAnimationFrame：

构造函数：

this.state = {
      animator: new Animated.Value(0),
      radius: 1,
    };

    this.state.animator.addListener((p) => {
      this.setState({
        radius: p.value,
      });
    });

渲染：

<Circle
    cx="50"
    cy="50"
    r={this.state.radius}
    stroke="blue"
    strokeWidth="2.5"
    fill="green"/>

但是这里the guides提供了很少使用它的建议，因为它可能会影响未来的性能。

那么最好的方式是什么？

Answer 1

使用setNativeProps获得更好的效果。

我做了一些修补，发现了一种更高效的方法，可以使用addListener和setNativeProps。

构造

constructor(props) {
  super(props);

  this.state = { circleRadius: new Animated.Value(50) };

  this.state.circleRadius.addListener( (circleRadius) => {
    this._myCircle.setNativeProps({ r: circleRadius.value.toString() });
  });

  setTimeout( () => {
    Animated.spring( this.state.circleRadius, { toValue: 100, friction: 3 } ).start();
  }, 2000)
}

<强>渲染

render() {
  return(
    <Svg height="400" width="400">
      <AnimatedCircle ref={ ref => this._myCircle = ref } cx="250" cy="250" r="50" fill="black" />
    </Svg>
  )
}

<强>结果

这就是当2秒（2000毫秒）超时触发时动画的样子。

因此，您需要更改的主要内容是使用setNativeProps而不是在侦听器中使用setState。这使得本机调用和旁路重新计算整个组件，在我的情况下，这非常复杂且缓慢。

感谢带领我走向听众的方法！

Answer 2

我已经根据另一个人的项目创建了一个简单的svg动画库，目前只有Paths可以动画，但将来会添加更多的形状和动画

https://www.npmjs.com/package/react-native-svg-animations

Answer 3

没有更好的答案，我通过向Animated.Value变量添加监听器来实现，您可以从我的问题描述中获取更多信息。