时间戳

首页 > 解决方案 > 在 react-native 动画中使用计算变量

reactjs - 在 react-native 动画中使用计算变量

问题描述

如何使用 Animated 根据视图对圆的大小进行动画处理，对宽度和高度进行动画处理，导出所需的其他值？（半径和居中的左/上）动画 WH，导出半径为 WH/2，居中的左和上是左 - 半径和上 - 半径。我如何计算这些以在 Circle 的风格中使用？（我正在做 3 个有效的插值，但应该有更好更有效的方法）

const CircAnim = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current  // Initial value : 0
  fadeAnim.setValue(0);
  const wh = fadeAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [props.startSize, 0],
  })
  const radius = fadeAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [props.startSize/2, 0],
  })
  const centeredLeft = fadeAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [props.style.left - props.startSize/2, props.style.left],
  })
  const centeredTop = fadeAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [props.style.top - props.startSize/2, props.style.top],
  })
  React.useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 3000,
      }
    ).start();
  }, [props.restarting])

标签： reactjsreact-nativereact-animated

解决方案

而且，这是我的答案。很简单，只需要了解规格即可。当然，这是简单的数学运算，所以下一个问题是，如何对这些值进行更复杂的数学运算。

  const radius       = Animated.divide(wh,2);
  const centeredLeft = Animated.subtract(props.style.left,radius);
  const centeredTop  = Animated.subtract(props.style.top,radius);

推荐阅读