React Native 中的动画变换原点答案

【问题标题】：Animating transform-origin in React NativeReact Native 中的动画变换原点
【发布时间】：2018-04-19 19:46:29
【问题描述】：

所以我有几个 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

【问题讨论】：

不幸的是，react native 不支持 transform-origin。您曾经可以使用此处显示的矩阵数学技巧来做到这一点commitocracy.com/…，但这似乎不再起作用 =(
@FunkSoulNinja 是的，我猜到了，如果这也不起作用，我想你不知道我是否可以在不操纵原点的情况下实现动画？无论如何感谢您的回复。
stackoverflow.com/a/62286550/4026902 这可以帮助你。

标签： javascript reactjs react-native react-native-ios

【解决方案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,
    },
  },

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

【讨论】：