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()?

Код выше очень псевдо, пытаясь держать вопрос в свете.

0 ответов

Другие вопросы по тегам