在大多數(shù)金融類 app 上或者其他 app 需要數(shù)字展示的地方, 經(jīng)常會有如下的動畫效果:

動畫效果

怎么做呢?

一、下載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];

效果圖如下:

整數(shù)樣式

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];

效果圖如下:

浮點數(shù)樣式

3. 帶有千分位分隔符的浮點數(shù)樣式

由于UICountingLabel沒有這種樣式, 所以稍微需要修改一下UICountingLabel文件.
首先在UICountingLabel.h頭文件中增加一個屬性, 如下圖:

添加`positiveFormat`屬性

添加此段代碼

這樣UICountingLabel就可以實現(xiàn)這種樣式了.
</br>
下面開始實現(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];

效果圖如下:

帶有千分位分隔符的浮點數(shù)