React Native Animated.Value / Animated.timing без Animated.View - PullRequest
0 голосов
/ 01 июля 2018

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

Приведенный выше код очень псевдо-, пытаясь сохранить свет вопроса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...