iOS開發CoreAnimation解讀之六——CATransform3D變換的應用

iOS開發CoreAnimation解讀之五——CATransform3D變換的應用

1、引言

        CATransform3D定義了一個變化矩陣，經過對矩陣參數的設置，咱們能夠改變layer的一些屬性，這個屬性的改變，能夠產生動畫的效果。首先，CATransform3D定義了一個4*4的矩陣，以下：

struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};

從m11到m44定義的含義以下：

m11：x軸方向進行縮放

m12：和m21一塊兒決定z軸的旋轉

m13:和m31一塊兒決定y軸的旋轉

m14:

m21:和m12一塊兒決定z軸的旋轉

m22:y軸方向進行縮放

m23:和m32一塊兒決定x軸的旋轉

m24:

m31:和m13一塊兒決定y軸的旋轉

m32:和m23一塊兒決定x軸的旋轉

m33:z軸方向進行縮放

m34:透視效果m34= -1/D，D越小，透視效果越明顯，必須在有旋轉效果的前提下，纔會看到透視效果

m41:x軸方向進行平移

m42:y軸方向進行平移

m43:z軸方向進行平移

m44:初始爲1

2、CATransform3D中的屬性和方法

//初始化一個transform3D對象，不作任何變換
const CATransform3D CATransform3DIdentity;
//判斷一個transform3D對象是不是初始化的對象
bool CATransform3DIsIdentity (CATransform3D t);
//比較兩個transform3D對象是否相同
bool CATransform3DEqualToTransform (CATransform3D a, CATransform3D b);
//將兩個 transform3D對象變換屬性進行疊加，返回一個新的transform3D對象
CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b);

一、平移變換

//返回一個平移變換的transform3D對象 tx，ty，tz對應x，y，z軸的平移
CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz);
//在某個transform3D變換的基礎上進行平移變換，t是上一個transform3D，其餘參數同上
CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);

例如：

    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:imageView];
    
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DMakeTranslation(10, 200, 0);
    newImageView.layer.transform =trans;

效果以下：

二、縮放變換

//x，y，z分別對應x軸，y軸，z軸的縮放比例
CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz);
//在一個transform3D變換的基礎上進行縮放變換，其餘參數同上
CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz);

例如：

UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:imageView];
    
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 300, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DMakeScale(2, 1, 1);
    newImageView.layer.transform =trans;

效果以下：

三、旋轉變換

//angle參數是旋轉的角度，爲弧度制 0-2π
//x，y，z決定了旋轉圍繞的中軸，取值爲-1——1之間，例如（1，0，0）,則是繞x軸旋轉（0.5，0.5，0），則是繞x軸與y軸中
//間45度爲軸旋轉,依次進行計算
CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
//在一個transform3D的基礎上進行旋轉變換，其餘參數如上
CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);

例如：

UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:imageView];
    
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 300, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DMakeRotation(M_PI/2, 0, 0, 1);
    newImageView.layer.transform =trans;

效果以下：

另外，當咱們有垂直於z軸的旋轉份量時，設置m34的值能夠增長透視效果，也能夠理解爲景深效果，例如：

    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    imageView.layer.transform = CATransform3DMakeRotation(M_PI/4, 0, 1, 0);
    [self.view addSubview:imageView];
    
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 300, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DIdentity;
    trans.m34 = -1/100.0;
    trans = CATransform3DRotate(trans, M_PI/4, 0, 1, 0);  
    newImageView.layer.transform =trans;

兩個imageView都進行了y軸的旋轉變換，第二個有透視效果，第一個沒有，運行以下：

四、旋轉翻轉變換

//將一個旋轉的效果進行翻轉 
CATransform3D CATransform3DInvert (CATransform3D t);

例如：

    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    imageView.layer.transform = CATransform3DMakeRotation(M_PI/4, 0, 0, 1);
    [self.view addSubview:imageView];
    
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 300, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DMakeRotation(M_PI/4, 0, 0, 1);
    trans = CATransform3DInvert(trans);
    
    newImageView.layer.transform =trans;

效果以下：

五、CATransform3D與CGAffineTransform的轉換

        CGAffineTransform是UIKit框架中一個用於變換的矩陣，其做用與CATransform相似，只是其能夠直接做用於View，而不用做用於layer，這兩個矩陣也能夠進行轉換，方法以下：

//將一個CGAffinrTransform轉化爲CATransform3D
CATransform3D CATransform3DMakeAffineTransform (CGAffineTransform m);
//判斷一個CATransform3D是否能夠轉換爲CAAffineTransform
bool CATransform3DIsAffine (CATransform3D t);
//將CATransform3D轉換爲CGAffineTransform
CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);

 

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592