核心动画的使用 - 时钟

Posted 2021-02-09 ch520

1、时钟

• 1、QClockView.h

  @interface QClockView : UIView
  
  /// 创建时钟界面
  + (instancetype)q_clockViewWithFrame:(CGRect)frame;
  
  @end

• 2、QClockView.m

  #define CLOCK_WIDTH self.bounds.size.width
  
  @interface QClockView ()
  
  // 表盘
  @property (nonatomic, strong) UIImageView *clockView;
  
  // 指针
  @property (nonatomic, strong) CALayer *secondLayer;
  @property (nonatomic, strong) CALayer *minuteLayer;
  @property (nonatomic, strong) CALayer *hourLayer;
  
  @end
  
  @implementation QClockView
  
  /// 创建时钟界面
  + (instancetype)q_clockViewWithFrame:(CGRect)frame {
  
      QClockView *clockView = [[self alloc] initWithFrame:frame];
      return clockView;
  }
  
  /// 初始化
  - (instancetype)initWithFrame:(CGRect)frame {
  if (self = [super initWithFrame:frame]) {
  
          // 添加表盘
          self.clockView = [[UIImageView alloc] init];
          self.clockView.image = [UIImage imageNamed:@"clock"];
          [self addSubview:self.clockView];
  
          // 添加定时器
          [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
  
          [self timeChange];
      }
      return self;
  }
  
  /// 布局子控件
  - (void)layoutSubviews {
      [super layoutSubviews];
  
      self.clockView.frame = self.bounds;
  }
  
  // 定时器响应事件处理
  - (void)timeChange {
  
      // 获取当前的系统的时间
  
      // 获取当前日历对象
      NSCalendar *calendar = [NSCalendar currentCalendar];
  
      // 获取日期的组件：年月日小时分秒
      NSDateComponents  *cmp = [calendar components:NSCalendarUnitSecond |
                                                    NSCalendarUnitMinute |
                                                    NSCalendarUnitHour
                                                    fromDate:[NSDate date]];
  
      // 获取秒
      NSInteger second = cmp.second + 1;
  
      // 获取分
      NSInteger minute = cmp.minute;
  
      // 获取小时
      NSInteger hour = cmp.hour;
  
      // 计算秒针转多少度，一秒钟秒针转 6°
      CGFloat secondA = second * 6;
  
      // 计算分针转多少度，一分钟分针转 6°
      CGFloat minuteA = minute * 6;
  
      // 计算时针转多少度，一小时时针转 30°，每分钟时针转 0.5°
      CGFloat hourA = hour * 30 + minute * 0.5;
  
      // 旋转秒针，使用 layer 的隐式动画属性产生动画效果
      self.secondLayer.transform = CATransform3DMakeRotation(secondA / 180 * M_PI, 0, 0, 1);
  
      // 旋转分针
      self.minuteLayer.transform = CATransform3DMakeRotation(minuteA / 180 * M_PI, 0, 0, 1);
  
      // 旋转小时
      self.hourLayer.transform = CATransform3DMakeRotation(hourA / 180 * M_PI, 0, 0, 1);
  }
  
  // 添加秒针
  - (CALayer *)secondLayer {
  
      if (_secondLayer == nil) {
  
          _secondLayer = [CALayer layer];
          _secondLayer.backgroundColor = [UIColor redColor].CGColor;
  
          _secondLayer.anchorPoint = CGPointMake(0.5, 1);
          _secondLayer.position = CGPointMake(CLOCK_WIDTH * 0.5, CLOCK_WIDTH * 0.5);
          _secondLayer.bounds = CGRectMake(0, 0, 1, CLOCK_WIDTH * 0.5 - 20);
  
          [self.clockView.layer addSublayer:_secondLayer];
      }
      return _secondLayer;
  }
  
  // 添加分针
  - (CALayer *)minuteLayer {
  
      if (_minuteLayer == nil) {
  
          _minuteLayer = [CALayer layer];
          _minuteLayer.backgroundColor = [UIColor blackColor].CGColor;
  
          _minuteLayer.anchorPoint = CGPointMake(0.5, 1);
          _minuteLayer.position = CGPointMake(CLOCK_WIDTH * 0.5, CLOCK_WIDTH * 0.5);
          _minuteLayer.bounds = CGRectMake(0, 0, 4, CLOCK_WIDTH * 0.5 - 20);
          _minuteLayer.cornerRadius = 2;
  
          [self.clockView.layer addSublayer:_minuteLayer];
      }
      return _minuteLayer;
  }
  
  // 添加时针
  - (CALayer *)hourLayer {
  
      if (_hourLayer == nil) {
  
          _hourLayer = [CALayer layer];
          _hourLayer.backgroundColor = [UIColor blackColor].CGColor;
  
          _hourLayer.anchorPoint = CGPointMake(0.5, 1);
          _hourLayer.position = CGPointMake(CLOCK_WIDTH * 0.5, CLOCK_WIDTH * 0.5);
          _hourLayer.bounds = CGRectMake(0, 0, 4, CLOCK_WIDTH * 0.5 - 40);
          _hourLayer.cornerRadius = 2;
  
          [self.clockView.layer addSublayer:_hourLayer];
      }
      return _hourLayer;
  }
  
  @end

• 3、ViewController.m

  // 创建时钟界面
  QClockView *clockView = [QClockView q_clockViewWithFrame:CGRectMake(100, 100, 200, 200)];
  [self.view addSubview:clockView];

• 4、效果