<pre>
在大多數(shù)金融類 app 上或者其他 app 需要數(shù)字展示的地方, 經(jīng)常會有如下的動畫效果:
image
怎么做呢?
一乡恕、下載UICountingLabel
下載地址: https://github.com/dataxpress/UICountingLabel
UICountingLabel只支持整形和浮點數(shù)樣式, 像大部分金融類app里面顯示的金額(帶有千分位分隔符)的樣式是無法顯示的, 但是后面會給出解決方案, 實現(xiàn)這些的效果!
二言询、使用UICountingLabel
1. 初始化
UICountingLabel 繼承 UILabel, 初始化和 UILabel 一樣, 如下:
UICountingLabel* myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(10, 10, 100, 40)];
[self.view addSubview:myLabel];
2. 設(shè)置文本樣式
可以這樣設(shè)置:
myLabel.format = @"%d";
也可以使用 block設(shè)置:
myLabel.formatBlock = ^NSString* (CGFloat value) {
NSInteger years = value / 12;
NSInteger months = (NSInteger)value % 12;
if (years == 0) {
return [NSString stringWithFormat: @"%ld months", (long)months];
}
else {
return [NSString stringWithFormat: @"%ld years, %ld months", (long)years, (long)months];
}
};
3. 設(shè)置變化范圍及動畫時間
[myLabel countFrom:50 to:100 withDuration:5.0f];
就這么簡單!
三、實例效果
1. 整數(shù)樣式數(shù)字的變化
代碼如下:
UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(titleLabel.frame)+1, 280, 45)];
myLabel.textAlignment = NSTextAlignmentCenter;
myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48];
myLabel.textColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1];
[self.view addSubview:myLabel];
//設(shè)置格式
myLabel.format = @"%d";
//設(shè)置變化范圍及動畫時間
[self.myLabel countFrom:0
to:100
withDuration:1.0f];
效果圖如下:
image
2. 浮點數(shù)樣式數(shù)字的變化
代碼如下:
UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(titleLabel.frame)+1, 280, 45)];
myLabel.textAlignment = NSTextAlignmentCenter;
myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48];
myLabel.textColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1];
[self.view addSubview:myLabel];
//設(shè)置格式
myLabel.format = @"%.2f";
//設(shè)置變化范圍及動畫時間
[self.myLabel countFrom:0.00
to:3198.23
withDuration:1.0f];
效果圖如下:
image
3. 帶有千分位分隔符的浮點數(shù)樣式
由于UICountingLabel沒有這種樣式, 所以稍微需要修改一下UICountingLabel文件.
首先在UICountingLabel.h頭文件中增加一個屬性, 如下圖:
image
接著在UICountingLabel.m文件里面- (void)setTextValue:(CGFloat)value方法中添加如下代碼:
image
這樣UICountingLabel就可以實現(xiàn)這種樣式了.
下面開始實現(xiàn)這種樣式, 代碼如下:
UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(titleLabel.frame)+1, 280, 45)];
myLabel.textAlignment = NSTextAlignmentCenter;
myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48];
myLabel.textColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1];
[self.view addSubview:myLabel];
//設(shè)置格式
myLabel.format = @"%.2f";
//設(shè)置分隔符樣式
myLabel.positiveFormat = @"###,##0.00";
//設(shè)置變化范圍及動畫時間
[self.myLabel countFrom:0.00
to:3048.64
withDuration:1.0f];
效果圖如下:
image
作者：jianshu_wl
鏈接：http://www.reibang.com/p/e25f63e7af3f
來源：簡書
著作權(quán)歸作者所有傲宜。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)运杭，非商業(yè)轉(zhuǎn)載請注明出處。</pre>
