用CATransform3D實現3D效果和制作簡單3D動畫

我們先來看下CATransform3D的頭文件

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

typedef struct CATransform3D CATransform3D;

可以看到CATransform3D是一個4 * 4結構體, 另外它還有一個弟弟CGAffineTransform是 3 * 3結構體

他們的區別看名字就很明顯,

CATransform3D是做3D坐標變換, 經常適用於CALayer

CGAffineTransform是做2D坐標變換, 經常適用於UIView

CATransform3D這個結構體中, 我們使用最多的是m34 后面我們再來說這個, 先知道就好了

 

我們繼續看下CATransform3D頭文件中的其他內容

CA_EXTERN const CATransform3D CATransform3DIdentity;
//一個無任何變換的默認矩陣常量，可用於使變換后的Layer恢復初始狀態

CA_EXTERN bool CATransform3DIsIdentity (CATransform3D t);
//判斷是否為默認矩陣

CA_EXTERN bool CATransform3DEqualToTransform (CATransform3D a,
    CATransform3D b);
//判斷兩個矩陣是否相同

CA_EXTERN CATransform3D CATransform3DMakeTranslation (CGFloat tx,
    CGFloat ty, CGFloat tz);
//生成一個依照參數平移轉換后的矩陣

CA_EXTERN CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy,
    CGFloat sz);
//生成一個依照參數縮放后的CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);//生成一個依照參數旋轉后的矩

CA_EXTERN CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);
//變換指定的矩陣 CA_EXTERN CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz);
//變換指定的矩陣 CA_EXTERN CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
//變換指定的矩陣

//需要注意的是x/y/z三個參數均為指定旋轉軸，可選值0和1，0代表此軸不做旋轉，1代表作旋轉。
例如想對x、y軸做45度旋轉，則angle = M____PI____4,x = 1,y = 1,z = 0。
另外，旋轉角度為弧度制哦，不是角度制 CA_EXTERN CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b); //計算兩個矩陣的乘積
 CA_EXTERN CATransform3D CATransform3DInvert (CATransform3D t); //反轉矩陣
 CA_EXTERN CATransform3D CATransform3DMakeAffineTransform (CGAffineTransform m); //通過2D得到一個3D矩陣
 CA_EXTERN bool CATransform3DIsAffine (CATransform3D t);
//判斷3D矩陣是否可以用2D矩陣表示 CA_EXTERN CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);
//從3D矩陣中獲取2D矩陣

我們先看一個簡單的例子, 實現一個矩形向內翻轉

上代碼:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    //創建CALayer
    CALayer * staticLayerA       = [CALayer layer];
    staticLayerA.bounds          = CGRectMake(0, 0, 100, 100);
    staticLayerA.position        = self.view.center;
    staticLayerA.backgroundColor = [UIColor redColor].CGColor;
    
    //添加到主界面
    [self.view.layer addSublayer:staticLayerA];
    
    //創建CATransform3D默認變換矩陣
    CATransform3D transA = CATransform3DIdentity;
    
    //調整m34, 向里偏500個單位
    transA.m34           = - 1.0 / 500;
    
    //設置沿x軸偏轉60度
    transA               = CATransform3DRotate(transA, M_PI / 3, 1, 0, 0);
    
    //設置Layer3D偏轉
    staticLayerA.transform = transA;
}

代碼里M34 = - 1.0 / 500 的意思就是圖層距離屏幕向里500的單位。如果向外則是M34 = 1.0 / 500。這個距離至一般掌握至500~1000這個范圍會取得不錯的效果。

這里需要注意的是M34的賦值一定要寫在矩陣變換前面

 

可以再用BasicAnimation來實現3D動畫, 用關鍵字: Transform

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration     = 2;
    animation.repeatCount  = 100;
    animation.autoreverses = YES;
    animation.toValue      = [NSValue valueWithCATransform3D:transA];
    
    [staticLayerA addAnimation:animation forKey:nil];

 

大家可以試試看效果