好了,书接上文。上文地址:http://www.jianshu.com/p/26a7ccbc55c4
动画这个系列大概会分享五篇文章,但是也有可能因为自己偷懒或者其他缘故改变一下。Hoho~
-----------------------华丽分割线,iOS动画系列全集链接-------------------------------------------------
第一篇:iOS动画系列之一:通过实战学习CALayer和透视的原理。做一个带时分秒指针的时钟动画(上)
第二篇:iOS动画系列之二:通过实战学习CALayer和透视的原理。做一个带时分秒指针的时钟动画。包含了OC和Swift两种源代码(下)
第三篇:iOS动画系列之三:Core Animation。介绍了Core Animation的常用属性和方法。
第四篇:CABasic Animation。iOS动画系列之四:基础动画之平移篇
第五篇:CABasic Animation。iOS动画系列之五:基础动画之缩放篇&旋转篇
第六篇:iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面
第七篇:iOS动画系列之七:实现类似Twitter的启动动画
第八篇:iOS动画系列之八:使用CAShapeLayer绘画动态流量图
第九篇:iOS动画系列之九:实现点赞的动画及播放起伏指示器
第十篇:实战系列:绘制过山车场景
被自己的任性感动哭了,哈哈~了解了CALayer的一些基本属性之后,我们开始~~撸管~~撸起袖子敲代码了。
任性君又突发奇想,把这份代码用Objective-C和Swift都敲了一遍。文后面给了两个版本的源代码下载地址。
1. 创建CALayer
-
position
:默认情况下相当于UIView的center -
contents
:CALayer的内容。可以设置为图片,但是需要桥接。桥接不需要自己额外设置,编译后编译器会自动提示,让Xcode自动帮我们桥接就可以啦。 - 就像添加子视图一样,别忘了把自己创建的Layer添加到view.layer上面。
- (void)viewDidLoad {
[super viewDidLoad];
CALayer *dialLayer= [[CALayer alloc] init];
dialLayer.bounds = CGRectMake(0, 0, 150, 150);
dialLayer.position = self.view.center;
dialLayer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"clock"].CGImage);
[self.view.layer addSublayer:dialLayer];
}
2. 设置时分秒针
以秒针为例。时针、分针都是一样的。
// 设置秒针
UIView *secondHandView = [[UIView alloc]init];
secondHandView.backgroundColor = [UIColor redColor];
secondHandView.bounds = CGRectMake(0, 0, 1, 60);
secondHandView.center = self.view.center;
// 修改锚点
secondHandView.layer.anchorPoint = CGPointMake(0.5, 1);
[self.view addSubview:secondHandView];
self.secondHandView = secondHandView;
锚点是个神马东东?
锚点是神马吶?打个比方,我们耍双截棍的时候,双截棍其实都是围绕咱们握拳的地方转来转去的,👊其实就是双截棍的锚点。
再打个比方,我们在一张A4纸上面钉一个📌。然后旋转A4纸,那颗图钉的位置就是A4纸的锚点。
所以锚点肯定是个坐标点喽~有X、Y组成。锚点的数值范围就是0~1。0表示在最左边或者最上边,1表示在最右边或者最下边。有点模糊是不?再来张图就更清楚了:
咱们刚才绘制的秒针实际就是一个宽1,长60的一个View。咱们要让它旋转起来的时候围绕着一个点转,就要把那个点用图钉钉上。这个图钉的位置就是锚点,就是我们在代码中设置的(0.5,1).
3. 创建CADisplayLink
我们一开始想到的办法就是用定时器,每一秒钟刷新一次秒针。但是使用了定时器之后,有一个问题。发现秒针比电脑上的稍微慢一点。是因为刷新频率和电脑不一样。
- 解决方法就是使用CADisplayLink来刷新时钟。
// 创建CADisplayLink
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(clockRunning)];
// 将创建的CADisplayLink加入到主线程中
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
3.1 CADisplayLink和NSTimer的区别
- NSTimer占用系统资源较多
- NSTimer使用完后,一定要销毁,把它设置成nil。
- CADisplayLink本来就在进程中,每秒进行60次。
- 核心动画的时候,最好使用CADisplayLink
3.2 获取时间及时区
- 在
clockRunning
这个方法中,我们要设置时区,获取日历、当前时间。
在和时间打交道的时候,请千万别忘记了时区。全球有那么多国家,不要只想着自己哈。
//获取本地时区
NSTimeZone *tZone = [NSTimeZone localTimeZone];
// 获取日历
NSCalendar *calendar = [NSCalendar currentCalendar];
//获取系统当前时间
NSDate *currentDate = [NSDate date];
//设置日历的时区
[calendar setTimeZone:tZone];
//取出当前的时分秒
NSDateComponents *currentTime = [calendar components:NSCalendarUnitSecond|NSCalendarUnitMinute|NSCalendarUnitHour|NSCalendarUnitTimeZone fromDate:currentDate];
3.3 根据当前时间计算时分秒针弧度
根据当前时间计算时分秒针弧度,然后让自己设置的View进行形变。
因为咱们这个方法是通过CADisplayLink来调用的,也就是说一分钟会被调用60次。因此每秒咱们的秒针都会旋转一次。
CGFloat angle = (M_PI * 2 / 60) * currentTime.second;
self.secondHandView.transform = CGAffineTransformMakeRotation(angle);
CGFloat minuteAngle = (M_PI * 2 / 60) * currentTime.minute;
self.minuteHandView.transform = CGAffineTransformMakeRotation(minuteAngle);
CGFloat hourAngle = (M_PI * 2 / 12) * currentTime.hour;
self.hourHandView.transform = CGAffineTransformMakeRotation(hourAngle);
4. 成稿
完成效果:
OC和Swift的下载地址如下:
https://git.oschina.net/atypical/clock.git