react-native - React Native Animated.Value/Animated.timing 没有 Animated.View

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>

现在因为我的半径Animated.Value 不是 Animated.View 道具的一部分，我猜它不会生成补间帧。我确实从 Animated.timing(..).start(callback) 中得到了“完成”消息，但显然因为没有任何东西直接连接到修改我的状态，所以我没有接到渲染补间的调用。那么如何让 Animated.timing() 修改我的状态？

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

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

是否有来自 Animated.timing(...) 的回调，我可以设置为然后调用 setState()？

上面的代码非常伪，试图让问题保持轻松。

标签： react-nativereact-native-iosreact-animated