【iOS】M34和CATransformLayer

學習文章

詳解CATransformLayer

效果

M34.gif
CATransformLayer.gif
  • 利用M34做景深
  • 利用CATransformLayer做3DLayer效果

源碼

FirstViewController.m

#import "FirstViewController.h"

#import "GCD.h"
#import "UIView+SetRect.h"

#define DEGREE(d)            ((d) * M_PI / 180.0f)

@interface FirstViewController ()

@property (nonatomic, strong) GCDTimer  *m_timer;

@end

@implementation FirstViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    self.m_timer = [[GCDTimer alloc]initInQueue:[GCDQueue mainQueue]];
    
    [self staticM34];
    
    [self animateM34];
}

- (void)staticM34 {

    // 普通的一個layer
    CALayer *planeLayer1        = [CALayer layer];
    planeLayer1.anchorPoint     = CGPointMake(0.5, 0.5);                                        // 錨點
    planeLayer1.frame           = (CGRect){CGPointZero, CGSizeMake(100, 100)};                  // 尺寸
    planeLayer1.position        = CGPointMake(self.view.centerX - 55, self.view.centerY - 60);  // 位置
    planeLayer1.opacity         = 0.6;                                                          // 背景透明度
    planeLayer1.backgroundColor = [UIColor redColor].CGColor;                                   // 背景色
    planeLayer1.borderWidth     = 3;                                                            // 邊框寬度
    planeLayer1.borderColor     = [[UIColor whiteColor] colorWithAlphaComponent:0.5].CGColor;   // 邊框顏色(設置了透明度)
    planeLayer1.cornerRadius    = 10;                                                           // 圓角值
    
    
    // 普通的一個layer
    CALayer *planeLayer2        = [CALayer layer];
    planeLayer2.anchorPoint     = CGPointMake(0.5, 0.5);                                        // 錨點
    planeLayer2.frame           = (CGRect){CGPointZero, CGSizeMake(100, 100)};                  // 尺寸
    planeLayer2.position        = CGPointMake(self.view.centerX + 55, self.view.centerY - 60);  // 位置
    planeLayer2.opacity         = 0.6;                                                          // 背景透明度
    planeLayer2.backgroundColor = [UIColor greenColor].CGColor;                                 // 背景色
    planeLayer2.borderWidth     = 3;                                                            // 邊框寬度
    planeLayer2.borderColor     = [[UIColor whiteColor] colorWithAlphaComponent:0.5].CGColor;   // 邊框顏色(設置了透明度)
    planeLayer2.cornerRadius    = 10;                                                           // 圓角值
    
    // 創(chuàng)建容器layer
    CALayer *container = [CALayer layer];
    container.frame    = self.view.bounds;
    [self.view.layer addSublayer:container];
    
    CATransform3D plane_3D = CATransform3DIdentity;
    plane_3D.m34           = 1.0/ -500;
    plane_3D               = CATransform3DRotate(plane_3D, DEGREE(30), 0, 1, 0);
    container.transform    = plane_3D;
    
    [container addSublayer:planeLayer1];
    [container addSublayer:planeLayer2];
}

- (void)animateM34 {

    // 普通layer
    CALayer *planeLayer = [CALayer layer];
    [self.view.layer addSublayer:planeLayer];
    
    planeLayer.anchorPoint     = CGPointMake(0.5, 0.5);                                         // 錨點
    planeLayer.frame           = (CGRect){CGPointZero, CGSizeMake(100, 100)};                   // 尺寸
    planeLayer.position        = CGPointMake(self.view.centerX, self.view.centerY + 60);        // 位置
    planeLayer.opacity         = 0.6;                                                           // 背景透明度
    planeLayer.backgroundColor = [UIColor blueColor].CGColor;                                   // 背景色
    planeLayer.borderWidth     = 3.f;                                                           // 邊框寬度
    planeLayer.borderColor     = [[UIColor whiteColor] colorWithAlphaComponent:0.5].CGColor;    // 邊框顏色(設置了透明度)
    planeLayer.cornerRadius    = 10;                                                            // 圓角值
    
    // 啟動定時器
    [self.m_timer event:^{
        
        static float degree = 0;
        
        //起始值
        CATransform3D fromValue = CATransform3DIdentity;
        
        fromValue.m34 = -1.f / 300;
        fromValue     = CATransform3DRotate(fromValue, degree, 0, 1, 0);
        
        // 結束值
        CATransform3D toValue = CATransform3DIdentity;
        
        toValue.m34 = -1.f / 300;
        toValue     = CATransform3DRotate(toValue, degree += 45.f, 0, 1, 0);
        
        // 添加3D動畫
        CABasicAnimation *transform3D = [CABasicAnimation animationWithKeyPath:@"transform"];
        
        transform3D.duration  = 1.f;
        transform3D.fromValue = [NSValue valueWithCATransform3D:fromValue];
        transform3D.toValue   = [NSValue valueWithCATransform3D:toValue];
        planeLayer.transform  = toValue;
        
        [planeLayer addAnimation:transform3D forKey:@"transform3D"];
        
    } timeIntervalWithSecs:1.f];
    
    [self.m_timer start];
}

@end

SecondViewController.m

#import "SecondViewController.h"

#import "GCD.h"
#import "UIView+SetRect.h"

#define DEGREE(d)            ((d) * M_PI / 180.0f)

@interface SecondViewController ()

@property (nonatomic, strong) GCDTimer  *m_timer1;
@property (nonatomic, strong) GCDTimer  *m_timer2;

@end

@implementation SecondViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];

    self.m_timer1 = [[GCDTimer alloc]initInQueue:[GCDQueue mainQueue]];
    self.m_timer2 = [[GCDTimer alloc]initInQueue:[GCDQueue mainQueue]];
    
    [self animateCALayer];
    
    [self animateCATransformLayer];
}

- (void)animateCALayer {
    
    // 普通的一個layer
    CALayer *planeLayer1        = [CALayer layer];
    planeLayer1.anchorPoint     = CGPointMake(0.5, 0.5);                                        // 錨點
    planeLayer1.frame           = (CGRect){CGPointZero, CGSizeMake(100, 100)};                  // 尺寸
    planeLayer1.position        = CGPointMake(self.view.centerX, self.view.centerY - 55);       // 位置
    planeLayer1.opacity         = 0.6;                                                          // 背景透明度
    planeLayer1.backgroundColor = [UIColor redColor].CGColor;                                   // 背景色
    planeLayer1.borderWidth     = 3;                                                            // 邊框寬度
    planeLayer1.borderColor     = [[UIColor whiteColor] colorWithAlphaComponent:0.5].CGColor;   // 邊框顏色(設置了透明度)
    planeLayer1.cornerRadius    = 10;                                                           // 圓角值
    
    // Z軸平移
    CATransform3D planeLayer1_3D = CATransform3DIdentity;
    planeLayer1_3D               = CATransform3DTranslate(planeLayer1_3D, 0, 0, -10);
    planeLayer1.transform        = planeLayer1_3D;
    
    // 普通的一個layer
    CALayer *planeLayer2        = [CALayer layer];
    planeLayer2.anchorPoint     = CGPointMake(0.5, 0.5);                                        // 錨點
    planeLayer2.frame           = (CGRect){CGPointZero, CGSizeMake(100, 100)};                  // 尺寸
    planeLayer2.position        = CGPointMake(self.view.centerX, self.view.centerY - 55);       // 位置
    planeLayer2.opacity         = 0.6;                                                          // 背景透明度
    planeLayer2.backgroundColor = [UIColor greenColor].CGColor;                                 // 背景色
    planeLayer2.borderWidth     = 3;                                                            // 邊框寬度
    planeLayer2.borderColor     = [[UIColor whiteColor] colorWithAlphaComponent:0.5].CGColor;   // 邊框顏色(設置了透明度)
    planeLayer2.cornerRadius    = 10;                                                           // 圓角值
    
    // Z軸平移
    CATransform3D planeLayer2_3D = CATransform3DIdentity;
    planeLayer2_3D               = CATransform3DTranslate(planeLayer2_3D, 0, 0, -30);
    planeLayer2.transform        = planeLayer2_3D;
    
    // 創(chuàng)建容器layer
    CALayer *container = [CALayer layer];
    container.frame    = self.view.bounds;
    [self.view.layer addSublayer:container];
    [container addSublayer:planeLayer1];
    [container addSublayer:planeLayer2];
    
    // 啟動定時器
    [self.m_timer1 event:^{
        static float degree = 0.f;
        
        // 起始值
        CATransform3D fromValue = CATransform3DIdentity;
        fromValue.m34           = 1.0/ -500;
        fromValue               = CATransform3DRotate(fromValue, degree, 0, 1, 0);
        
        // 結束值
        CATransform3D toValue   = CATransform3DIdentity;
        toValue.m34             = 1.0/ -500;
        toValue                 = CATransform3DRotate(toValue, degree += 45.f, 0, 1, 0);
        
        // 添加3d動畫
        CABasicAnimation *transform3D = [CABasicAnimation animationWithKeyPath:@"transform"];
        transform3D.duration  = 1.f;
        transform3D.fromValue = [NSValue valueWithCATransform3D:fromValue];
        transform3D.toValue   = [NSValue valueWithCATransform3D:toValue];
        container.transform = toValue;
        [container addAnimation:transform3D forKey:@"transform3D"];
        
    } timeIntervalWithSecs:1.f];
    
    [self.m_timer1 start];
}

- (void)animateCATransformLayer {

    // 普通的一個layer
    CALayer *planeLayer1        = [CALayer layer];
    planeLayer1.anchorPoint     = CGPointMake(0.5, 0.5);                                        // 錨點
    planeLayer1.frame           = (CGRect){CGPointZero, CGSizeMake(100, 100)};                  // 尺寸
    planeLayer1.position        = CGPointMake(self.view.centerX, self.view.centerY + 55);       // 位置
    planeLayer1.opacity         = 0.6;                                                          // 背景透明度
    planeLayer1.backgroundColor = [UIColor redColor].CGColor;                                   // 背景色
    planeLayer1.borderWidth     = 3;                                                            // 邊框寬度
    planeLayer1.borderColor     = [[UIColor whiteColor] colorWithAlphaComponent:0.5].CGColor;   // 邊框顏色(設置了透明度)
    planeLayer1.cornerRadius    = 10;                                                           // 圓角值
    
    // Z軸平移
    CATransform3D planeLayer1_3D = CATransform3DIdentity;
    planeLayer1_3D               = CATransform3DTranslate(planeLayer1_3D, 0, 0, -10);
    planeLayer1.transform        = planeLayer1_3D;
    
    // 普通的一個layer
    CALayer *planeLayer2        = [CALayer layer];
    planeLayer2.anchorPoint     = CGPointMake(0.5, 0.5);                                        // 錨點
    planeLayer2.frame           = (CGRect){CGPointZero, CGSizeMake(100, 100)};                  // 尺寸
    planeLayer2.position        = CGPointMake(self.view.centerX, self.view.centerY + 55);       // 位置
    planeLayer2.opacity         = 0.6;                                                          // 背景透明度
    planeLayer2.backgroundColor = [UIColor greenColor].CGColor;                                 // 背景色
    planeLayer2.borderWidth     = 3;                                                            // 邊框寬度
    planeLayer2.borderColor     = [[UIColor whiteColor] colorWithAlphaComponent:0.5].CGColor;   // 邊框顏色(設置了透明度)
    planeLayer2.cornerRadius    = 10;                                                           // 圓角值
    
    // Z軸平移
    CATransform3D planeLayer2_3D = CATransform3DIdentity;
    planeLayer2_3D               = CATransform3DTranslate(planeLayer2_3D, 0, 0, -30);
    planeLayer2.transform        = planeLayer2_3D;
    
    // 創(chuàng)建容器layer
    CATransformLayer *container = [CATransformLayer layer];
    container.frame    = self.view.bounds;
    [self.view.layer addSublayer:container];
    [container addSublayer:planeLayer1];
    [container addSublayer:planeLayer2];
    
    // 啟動定時器
    [self.m_timer2 event:^{
        static float degree = 0.f;
        
        // 起始值
        CATransform3D fromValue = CATransform3DIdentity;
        fromValue.m34           = 1.0/ -500;
        fromValue               = CATransform3DRotate(fromValue, degree, 0, 1, 0);
        
        // 結束值
        CATransform3D toValue   = CATransform3DIdentity;
        toValue.m34             = 1.0/ -500;
        toValue                 = CATransform3DRotate(toValue, degree += 45.f, 0, 1, 0);
        
        // 添加3d動畫
        CABasicAnimation *transform3D = [CABasicAnimation animationWithKeyPath:@"transform"];
        transform3D.duration  = 1.f;
        transform3D.fromValue = [NSValue valueWithCATransform3D:fromValue];
        transform3D.toValue   = [NSValue valueWithCATransform3D:toValue];
        container.transform = toValue;
        [container addAnimation:transform3D forKey:@"transform3D"];
        
    } timeIntervalWithSecs:1.f];
    
    [self.m_timer2 start];
}

下載源碼

下載地址

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,872評論 25贊 709
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一種新的協(xié)議。它實...
    香橙柚子閱讀 24,725評論 8贊 183
  • 文/樓蘭格格 “肉丸，撒尿牛丸，蘑菇，魚豆腐……外加一包重慶火鍋料，啊，完美！”蘇小曉做了個金星標準動作，引得超市...
    陪伴你的喵小喵閱讀 411評論 0贊 0
  • 剛入前端坑，英語又不太好的同學，是不是還在為控制臺的錯誤抓耳撓腮？今天就帶大家看一看JavaScript中常見的錯...
    晌風閱讀 3,458評論 1贊 4
  • 一個多小時的電影，開頭十幾分鐘，結尾幾分鐘，請原諒，我不要臉的睡著了。 文藝界已經(jīng)不是文藝界了，是綜藝...
    七只翅膀閱讀 216評論 0贊 1

友情鏈接更多精彩內容