У меня есть некоторые переменные состояния, которые я хочу анимировать для взаимодействия с пользователем. Эти переменные не являются свойствами представления или стиля; на самом деле они являются свойствами 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>
Теперь, потому что мой radius 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 ()?
Приведенный выше код очень псевдо-, пытаясь сохранить свет вопроса.