javascript - 如何在选项 useNativeDriver 设置为 true 的情况下获取动画值的当前值？

Question

我试图获取animated.Value选项useNativeDriver设置为 true 的当前值，但它不起作用。将其他具有相同选项的动画值设置为 false，它可以完美运行。

Answer 1

您可以通过以下方式订阅其值更改： this.state.animatedValue.addListener(({value}) => {/* your logic */});

Answer 2

Number.parseFloat(JSON.stringify(animatedValue))

试试这个会有用吗？

Answer 3

发生这种情况是因为，当 useNativeDriver 设置为 true 时，动画不再在 JS 线程上运行，而是转到本机 UI 线程，因此当前动画值不会像我们期望的那样在 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);
});

}