React Native Animated. Вы должны указать ровно одно свойство для каждого объекта преобразования.

Question

Я получаю эту ошибку при попытке перевести представление с использованием translateX и translateY

ExceptionsManager. js: 173 JSON value '({translateX = 0; translateY = 120 ;}) 'типа NSMutableArray не может быть преобразован в CATransform3D. Вы должны указать ровно одно свойство для каждого объекта преобразования.

Вот мой компонент:

  const BounceInUp: FC<IAnimatedView> = ({ children, teddyBear }) => {
  const bounceValue = new Animated.Value(120);
  const shakeValue = new Animated.Value(0);

  const animate = useCallback(() => {
    Animated.sequence([
      Animated.delay(300),
      Animated.spring(bounceValue, {
        useNativeDriver: true,
        toValue: -10,
        velocity: 3,
        friction: 8,
      }),
      Animated.sequence([
        Animated.timing(shakeValue, { toValue: 10, duration: 100, useNativeDriver: true }),
        Animated.timing(shakeValue, { toValue: -10, duration: 100, useNativeDriver: true }),
        Animated.timing(shakeValue, { toValue: 10, duration: 100, useNativeDriver: true }),
        Animated.timing(shakeValue, { toValue: 0, duration: 100, useNativeDriver: true }),
      ]),
    ]).start();
  }, [bounceValue, shakeValue]);

  useEffect(() => {
    animate();
  }, [teddyBear.id]);

  return (
    <Animated.View style={[styles.subView, { transform: [{ translateY: bounceValue, translateX: shakeValue }] }]}>
      {children}
    </Animated.View>
  );
};

Как я могу применить одну анимацию к X и Y без появления этой ошибки?

Answer 1

Вы должны поместить каждое преобразование (translateX и translateY) в объект внутри массива преобразований.

transform: [{ translateY: bounceValue }, { translateX: shakeValue }]

Answer 2

const bounceValue = new Animated.Value(120); Я думаю, вы можете попробовать инициализировать значение следующим образом: const valueXY = new Animated.ValueXY({ x: 0, y: 120 });, потому что вы хотите анимировать значения x и y.

Затем:

Animated.spring(valueXY, {
        useNativeDriver: true,
        toValue: { x: 0, y: 0 },
        velocity: 3,
        friction: 8,
      }),

и в вашей последовательности:

Animated.timing(valueXY, { toValue: { x: 10, y: 0 }, duration: 100, useNativeDriver: true })

Также в стиле <Animated.View style={[styles.subView, { transform: valueXY.getTranslateTransform() }]}>

Вы можете проверить здесь для получения дополнительной информации https://animationbook.codedaily.io/animated-value-xy/