最近在學習iOS-Core Animation相關東西。學以緻用,這裡用寄宿圖和拉伸過濾來實作一個電子時鐘。
最終效果如下:
1.gif
實作思路很簡單,就是利用圖層寄宿圖的contentsRect特性來實作。
這裡簡單介紹一下圖層寄宿圖。
寄宿圖
圖層CALayer和View一樣,可以給它設定一個image用來展示,給CALayer設定image就是寄宿圖。
UIImage *digitImage = [UIImage imageNamed:@"Digits"];
view.layer.contents = (__bridge id)digitImage.CGImage;
view.layer.contentsRect = CGRectMake(0, 0, 0.1, 1);
view.layer.contentsGravity = kCAGravityResizeAspect;
// set nearest-neighbour
view.layer.magnificationFilter = kCAFilterNearest;
這裡涉及到4點:
1.設定寄宿圖,用CALayer的contents屬性來設定。
2.設定拉伸contentsGravity,和view的contentMode一樣,這裡不過是設定寄宿圖的拉伸效果而已。
3.設定拉伸過濾kCAFilterNearest。說白了就是放大縮小的效果。
4.CALayer的contentsRect。圖層的這個屬性用于展示寄宿圖的展示區域。預設為(0,0,1,1)表示整個區域。這麼說吧這裡面都是按照比例來計算的。如果你要展示圖層左上角四分之一的區域那麼設定contentsRect為(0, 0, 0.5, 0.5)。如果展示右下角四分之一區域,那麼為(0.5, 0.5, 0.5, 0.5)。使用contentRects的好處是一次加載圖檔,然後分别展示圖檔的不同區域。
本例子中隻有一張圖檔
digit
通過一次加載該圖檔,然後設定contentsRect來更改不同的位置即可。
最後附上關鍵代碼:
- (void)viewDidLoad {
[super viewDidLoad];
UIImage *digitImage = [UIImage imageNamed:@"Digits"];
for (UIView *view in self.digitViews) {
view.layer.contents = (__bridge id)digitImage.CGImage;
view.layer.contentsRect = CGRectMake(0, 0, 0.1, 1);
view.layer.contentsGravity = kCAGravityResizeAspect;
// set nearest-neighbour
view.layer.magnificationFilter = kCAFilterNearest;
}
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(digitClockRunning) userInfo:nil repeats:YES];
[self digitClockRunning];
}
- (void)setDigit:(NSUInteger)digitNumber forView:(UIView *)view {
view.layer.contentsRect = CGRectMake(digitNumber * 0.1, 0, 0.1, 1);
}
- (void)digitClockRunning {
NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
NSCalendarUnit unit = NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond;
NSDateComponents *components = [calendar components:unit fromDate:[NSDate date]];
[self setDigit:(components.hour / 10) forView: self.digitViews[0]];
[self setDigit:components.hour % 10 forView:self.digitViews[1]];
[self setDigit:components.minute / 10 forView:self.digitViews[2]];
[self setDigit:components.minute % 10 forView:self.digitViews[3]];
[self setDigit:components.second / 10 forView:self.digitViews[4]];
[self setDigit:components.second % 10 forView:self.digitViews[5]];
}
PS:另外注意,如果代碼裡面使用NSTimer,會出現無法釋放的情況,解決辦法是使用一個第三方的庫HWWeakTimer來解決。
** 如果喜歡,點個贊吧 **