javascript - 在 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 不提供的transform-origin。

目前我有:

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 中实现这个确切的起源更改的？

如果它有帮助，它应该看起来像这样......

Scroll to the On the Space section

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,
    },
  },

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