Получить текущую позицию Animated.View - PullRequest
Новая
       12

Получить текущую позицию Animated.View

0 голосов
/ 13 июля 2020

Описание

Я использую react-native-reanimated Version 2 Alpha-1 и пытаюсь получить текущую позицию анимации. Я хочу найти позиции x и y моего Animated.View каждый раз, когда он меняет положение во время анимации. Пока мне удалось найти только начальную и конечную позиции.

Кто-нибудь знает, как это сделать?

Версии пакета

  • React: 16.11.0
  • React Native: 0.62.2
  • React Native Reanimated: 2.0.0-alpha.1

Код

Примечание: minWindowDimension и maxWindowDimension, указанные ниже, возвращаются из функции, которая вычисляет минимальный и максимальный размер окна на основе собственного хука useDimensions. 

function style(squareSideLength) {
  const styles = StyleSheet.create({
    enemyBox: {
      width: squareSideLength,
      height: squareSideLength,
      backgroundColor: 'blue',
      position: 'absolute',
    },
  });
  return styles;
}

export default function enemyBox({
  squareSideLength,
  gameRunning,
}) {
  const {minWindowDimension, maxWindowDimension} = getWindowDimensions();
  const styles = style(squareSideLength);
  const x = useSharedValue(minWindowDimension * 0.1);
  const y = useSharedValue(maxWindowDimension * 0.1);
  if (gameRunning) {
    x.value = minWindowDimension - 75;
    y.value = maxWindowDimension - 75;
  }

  const enemyBoxAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: withTiming(x.value, {
            duration: 5000,
            easing: Easing.linear,
          }),
        },
        {
          translateY: withTiming(y.value, {
            duration: 5000,
            easing: Easing.linear,
          }),
        },
      ],
    };
  });
  return (
    <Animated.View
      style={[styles.enemyBox, enemyBoxAnimatedStyle]}
    />
  );
}
...