ios开发核心动画三：隐式动画与时钟效果

Posted 2020-08-06 Hello_IOS

一：隐式动画

#import "ViewController.h"

@interface ViewController ()

/** <#注释#> */
@property (nonatomic, weak)  CALayer *layer;
@property (weak, nonatomic) IBOutlet UIView *redView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    
    
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.frame = CGRectMake(50, 50, 100, 100);
    self.layer = layer;
    [self.view.layer addSublayer:layer];
    
    
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    //只有非根层才有隐式动画,(自己手动创建的图片)
    [CATransaction begin];
    [CATransaction setDisableActions:NO];//此属性可设置关掉隐士动画
    [CATransaction setAnimationDuration:5];
    self.layer.backgroundColor = [UIColor greenColor].CGColor;
    [CATransaction commit];
    
    self.layer.bounds = CGRectMake(0, 0, 90, 90);
    self.layer.backgroundColor = [UIColor greenColor].CGColor;
    self.layer.position = CGPointMake(100, 400);
    
    
    self.redView.layer.position = CGPointMake(300, 400);
    self.redView.layer.bounds = CGRectMake(0, 0, 100, 100);
    self.redView.layer.backgroundColor = [UIColor greenColor].CGColor;
    
}


@end

 

什么是隐式动画?

了解什么是隐式动画前,要先了解是什么根层和非根层.

根层:UIView内部自动关联着的那个layer我们称它是根层.

非根层:自己手动创建的层,称为非根层.

 

隐式动画就是当对非根层的部分属性进行修改时, 它会自动的产生一些动画的效果.

我们称这个默认产生的动画为隐式动画.

 

如何取消隐式动画?

首先要了解动画底层是怎么做的.动画的底层是包装成一个事务来进行的.

什么是事务?

很多操作绑定在一起,当这些操作执行完毕后,才去执行下一个操作.

 

开启事务

[CATransaction begin];

设置事务没有动画

[CATransaction setDisableActions:YES];

设置动画执行的时长

[CATransaction setAnimationDuration:2];

 提交事务

 [CATransaction commit];

 

二：时钟效果：

效果如图：

#import "ViewController.h"

//每一秒旋转的度数
#define perSecA 6

//每一分旋转的度数
#define perMinA 6

//每一小时旋转的度数
#define perHourA 30

//每一分,时针旋转的度数
#define perMinHour 0.5


#define angle2Rad(angle) ((angle) / 180.0 * M_PI)

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *colockView;

/** 当前的秒针 */
@property (nonatomic, weak)   CALayer *secL;
/** 当前的分针 */
@property (nonatomic, weak)   CALayer *minL;
/** 当前的针针 */
@property (nonatomic, weak)   CALayer *hourL;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //添加时针
    [self setHour];
    
    //添加分针
    [self setMin];
    //添加秒针
    [self setSec];
    
    
    //添加定时器：scheduledTimerWithTimeInterval不用加到runLoop，因为已经默认添加到了runLoop
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
    //添加的定时器不会立即执行，而是过一秒才会执行，此时可以调用定时器的fire方法，立即执行，也可以手动调用定时器的方法
    [self timeChange];
}

//第一称调用一次
- (void)timeChange {
    
    
    
    NSCalendar *cal = [NSCalendar currentCalendar];
    //components:日历的组件,年,月,日 ,时,分,秒.
    //fromDate:从什么时间开始获取
    NSDateComponents *cmp = [cal components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour  fromDate:[NSDate date]];
    //获取当前多少秒
    NSInteger curSec = cmp.second + 1;
    
    
    //秒针开始旋转
    //计算秒针当前旋转的角度.
    //angle  = 当前多少秒 * 每一秒旋转多少度.
    /**
     *    CATransform3DMakeRotation:3D旋转：1：必须是在layear层才能进行3D旋转，用transform，旋转的角度为弧度制，2：#define angle2Rad(angle) ((angle) / 180.0 * M_PI) 3：分xyz轴，
     */
    CGFloat secA = curSec * perSecA;
    self.secL.transform = CATransform3DMakeRotation(angle2Rad(secA), 0, 0, 1);
    
    
    //获取当前多少秒
    NSInteger curMin = cmp.minute;
    NSLog(@"%ld",curMin);
    //分针开始旋转
    //计算分针当前旋转的角度.
    //angle  = 当前多少分 * 每一分旋转多少度.
    CGFloat minA = curMin * perMinA;
    self.minL.transform = CATransform3DMakeRotation(angle2Rad(minA), 0, 0, 1);
    
    //获取当前是多少小时
    NSInteger curHour = cmp.hour;
    NSLog(@"%ld",curMin);
    //分针开始旋转
    //计算分针当前旋转的角度.
    //angle  = 当前多少小时 * 每一小时旋转多少度.
    CGFloat hourA = curHour * perHourA + curMin * perMinHour;
    self.hourL.transform = CATransform3DMakeRotation(angle2Rad(hourA), 0, 0, 1);
    
    
}

/**
 *  1:搭建时针秒针分针的UI效果：1：UIView和CALayear是一样的效果，但是UIView比CALyear多了一个处理点击事件，则CALyear相对于UIView来说更加轻量级，更加高效 2：非根层的layear也就是自己创建的layear都存在隐士动画，要关闭隐式动画，用动画事物CATransaction去关闭：
    开启事务
 
    [CATransaction begin];
 
    设置事务没有动画
 
    [CATransaction setDisableActions:YES];
 
    设置动画执行的时长
 
    [CATransaction setAnimationDuration:2];
 
    提交事务
 
    [CATransaction commit];
 
  3：无论是旋转,缩放都是绕着锚点进行的.也就是默认情况下是绕着中心点center进行的。所以要改变其绕着最后的节点旋转，需要先定义好layear的position，在定义锚点，最后的效果是锚点与point点重合。position的位置为表盘的中心点，锚点的默认位置为0.5 ，0.5,修改表盘的锚点位置让锚点与position点重合，这样旋转的时候就会绕着锚点旋转。再把此layear添加到表盘的layear上。
 *
 *
 */

//添加秒针
//无论是旋转,缩放都是绕着锚点进行的.
- (void)setSec {
    
    CALayer *secL = [CALayer layer];
    secL.bounds = CGRectMake(0, 0, 1, 80);
    secL.backgroundColor = [UIColor redColor].CGColor;
    secL.anchorPoint = CGPointMake(0.5, 1);
    secL.position = CGPointMake(self.colockView.bounds.size.width * 0.5, self.colockView.bounds.size.height * 0.5);
    [self.colockView.layer addSublayer:secL];
    self.secL = secL;
    
}

//添加分针
- (void)setMin {
    
    CALayer *minL = [CALayer layer];
    minL.bounds = CGRectMake(0, 0, 3, 70);
    minL.backgroundColor = [UIColor blackColor].CGColor;
    minL.anchorPoint = CGPointMake(0.5, 1);
    minL.cornerRadius = 1.5;
    minL.position = CGPointMake(self.colockView.bounds.size.width * 0.5, self.colockView.bounds.size.height * 0.5);
    [self.colockView.layer addSublayer:minL];
    self.minL = minL;
    
}

//时针
- (void)setHour {
    
    CALayer *hourL = [CALayer layer];
    hourL.bounds = CGRectMake(0, 0, 3, 50);
    hourL.backgroundColor = [UIColor blackColor].CGColor;
    hourL.anchorPoint = CGPointMake(0.5, 1);
    hourL.cornerRadius = 1.5;
    hourL.position = CGPointMake(self.colockView.bounds.size.width * 0.5, self.colockView.bounds.size.height * 0.5);
    [self.colockView.layer addSublayer:hourL];
    self.hourL = hourL;
    
}




//-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
//
//    //所有旋转,缩放,都是绕着锚点进行.
//    self.secL.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
//}

@end

1.搭建界面.

分析界面.

界面上时针,分针,秒针不需要与用户进行交互.所以都可以使用layer方式来做.

做之前要观察时针在做什么效果.

是根据当前的时间,绕着表盘的中心点进行旋转.

要了解一个非常重要的知识点.无论是旋转,缩放它都是绕着锚点.进行的.

 

要想让时针,分针,称针显示的中间,还要绕着中心点进行旋转.

那就要设置它的position和anchorPoint两个属性.

 

 

创建秒针

    CALayer *layer = [CALayer layer];

    _secLayer = layer;

    layer.bounds = CGRectMake(0, 0, 1, 80);

    layer.anchorPoint = CGPointMake(0.5, 1);

    layer.position = CGPointMake(_clockView.bounds.size.width * 0.5, _clockView.bounds.size.height * 0.5);

    layer.backgroundColor = [UIColor redColor].CGColor;

    [_clockView.layer addSublayer:layer];

   

   

2.让秒针开始旋转.

 

让秒针旋转.所以要计算当前的旋转度是多少?

当前的旋转角度为:当前的时间 * 每秒旋转多少度.

 

计算每一秒旋转多少度.

60秒转一圈360度

360 除以60就是每一秒转多少度.每秒转6度.

 

获取当前的时间

创建日历类

        NSCalendar *calendar = [NSCalendar currentCalendar];

        把日历类转换成一个日期组件

        日期组件(年,月,日,时,分,秒)

        component:日期组件有哪些东西组成,他是一个枚举,里面有年月日时分秒

        fromDate:当前的日期

        NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond

            fromDate:[NSDate date]];

            

        我们的秒就是保存在日期组件里面,它里面提供了很多get方法.

        NSInteger second = cmp.second;

         

        那么当前秒针旋转的角度就是

        当前的秒数乘以每秒转多少度.

        second * perSecA 

        还得要把角度转换成弧度.

        

        因为下面分针,时针也得要用到, 就把它抽出一个速参数的宏.

        #define angle2Rad(angle) ((angle) / 180.0 * M_PI)

        

        让它每隔一秒旋转一次.所以添加一个定时器.

        每个一秒就调用,旋转秒针

         - (void)timeChange{

         获取当前的秒数

         创建日历类

         NSCalendar *calendar = [NSCalendar currentCalendar];

         把日历类转换成一个日期组件

         日期组件(年,月,日,时,分,秒)

         component:日期组件有哪些东西组成,他是一个枚举,里面有年月日时分秒

         fromDate:当前的日期

         NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond 

             fromDate:[NSDate date]];

         我们的秒就是保存在日期组件里面,它里面提供了很多get方法.

         NSInteger second = cmp.second;

         秒针旋转多少度.

         CGFloat angel = angle2Rad(second * perSecA);

         旋转秒针

         self.secondL.transform = CATransform3DMakeRotation(angel, 0, 0, 1);

         }

        运行发现他会一下只就调到某一个时间才开始旋转

        一开始的时候就要来到这个方法,获取当前的秒数把它定位好.

        要在添加定时器之后就调用一次timeChange方法.

        

 

3.添加分针

 

快速拷贝一下,然后添加一个分针成员属性.

        修改宽度,修改颜色

        也得要让它旋转,

        要算出每分钟转多少度

        转60分钟刚好是一圈

        所以每一分钟也是转6度.

        

        获取当前多少分?

        同样是在日期组件里面获得

        里面有左移符号,右移符号.他就可以用一个并运算

        现在同时让他支持秒数和分 后面直接加上一个 |

         NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond | 

         NSCalendarUnitMinute 

         fromDate:[NSDate date]];

         

        CGFloat minueteAngel = angle2Rad(minute * perMinuteA);

        self.minueL.transform = CATransform3DMakeRotation(minueteAngel, 0, 0, 1);

 

4.添加时针

 

  同样复制之前的,添加一个小时属性

         小时转多少度

         当前是多少小时,再计算先每一小时转多少度.

         12个小时转一圈. 360除以12,每小时转30度

         时针旋转多少度

         CGFloat hourAngel = angle2Rad(hour * perHourA);

         旋转时针

         self.hourL.transform = CATransform3DMakeRotation(hourAngel, 0, 0, 1);

            

        直接这样写会有问题

        就是没转一分钟,小时也会移动一点点

        接下来要算出,每一分钟,小时要转多少度

        60分钟一小时.一小时转30度.

        30 除以60,就是每一分钟,时针转多少度.0.5

 

        时针旋转多少度

        CGFloat hourAngel = angle2Rad(hour * perHourA + minute * perMinuteHourA);

        旋转时针

        self.hourL.transform = CATransform3DMakeRotation(hourAngel, 0, 0, 1);