如何在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制作Circle比例.我试过这个:

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

但是这里的指南会谨慎地使用它,因为它可能会在将来产生性能影响.

那么最好的方法是什么？

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

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