亚洲av成人无遮挡网站在线观看,少妇性bbb搡bbb爽爽爽,亚洲av日韩精品久久久久久,兔费看少妇性l交大片免费,无码少妇一区二区三区

Chinaunix

標(biāo)題: ios開發(fā)-UI進(jìn)階-核心動(dòng)畫-時(shí)鐘動(dòng)畫小案例 [打印本頁]
作者: ciscopuke    時(shí)間: 2015-06-16 09:44
標(biāo)題: ios開發(fā)-UI進(jìn)階-核心動(dòng)畫-時(shí)鐘動(dòng)畫小案例
轉(zhuǎn)載自   吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/
今天使用CALayer的"定位點(diǎn)(錨點(diǎn))"實(shí)現(xiàn)了一個(gè)時(shí)鐘動(dòng)畫,其實(shí)就是一個(gè)小的時(shí)鐘,只是實(shí)現(xiàn)了功能,沒有做出絢麗的效果.使用UIView實(shí)現(xiàn)的,其實(shí)只是單純的使用layer也可以實(shí)現(xiàn).主要用到了 Quartz2D畫圖\ 事件處理\核心動(dòng)畫方面的知識(shí).

　　代碼不是很多,直接附上源碼,注釋比較詳細(xì),在源碼后面再進(jìn)行解釋其中的一些知識(shí)點(diǎn)和注意點(diǎn).

　　下圖為應(yīng)用截圖,使用gif,沒有制作好,見諒哈.[此處圖片有一點(diǎn)小問題,時(shí)間顯示正常,指針處有點(diǎn)問題,代碼中修改過來了

下圖為模擬器與電腦時(shí)間對(duì)比圖,和正常時(shí)間一樣.

下面附上源代碼:

　　viewController.m
  1. //
  2.   2 //  ViewController.m
  3.   3 //  01-時(shí)鐘動(dòng)畫time
  4.   4 //
  5.   5 //  Created by hukezhu on 15/6/12.
  6.   6 //  Copyright (c) 2015年 hukezhu. All rights reserved.
  7.   7 //
  8.   8
  9.   9 #import "ViewController.h"
  10. 10
  11. 11 @interface ViewController ()
  12. 12 //秒針view
  13. 13 @property(nonatomic,strong)UIView *secondView;
  14. 14 //分針view
  15. 15 @property(nonatomic,strong)UIView *minView;
  16. 16 //時(shí)針view
  17. 17 @property(nonatomic,strong)UIView *hourView;
  18. 18 @end
  19. 19
  20. 20 @implementation ViewController
  21. 21
  22. 22 - (void)viewDidLoad {
  23. 23     [super viewDidLoad];
  24. 24     //設(shè)置背景顏色
  25. 25     self.view.backgroundColor = [UIColor greenColor];
  26. 26     
  27. 27     //創(chuàng)建一個(gè)表盤view
  28. 28     UIView *clockView = [[UIView alloc]init];
  29. 29     //設(shè)置位置
  30. 30     clockView.center = self.view.center;
  31. 31     //設(shè)置大小
  32. 32     clockView.layer.bounds = CGRectMake(0, 0, 214, 214);
  33. 33     
  34. 34     //設(shè)置顯示內(nèi)容
  35. 35     clockView.layer.contents = (__bridge id)([UIImage imageNamed:@"clock1"].CGImage);
  36. 36     //設(shè)置圓角半徑
  37. 37     clockView.layer.cornerRadius = 107;
  38. 38     //設(shè)置裁剪
  39. 39     clockView.layer.masksToBounds = YES;
  40. 40     //將clockView添加到控制器view中
  41. 41     [self.view addSubview:clockView];
  42. 42     
  43. 43     
  44. 44     
  45. 45     
  46. 46     //創(chuàng)建一個(gè)秒針view
  47. 47     UIView *secondView = [[UIView alloc]init];
  48. 48     secondView.center = clockView.center;
  49. 49     secondView.layer.bounds = CGRectMake(0, 0, 2, 90);
  50. 50     secondView.layer.backgroundColor = [UIColor redColor].CGColor;
  51. 51     secondView.layer.anchorPoint = CGPointMake(0.5, 1);
  52. 52     
  53. 53     self.secondView = secondView;
  54. 54     [self.view addSubview:secondView];
  55. 55     
  56. 56     
  57. 57     
  58. 58     //創(chuàng)建一個(gè)分針view
  59. 59     UIView *minView = [[UIView alloc]init];
  60. 60     minView.center = clockView.center;
  61. 61     minView.layer.bounds = CGRectMake(0, 0, 4, 70);
  62. 62     minView.layer.backgroundColor = [UIColor blueColor].CGColor;
  63. 63     minView.layer.anchorPoint = CGPointMake(0.5, 1);
  64. 64
  65. 65     self.minView = minView;
  66. 66     [self.view addSubview:minView];
  67. 67     
  68. 68     
  69. 69     
  70. 70     //創(chuàng)建一個(gè)時(shí)針view
  71. 71     UIView *hourView = [[UIView alloc]init];
  72. 72     hourView.center = clockView.center;
  73. 73     hourView.layer.bounds = CGRectMake(0, 0, 6, 50);
  74. 74     hourView.layer.backgroundColor = [UIColor blackColor].CGColor;
  75. 75     hourView.layer.anchorPoint = CGPointMake(0.5, 1);
  76. 76     
  77. 77     self.hourView = hourView;
  78. 78     [self.view addSubview:hourView];
  79. 79     
  80. 80
  81. 81     // 開啟一個(gè)計(jì)時(shí)器控件
  82. 82     //NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(move) userInfo:nil repeats:YES];
  83. 83     //創(chuàng)建一個(gè)對(duì)象
  84. 84     CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(move)];
  85. 85     //啟動(dòng)這個(gè)link
  86. 86     [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
  87. 87 }
  88. 88
  89. 89
  90. 90 - (void)move{
  91. 91
  92. 92     
  93. 93     //1.計(jì)算對(duì)應(yīng)的弧度
  94. 94     CGFloat angle = M_PI * 2 / 60.0;
  95. 95     CGFloat angleMin = M_PI * 2 / 60.0;
  96. 96     CGFloat angleHour = M_PI * 2 / 12.0 ;
  97. 97     
  98. 98     //2.獲取當(dāng)前事件
  99. 99     NSDate *date = [NSDate date];
  100. 100     
  101. 101     //創(chuàng)建一個(gè)日歷牌對(duì)象(NSCalender),通過這個(gè)對(duì)象才能獲取NSDate中的日期時(shí)間的每一部分
  102. 102     NSCalendar *calender = [NSCalendar currentCalendar];
  103. 103     
  104. 104     //告訴日歷牌對(duì)象,需要獲取哪些部分的值
  105. 105     
  106. 106     //取得當(dāng)前的秒
  107. 107     NSInteger secs = [calender component:NSCalendarUnitSecond fromDate:date];
  108. 108     //取得當(dāng)前的分
  109. 109     NSInteger mins = [calender component:NSCalendarUnitMinute fromDate:date];
  110. 110     //取得當(dāng)前的時(shí)
  111. 111     NSInteger hours = [calender component:NSCalendarUnitHour fromDate:date];
  112. 112     
  113. 113     
  114. 114     //NSLog(@"%zd,%zd,%zd",hours,mins,secs);//測試用
  115. 115     
  116. 116     
  117. 117     //計(jì)算本次旋轉(zhuǎn)應(yīng)該旋轉(zhuǎn)到的弧度數(shù)
  118. 118     angle = secs *angle;
  119. 119     angleMin = mins *angleMin + angle/60.0;
  120. 120     angleHour = hours *angleHour + angleMin/12.0  ;
  121. 121
  122. 122     //讓時(shí)分秒針旋轉(zhuǎn)
  123. 123     self.secondView.transform = CGAffineTransformMakeRotation(angle);
  124. 124     self.minView.transform = CGAffineTransformMakeRotation(angleMin);
  125. 125     self.hourView.transform = CGAffineTransformMakeRotation(angleHour);
  126. 126
  127. 127 }
  128. 128
  129. 129 @end
復(fù)制代碼
當(dāng)然,這里面的表盤使用的時(shí)圖片,我們也可以自己畫出來,但是此處有圖片資源,就直接使用了.(注意需要剪切圖片為圓形,當(dāng)然,有方形的表盤,但是此處是圓形表盤,所以將圖片切割成圓形).

　　注意:可以使用NSTimer創(chuàng)建一個(gè)定時(shí)器,但是通過 NSTimer 實(shí)現(xiàn)的動(dòng)畫可能造成卡頓、不連貫的情況（NSTimer 不準(zhǔn)確）,此處使用CADisplayLink.



　　主要思路就是:

設(shè)置view的背景
創(chuàng)建一個(gè)表示表盤的view,設(shè)置表盤view的大小和位置,在contents屬性中設(shè)置圖片,根據(jù)圓角半徑的知識(shí),使用masksToBounds進(jìn)行剪切,將這個(gè)view加到控制器的view中
分別創(chuàng)建一個(gè)秒針\分針\時(shí)針的view,分別設(shè)置大小和位置,設(shè)置顏色,等屬性,分別將view加入到控制器的view中.
創(chuàng)建一個(gè)CADisplayLink對(duì)象,(CADisplayLink能提供一個(gè)周期性調(diào)用賦值給它的selector的機(jī)制，很像定時(shí)器NSTimer)
實(shí)現(xiàn)上述CADisplayLink對(duì)象中添加的move方法
在move方法中,計(jì)算所轉(zhuǎn)的弧度,通過日歷牌對(duì)象(NSCalender),獲取NSDate中的日期時(shí)間的每一部分
進(jìn)行旋轉(zhuǎn),完畢!
獲取當(dāng)前系統(tǒng)中的時(shí)間的某一部分的方法
  1. //2.獲取當(dāng)前事件
  2. 2     NSDate *date = [NSDate date];
  3. 3     
  4. 4     //創(chuàng)建一個(gè)日歷牌對(duì)象(NSCalender),通過這個(gè)對(duì)象才能獲取NSDate中的日期時(shí)間的每一部分
  5. 5     NSCalendar *calender = [NSCalendar currentCalendar];
  6. 6     
  7. 7     //告訴日歷牌對(duì)象,需要獲取哪些部分的值
  8. 8     
  9. 9     //取得當(dāng)前的秒
  10. 10     NSInteger secs = [calender component:NSCalendarUnitSecond fromDate:date];
  11. 11     //取得當(dāng)前的分
  12. 12     NSInteger mins = [calender component:NSCalendarUnitMinute fromDate:date];
  13. 13     //取得當(dāng)前的時(shí)
  14. 14     NSInteger hours = [calender component:NSCalendarUnitHour fromDate:date];
  15. 15     
  16. 16     
  17. 17     //NSLog(@"%zd,%zd,%zd",hours,mins,secs);//測試用
復(fù)制代碼
知識(shí)點(diǎn):

　　 注意: 在使用 Quartz2D 繪圖的時(shí)候, 對(duì)繪圖上下文的旋轉(zhuǎn)是對(duì)坐標(biāo)系的旋轉(zhuǎn), 通過 UI 控件的 transform 對(duì)控件做旋轉(zhuǎn)是按照 Center 來旋轉(zhuǎn)的。
　　 注意: 控件的 center 屬性, 其實(shí)就是對(duì)應(yīng)的 CALayer的 postion。所以控件的 center并不是永遠(yuǎn)表示控件的中心點(diǎn)。
ALayer有2個(gè)非常重要的屬性：position和anchorPoint
　　　　position:
　　　　　　@property CGPoint position;
　　　　　　用來設(shè)置CALayer在父層中的位置
　　　　　　以父層的左上角為原點(diǎn)(0, 0)


　　　　anchorPoint:
　　　　　　@property CGPoint anchorPoint;
　　　　　　稱為“定位點(diǎn)”、“錨點(diǎn)”
　　　　　　決定著CALayer的position屬性所指的是哪個(gè)點(diǎn)
　　　　　　以自己的左上角為原點(diǎn)(0, 0)
　　　　　　它的x、y取值范圍都是0~1，默認(rèn)值為（0.5, 0.5）


CALayer:
　　　　

　　　　UIView之所以能顯示在屏幕上，完全是因?yàn)樗鼉?nèi)部的一個(gè)圖層
　　　　
　　　　在創(chuàng)建UIView對(duì)象時(shí)，UIView內(nèi)部會(huì)自動(dòng)創(chuàng)建一個(gè)圖層(即CALayer對(duì)象)，通過UIView的layer屬性可以訪問這個(gè)層
　　　　 1 @property(nonatomic,readonly,retain) CALayer *layer;  
　　　　
　　　　當(dāng)UIView需要顯示到屏幕上時(shí)，會(huì)調(diào)用drawRect:方法進(jìn)行繪圖，并且會(huì)將所有內(nèi)容繪制在自己的圖層上，繪圖完畢后，系統(tǒng)會(huì)將圖層拷貝到屏幕上，于是就完成　　　　了UIView的顯示.

　　　 CALayer的一些屬性
  1. //寬度和高度
  2. @property CGRect bounds;

  4. //位置(默認(rèn)指中點(diǎn)，具體由anchorPoint決定)
  5. @property CGPoint position;

  7. //錨點(diǎn)(x,y的范圍都是0-1)，決定了position的含義
  8. @property CGPoint anchorPoint;

  10. //背景顏色(CGColorRef類型)
  11. @property CGColorRef backgroundColor;

  13. //形變屬性
  14. @property CATransform3D transform;

  16. //邊框顏色(CGColorRef類型)
  17. @property CGColorRef borderColor;

  19. //邊框?qū)挾?br />
  20. @property CGFloat borderWidth;

  22. //圓角半徑
  23. @property CGFloat cornerRadius;

  25. //內(nèi)容(比如設(shè)置為圖片CGImageRef)
  26. @property(retain) id contents;
復(fù)制代碼
UIView和CALayer的使用區(qū)別:

　　　　UIView ： 接受和處理系統(tǒng)事件、觸摸事件。

　　　　CALayer ： 顯示內(nèi)容



歡迎光臨 Chinaunix (http://72891.cn/) Powered by Discuz! X3.2