【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;                                                           // 圆角值
    
    // 创建容器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;
    
    // 创建容器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;
    
    // 创建容器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];
}

下载源码

下载地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,679评论 25赞 709
  • iOS WebSocket长链接（Swift）
    WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,310评论 8赞 183
  • 香菜谁会爱
    文/楼兰格格 “肉丸，撒尿牛丸，蘑菇，鱼豆腐……外加一包重庆火锅料，啊，完美！”苏小晓做了个金星标准动作，引得超市...
    陪伴你的喵小喵阅读 2,806评论 0赞 0
  • JavaScript中的六种错误类型
    刚入前端坑，英语又不太好的同学，是不是还在为控制台的错误抓耳挠腮？今天就带大家看一看JavaScript中常见的错...
    晌风阅读 8,685评论 1赞 4
  • 超级快递
    一个多小时的电影，开头十几分钟，结尾几分钟，请原谅，我不要脸的睡着了。 文艺界已经不是文艺界了，是综艺...
    七只翅膀阅读 1,339评论 0赞 1