RN动画- Transforms

2021-08-02  本文已影响0人  说不出口的喵

Transforms

平移、缩放、旋转、倾斜

首先transform必须是数组的形式存在:

1、translateY和translateX、translate

translateY和translateX分别是向Y、X轴偏移,值为可为正可为负,transform:[{translateX:100}],放在style里面。

而  transform:[{translate:[-100,100,50]}] ,则有单个参数,分别为X、Y、Z,Z不填的话为0

支持:VR  facebook官网链接:https://www.jackpu.com/kai-shi-shi-yong-react-vr/

2、scaleX、scaleY、scale

scaleX表示width的缩放,scaleY表示height的缩放,而scale代表宽高都缩放;

值若为正数,则正常缩放,若为负数,则是以自己的中心为中心的镜像

3、rotateZ、rotateX、rotateY、rotate

其中rotateX、rotateY为绕X和Y轴旋转,在我们手机的XY平面中是看不到的,所以此处不做介绍,只介绍rotateZ和rotate,这两个是一样的结果:

4、skewY、skewX斜切

skewX表示的是以X轴为中心在YZ屏幕中旋转,而skewY表示的是以Y轴为中心在XZ屏幕中旋转。

5、perspective 透视 暂用不到

6、matrix 矩阵  暂用不到

上一篇 下一篇

猜你喜欢

热点阅读