iOS边练边学--CALayer,非根层隐式动画,钟表练习

Posted Chaos_G

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS边练边学--CALayer,非根层隐式动画,钟表练习相关的知识,希望对你有一定的参考价值。

一、CALayer

  • UIView之所以能显示在屏幕上,完全是因为他内部的一个图层
  • 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层
  • 当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘制,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示
  • UIView本身不具备显示的功能,是他内部的层才有显示功能

二、CALayer的基本使用

   

三、关于CALayer的疑惑---用CGImage、CGColor 而不用UIImage、UIColor

  • 首先CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
  • UIColor、UIImage是定义在UIKit框架中
  • 其次QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在ios和Mac OS X上都能使用,但是UIKit只能在iOS中使用
  • 为了保证可移植性,QuartzCore不能使用UIImage、UIColor,只能使用CGImageRef、CGColorRef

四、UIView和CALayer的选择

  • 既然CALayer和UIView都能实现相同的显示效果,那究竟该选择谁好呢?
    • 其实,对比CALayer,UIView多了一个事件处理的功能。也就是说,CALayer不能处理用户的触摸事件,而UIView可以
    • 所以,如果显示出来的东西需要跟用户进行交互的话,用UIView;如果不需要跟用户进行交互,用UIView或者CALayer都可以
    • 当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级
  • 下面是创建新CALayer的代码,来展示图片

五、CALayer的两个重要属性 position 和 anchorPoint

  • @property CGPoint position;
    • 用来设置CALayer在父层中的位置
    • 以父层的左上角为原点(0,0)
  • @property CGPoint anchorPoint;
    • 称为“定位点”、“锚点”
    • 决定着CALayer身上的那个点会在position属性所指的位置
    • 以自己的左上角为原点(0,0)
    • 他的x、y取值范围都是0~1,默认值为(0.5,0.5)

六、非根层的隐式动画

  • 每一个UIView内部都默认关联着一个CALayer,我们可以称这个Layer为Root Layer(根层)
  • 所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画

  什么是隐式动画?

  当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果

  而这些属性称为Animatable Properties(可动画属性)

  • 代码中实现的是点击屏幕,CALayer的圆角,颜色,position,边框等随机改变并做动画
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    CALayer *layer = [CALayer layer];
    layer.bounds = CGRectMake(0, 0, 80, 80);
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.anchorPoint = CGPointMake(0, 0);
    layer.position = CGPointMake(150, 300);
    
    [self.view.layer addSublayer:layer];
    _layer = layer;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    _layer.transform = CATransform3DMakeRotation(angle2rotation(arc4random_uniform(360)), 0, 0, 1);
    
    
    _layer.backgroundColor = [self randomColor].CGColor;
    
    _layer.position = CGPointMake(arc4random_uniform(300) + 100, arc4random_uniform(500) + 100);
    _layer.borderWidth = arc4random_uniform(20);
    _layer.borderColor = [self randomColor].CGColor;
    _layer.cornerRadius = arc4random_uniform(50);
}

- (UIColor *)randomColor
{
    CGFloat r = arc4random_uniform(256) / 255.0;
    CGFloat g = arc4random_uniform(256) / 255.0;
    CGFloat b = arc4random_uniform(256) / 255.0;
    return [UIColor colorWithRed:r green:g blue:b alpha:1];
}

七、钟表的练习--难点是通过NSCalendar获取当前时间

  1 #import "ViewController.h"
  2 // 通过秒数计算秒针转过的角度
  3 #define secondRotation(second) ((second * 6) / 180.0 * M_PI)
  4 // 通过分数计算分针转过的角度
  5 #define minuteRotation(minute) ((minute * 6) / 180.0 * M_PI)
  6 // 通过时数计算时针转过的角度
  7 #define hourRotation(hour) ((hour * 30) / 180.0 * M_PI)
  8 
  9 @interface ViewController ()
 10 @property (weak, nonatomic) IBOutlet UIImageView *clockView;
 11 /** second */
 12 @property(nonatomic,strong) CALayer *secondL;
 13 /** minute */
 14 @property(nonatomic,strong) CALayer *minuteL;
 15 /** hour */
 16 @property(nonatomic,strong) CALayer *hourL;
 17 @end
 18 
 19 @implementation ViewController
 20 
 21 - (void)viewDidLoad {
 22     [super viewDidLoad];
 23     
 24     // 添加秒针
 25     [self setUpSecondLayer];
 26     
 27     // 添加时针
 28     [self setUpHourLayer];
 29     
 30     // 添加分针
 31     [self setUpMinuteLayer];
 32     [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
 33     [self timeChange];
 34 }
 35 
 36 - (void)timeChange
 37 {
 38     // 获取当前时间,通过秒数计算秒针的旋转弧度
 39     // 当前的日历对象,从日历对象中获取时间组件
 40     NSCalendar *calendar = [NSCalendar currentCalendar];
 41     
 42     // 日历组件包含了:年月日时分秒等
 43     // 经验:以后枚举中有移位运算符,通常可以使用并运算(|)
 44     NSDateComponents *compontent = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
 45     
 46     NSInteger second = compontent.second;
 47     NSInteger minute = compontent.minute;
 48     NSInteger hour = compontent.hour;
 49     
 50     _hourL.transform = CATransform3DMakeRotation(hourRotation(hour) + minuteRotation(minute) / 12, 0, 0, 1);
 51     _minuteL.transform = CATransform3DMakeRotation(minuteRotation(minute) + secondRotation(second) / 60, 0, 0, 1);
 52     _secondL.transform = CATransform3DMakeRotation(secondRotation(second), 0, 0, 1);
 53 
 54 }
 55 
 56 - (void)setUpHourLayer
 57 {
 58     // 获取钟表的宽高
 59     CGFloat clockWH = _clockView.frame.size.height * 0.5;
 60     // 创建时针的图层
 61     CALayer *hourL = [CALayer layer];
 62     hourL.bounds = CGRectMake(0, 0, 6, clockWH - 40);
 63     hourL.backgroundColor = [UIColor blackColor].CGColor;
 64     hourL.position = CGPointMake(clockWH, clockWH);
 65     hourL.anchorPoint = CGPointMake(0.5, 1);
 66     hourL.cornerRadius = 3;
 67     
 68     [_clockView.layer addSublayer:hourL];
 69     _hourL = hourL;
 70 }
 71 
 72 - (void)setUpMinuteLayer
 73 {
 74     // 获取钟表的宽高
 75     CGFloat clockWH = _clockView.frame.size.height * 0.5;
 76     // 创建分针的图层
 77     CALayer *minuteL = [CALayer layer];
 78     minuteL.bounds = CGRectMake(0, 0, 6, clockWH - 30);
 79     minuteL.backgroundColor = [UIColor blackColor].CGColor;
 80     minuteL.position = CGPointMake(clockWH, clockWH);
 81     minuteL.anchorPoint = CGPointMake(0.5, 1);
 82     minuteL.cornerRadius = 3;
 83     
 84     [_clockView.layer addSublayer:minuteL];
 85     _minuteL = minuteL;
 86 }
 87 
 88 - (void)setUpSecondLayer
 89 {
 90     // 获取钟表的宽高
 91     CGFloat clockWH = _clockView.frame.size.height * 0.5;
 92     // 创建秒针的图层
 93     CALayer *secondL = [CALayer layer];
 94     secondL.bounds = CGRectMake(0, 0, 2, clockWH - 20);
 95     secondL.backgroundColor = [UIColor redColor].CGColor;
 96     secondL.position = CGPointMake(clockWH, clockWH);
 97     secondL.anchorPoint = CGPointMake(0.5, 1);
 98     
 99     [_clockView.layer addSublayer:secondL];
100     _secondL = secondL;
101 }
102 
103 - (void)didReceiveMemoryWarning {
104     [super didReceiveMemoryWarning];
105     // Dispose of any resources that can be recreated.
106 }
107 
108 @end
View Code

 

 

以上是关于iOS边练边学--CALayer,非根层隐式动画,钟表练习的主要内容,如果未能解决你的问题,请参考以下文章

iOS边练边学--图片的拉伸

iOS边练边学--UITableView性能优化

iOS边练边学--UITabBarController的简单使用

iOS边练边学--xib文件初使用

iOS边练边学--介绍布局的三种方法

iOS边练边学--tableView的批量操作