React Native - transform样式的使用详解（

因为最近学习了下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}]

好了记录到这边了。撤~