博客> 钟表动画
钟表动画
2019-03-21 07:35 评论:0 阅读:807 诸葛亮倒骑小毛驴
ios 钟表动画

// CZViewController.m // 04-定位点动画(时钟动画) // // Created by apple on 16/07/14. // Copyright (c) 2014年 itcast. All rights reserved. //

效果图

import "CZViewController.h"

@interface CZViewController () // 钟表 @property (nonatomic, strong) UIView clockView; // 秒针 @property (nonatomic, strong) UIView secondView; // 分针 @property (nonatomic, strong) UIView minuteView; // 时针 @property (nonatomic, strong) UIView hourView; // 固定的钉 @property (nonatomic, strong) UIView *nailView; @end

@implementation CZViewController /**

  1. 画钟表
  2. 画秒针
  3. 时钟动画让秒针旋转 */

//懒加载创建表盘

  • (UIView *)clockView { if (_clockView == nil) { //实例化表盘 _clockView = [[UIView alloc] initWithFrame:CGRectMake(60, 100, 200, 200)]; //设置表盘背景图片 _clockView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"42d75fd82eafc032a86bfd4eff1cd4bc"]]; //设置表盘图层圆角半径 _clockView.layer.cornerRadius = 100; //设置表盘图层边线 _clockView.layer.borderColor = [UIColor darkGrayColor].CGColor; //边框的宽 _clockView.layer.borderWidth = 3.0;

    // 秒针
    _secondView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 2.0, 100.0)];

    // _secondView.center = CGPointMake(100, 55); // center本质上就是layer的position _secondView.center = CGPointMake(100, 100);//中心点 _secondView.layer.anchorPoint = CGPointMake(0.5, 0.75);//定位点 _secondView.backgroundColor = [UIColor redColor];//颜色

    // 分针
    _minuteView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 4.0, 80.0)];
    //        _secondView.center = CGPointMake(100, 55);
    // center本质上就是layer的position
    _minuteView.center = CGPointMake(100, 100);
    _minuteView.layer.anchorPoint = CGPointMake(0.5, 0.85);
    _minuteView.backgroundColor = [UIColor blackColor];
    _hourView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 6.0, 60.0)];
    //        _secondView.center = CGPointMake(100, 55);
    
    //时针
    // center本质上就是layer的position
    _hourView.center = CGPointMake(100, 100);
    _hourView.layer.anchorPoint = CGPointMake(0.5, 0.9);
    _hourView.backgroundColor = [UIColor blackColor];
    
    //实例化钉
    _nailView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 6, 6)];
    //中心点
    _nailView.center = _hourView.center;
    //背景颜色
    _nailView.backgroundColor = [UIColor yellowColor];
    //设置钉圆角半径
    _nailView.layer.cornerRadius = 3;
    //设置钉边线
    _nailView.layer.borderColor = [UIColor orangeColor].CGColor;
    //边框的宽
    _nailView.layer.borderWidth = 1.0;
    //把三个针 添加到表盘上
    [_clockView addSubview:_hourView];
    [_clockView addSubview:_minuteView];
    [_clockView addSubview:_secondView];
    [_clockView addSubview:_nailView];
    //把表盘添加到view上
    [self.view addSubview:_clockView];

    } return _clockView; }

  • (void)viewDidLoad { [super viewDidLoad]; //设置背景颜色 self.view.backgroundColor = [UIColor lightGrayColor]; [self clockView];

    // 秒针旋转 // self.secondView.transform = CGAffineTransformMakeRotation(M_PI_2); // 时钟动画,定时器 // [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];

    //CADisplayLink也是一个定时器 用于刷新

    //声明一个定时器 // link默认是1/60 秒执行一次 CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateTimer)]; //执行定时器 把定时器放在主运行循环中执行 [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode]; }

define degree2angle(angle) ((angle) * M_PI / 180)

  • (void)updateTimer { // NSLog(@"%s", func);

    // 实例化日历对象 NSCalendar *calendar = [NSCalendar currentCalendar];

    // 获取当前时间的秒数 NSDateComponents comps = [calendar components:NSCalendarUnitSecond fromDate:[NSDate date]]; // 获取当前时间的分钟数 NSDateComponents minute = [calendar components:NSCalendarUnitMinute fromDate:[NSDate date]]; // 获取当前时间的分钟数 NSDateComponents *hour = [calendar components:NSCalendarUnitHour fromDate:[NSDate date]]; // NSLog(@"%.2f", 10/0.3);

    // 设置秒针的旋转 CGFloat angle = degree2angle(comps.second 360 / 60); self.secondView.transform = CGAffineTransformMakeRotation(angle); // 设置分针的旋转 CGFloat angleM = degree2angle(minute.minute 360 / 60); self.minuteView.transform = CGAffineTransformMakeRotation(angleM); // 设置时针的旋转 CGFloat angleH = degree2angle(hour.hour30 + minute.minute/10.0 5); self.hourView.transform = CGAffineTransformMakeRotation(angleH); // (hour30) + (minutes/10)6 }

@end

收藏
1
sina weixin mail 回到顶部