Reactnative React Native 转换与枢轴点

我刚刚做了一个withAnchorPoint函数，让transform在react native中更容易使用锚点.https://github.com/sueLan/react-native-anchor-point

你可以这样使用它:

import { withAnchorPoint } from 'react-native-anchor-point';

getTransform = () => {
    let transform = {
        transform: [{ perspective: 400 }, { rotateX: rotateValue }],
    };
    return withAnchorPoint(transform, { x: 0.5, y: 0 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};

<Animated.View style={[styles.blockBlue, this.getTransform()]} />

我还为此写了一篇文章.

下面是一些棘手的代码，用于设置视图的定位点或轴点.

1. 在x轴、y轴、z轴上将视图平移x、y、z轴
2. 应用旋转
3. 在x轴、y轴、z轴上将视图向后平移-x、-y、-z

          translateX: -w / 2
          rotateY
          translateX: w / 2

这意味着将锚点设置为(0,0.5).我们将其应用于变换样式中，如下所示

   const transform = {
      transform: [
          {translateX: -w / 2}, 
          rotateY, 
          {translateX: w / 2}
      ]
    }
    return (   
        <Animated.View style={transform}></Animated.View>
    )
  }

          translateX: w / 2
          rotateY
          translateX: -w / 2

这意味着将锚点设置为(1,0.5)

          translateX: -w / 2
          translateY: -h / 2
          rotateZ
          translateX: w / 2
          translateY: h / 2

这意味着将锚点设置为(0，0)

          translateX: w / 2
          translateY: h / 2
          rotateZ
          translateX: -w / 2
          translateX: -h / 2

这意味着将锚点设置为(1，1)

在iOS中，它被称为锚点.About the anchorPoint

layer.anchorPoint = CGPointMake(0, 0)

在安卓系统中，它被称为轴心点.

  viewToMove.setPivotX(0);
  viewToMove.setPivotY(0);