Question

我想为用户微交互设置一些状态变量。这些变量不是视图的属性或样式属性。它们实际上是SVG的属性，例如“圆半径”（使用react-native-svg）。我已经使用window.requestAnimationFrame为这些圆圈设置了动画，并且可以平滑地工作，但是我想获得React.Animated和Easing的功能，如果可能的话，可以减少一些代码。

所以我正在努力让Animated.timing（...）。start（）更新每帧的状态，以便进行渲染。

在事件处理程序中，我有类似的东西：

let radiusValue = new Animated.Value(0); 
this.setState({ holding: {
    radius: radiusValue,
    animator: Animated.timing(
         radiusValue,
         {
             toValue: closest.radius*1.15,
             duration: 1,
             easing: Easing.bounce(3)
         }
    ).start(() => console.log("done"))
}

因此可以设置动画。现在在我的render（）代码中的某处有

<Animated.View>
    <Svg><Circle cx={x} cy={y} radius={this.state.radius._value}</Svg>
</Animated.View>

现在，因为我的 radius Animated.Value不属于Animated.View道具，我猜它不会生成补间帧。我确实从Animated.timing（..）。start（callback）中收到了“完成”消息，但是很显然，由于没有任何东西直接连接到修改状态，因此我没有得到进行补间的调用。那么，如何获取Animated.timing（）来修改我的状态？

我尝试将Svg转换为Animated控件，但这实际上使iOS Simulator崩溃到主屏幕（没有红屏异常错误）。

let AnimatedSvg = Animated.createAnimatedControl(Svg);
...
<AnimatedSvg><Circle cx={x} cy={y} radius={this.state.radius._value}</AnimatedSvg>

是否可以设置来自Animated.timing（...）的回调，然后调用setState（）？

上面的代码是非常伪的，试图使问题轻描淡写。

反应原生Animated.Value / Animated.timing而没有Animated.View

0 个答案: