React Native Animated.Value/Animated.timing без Animated.View
У меня есть некоторые переменные состояния, которые я хочу анимировать для микро-взаимодействия с пользователем. Эти переменные не являются свойствами представления или стиля; на самом деле они являются свойствами SVG, такими как радиус круга (с использованием response-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, я думаю, он не генерирует кадры анимации. Я получаю сообщение "done" изнутри 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()?
Код выше очень псевдо, пытаясь держать вопрос в свете.