美文网首页
RN动画- Transforms

RN动画- Transforms

作者: 说不出口的喵 | 来源:发表于2021-08-02 17:41 被阅读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 矩阵  暂用不到

相关文章

网友评论

      本文标题:RN动画- Transforms

      本文链接:https://www.haomeiwen.com/subject/hpjjvltx.html