React Native transform样式的使用详解(平移、缩放、旋转、倾斜等图形变换)

7,123 阅读1分钟

因为最近学习了下React-Native的动画。里面有很多旋转的效果。看到了这个属性transform 一脸懵逼。因为我不会。所以我记录一下。哈哈。如果和我一样不会的,建议手动写一遍就知道了~

##一、四种变形样式 #####1.平移(translate)

  • translateX:沿 x 轴方向平移
  • translateY:沿 y 轴方向平移
    平移的样式
    注:这边的值是number类型的 如果你向往相反方向设置负值就可以了

#####2.缩放(scale)

  • scaleX:沿 x 轴方向放大
  • scaleY:沿 y 轴方向放大
  • scale:沿 x、y 轴方向都放大
    image.png

注:这边的值是number类型的 如果你设置负值的话 他就会反过来了自己尝试吧

#####3.旋转(rotate)

  • rotateX:沿 x 轴旋转
  • rotateY:沿 y 轴旋转
  • rotateZ:沿 z 轴旋转
  • rotate:不指定轴旋转
    image.png
    注:这边的值是类型的 这边的单位是 deg 需要注意下

#####4.倾斜(skew)

  • skewX:沿 x 轴方向倾斜
  • skewY:沿 y 轴方向倾斜
    image.png
    注:这边的值是string类型的 这边的单位是 deg 需要注意下

##二、组合写法 使用数组里面放置多个对象的方式进行编写

  transform: [{skewX: "40deg"},{scale:2}]

好了记录到这边了。撤~