Как получить текущее значение анимированных значений с параметром useNativeDriver, установленным в true?

Question

Я пытаюсь получить текущее значение animated.Value это имеет возможность useNativeDriver установите в true, но это не работает. С другими анимированными значениями, которые имеют одинаковую опцию со значением false, он работает отлично.

Answer 1

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

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

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

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);
});

}

Answer 2

Вы можете подписаться на изменение его значения:this.state.animatedValue.addListener(({value}) => {/* your logic */});

Answer 3

      Number.parseFloat(JSON.stringify(animatedValue))

Попробуйте, это сработает?

Answer 4

Я столкнулся с точно такой же проблемой, и использование функции addListener не решило ее для меня. Я создал ссылку и изменил это значение внутри функции обратного вызова в методе start() следующим образом:

Таким образом, вы гарантируете, что каждый раз, когда анимированное значение обновляется, оно сохраняется в ссылке и может быть использовано, например, для сравнения различий значений. Надеюсь это поможет!