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

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

在React Native中动画变换原点

1 个答案: