如何在react-native中使用Animated制作svg动画 [英] How to make svg animation with Animated in react-native

问题描述

ReactNative:

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缩放.我已经尝试过了:

I want to make Circle scale with Animated.Value. I have tried this :

    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:

I found a new way instead of 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"/>

但是这里指南会谨慎使用，因为将来会对性能产生影响.

But here the guides gives advice using it sparingly since it might have performance implications in the future.

那最好的方法是什么?

推荐答案

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

No better answers, and I implemented by adding listener to Animated.Value variable, you can get more info from my question description.

这篇关于如何在react-native中使用Animated制作svg动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！