在 React Native 中对变换原点进行动画处理

Question

所以我目前在我制作的混合应用程序中使用了几个CSS动画：

@keyframes spaceInLeft {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(.2) translate(-20%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceOutRight {
  0% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(.2) translate(20%, 0%);
  }
}

我正在将所述应用程序移植到 React Native，并且此动画遇到了障碍。正如你所看到的，它使用了 React Native 不提供的转换源。

目前我有：

Animatable.initializeRegistryWithDefinitions({
  spaceInLeft: {
    from: {
      opacity: 0,
      transform: [
        {
          scale: 0.2,
          translateX: '-20%',
          translateY: '0%',
        },
      ],
    },
    to: {
      opacity: 1,
      transform: [
        {
          scale: 1,
          translateX: '0%',
          translateY: '0%',
        },
      ],
    },
  },
  position: {
    from: {
      transform: [
        {
          translateX: 0,
          translateY: '50%',
        },
      ],
    },
    to: {
      transform: [
        {
          translateX: 0,
          translateY: '50%',
        },
      ],
    },
  },
});

我

想知道是否有人可以阐明我如何在 React Native 中实现这种确切的源代码更改？

如果它有帮助，它的意思是看起来像这样......

滚动到"在空间上"部分

Answer 1

我想我刚刚找到了解决方法。我没有使用任何类型的原点，而是简单地沿 X 轴对其进行了转换。

  spaceInLeft: {
    0: {
      opacity: 0,
      scale: 0.2,
      translateX: 0,
      translateY: 0,
    },
    0.5: {
      scale: 0.6,
      translateX: -100,
      translateY: 0,
    },
    1: {
      opacity: 1,
      scale: 1,
      translateX: 0,
      translateY: 0,
    },
  },

我还认为我在声明转换时添加了语法错误。