用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，，。
例如想對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矩陣0表明此軸不作旋轉1表明做旋轉弧度制

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

上代碼:

#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];

 

你們能夠試試看效果