использовать вычисляемые переменные в анимированных

Как использовать 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])

react-native reactjs react-animated
person Todd    schedule 11.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

И вот мой ответ. Очень просто, просто вопрос понимания спецификаций. Конечно, это простая математика, поэтому следующий вопрос заключается в том, как выполнить более сложную математику с этими значениями.

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