Блог

Главная - Вопросы по программированию - Как получить текущее значение Animated.value при значении nativeDriver true?

Как получить текущее значение Animated.value при значении nativeDriver true?

#react-native #react-animated

#react-native #реагирующий анимированный

Вопрос:

Можно получить текущее анимированное значение, используя ._value, в то время как nativeDriver имеет значение false .

Но возможно ли получить текущее значение, когда nativeDriver имеет значение true?

Есть ли у нас какие-либо обходные пути?

Комментарии:

1. Это звучит как проблема XY . Что вы на самом деле пытаетесь сделать?

2. @Kraylog Я пытаюсь реализовать список привязки. Поэтому необходимо вычислить индекс, используя значение animated.value в реальном времени. Таким образом, анимированное значение привязывается к scrollview.

3. Необходимо отображать заголовок на основе элемента, который находится в центре экрана.

Ответ №1:

используйте addListener следующим образом:

 this._animatedValue = new Animated.Value(0);

this._animatedValue.addListener(({value}) => this._value = value);

Animated.timing(this._animatedValue, {
   toValue: 100,
   duration: 500
}).start();

Ответ №2:

Я нашел обходной путь для подобных сценариев, когда собственный драйвер портит наше смещение и дает скачок в нашей анимации ближе к концу.

Создайте псевдо анимированное значение (которое не будет использоваться ни для какой анимации) и продолжайте обновлять его вместе с вашим исходным анимированным значением. Наконец, когда ваша анимация закончится (например, decay, spring и т. Д.), Установите смещения и текущий угол с псевдо-значением, как показано ниже:

 const angle = useRef(new Animated.Value(0)).current; //original value used in animation; will run on native side
const psuedoAngle = useRef(new Animated.Value(0)).current; //only to track the value on JS side

//using PanResponder
...
  onPanResponderMove: (evt, gestureState) => {
      angle.setValue(some_value);
      psuedoAngle.setValue(same_value);
  },
  onPanResponderRelease: (evt, {vx, vy}) => {
    // calculate your velocity 
    ...
    const decay1 = Animated.decay(angle,{
        velocity: velocity,
        deceleration: 0.997,
        useNativeDriver: true
      }
    );
    const decay2 = Animated.decay(psuedoAngle,{
        velocity: velocity,
        deceleration: 0.997,
        useNativeDriver: false //this will keep your pseudo value intact
      }
    );

    //set offset and current angle in callback as below

    Animated.parallel([decay1,decay2]).start(() => {
      psuedoAngle.flattenOffset();
      angle.setOffset(psuedoAngle._value);  //correct value passed to original value
      psuedoAngle.setOffset(psuedoAngle._value);
      angle.setValue(0);
      psuedoAngle.setValue(0);
    });
  }