iOS 使用UICountingLabel实现数字变化的动画效果

2017-08-12 20:15:08来源:CSDN作者:u012265444人点击

分享

前言

项目中本来需要使用PNChart写了个PNChart的Demo结果pod下来的时候多了个UICountingLabel(后来~我才知道~并不是多,而是需要~)。

于是对此进行学习研究,发现很实用,很简单。

于是分享给大家。

正文

在支付宝(等金融类App)中我们经常看到数字变化的动画效果,奈何囊中羞涩。。。没有大额数字给大家展示····

所以只能让大家实际动手操作感受一下:

请大家跟着我的操作打开支付宝,点击转账,转到支付宝账户:******@qq.com,给我转账····

算了,不和大家开玩笑了。。。

请大家打开支付宝,在我的标签页选择余额或者余额宝即可方便快捷查看到你的余额,不,数字变化的动画效果,

如果你和我一样囊中羞涩的话,请跳过这一步骤,直接进入主题。



那我们如何实现上面的功能呢,请听下回分解。

——————————分割线——————————


一、下载UICountingLabel

下载地址: https://github.com/dataxpress/UICountingLabel
UICountingLabel只支持整形和浮点数样式, 

像大部分金融类app里面显示的金额(带有千分位分隔符)的样式是无法显示的, 

但是后面会给出解决方案, 实现这些的效果!

二、使用UICountingLabel

1. 初始化

UICountingLabel 继承 UILabel, 初始化和 UILabel 一样, 如下:

    UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];    myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48];    myLabel.textAlignment = NSTextAlignmentCenter;    [self.view addSubview:myLabel];

];

2. 设置文本样式

可以这样设置:

    //设置文本样式    //整数    myLabel.format = @"%d";    //浮点数样式数字    myLabel.format = @"%.2f";

也可以使用 block设置:

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. 设置变化范围及动画时间

    //设置变化范围及动画时间    //整数    [myLabel countFrom:0 to:100 withDuration:4.0f];    //浮点数    [myLabel countFrom:0.00 to:3198.23 withDuration:4.0f];


三、实例效果

因为我真机测试比较麻烦,所以就使用原作者的图给大家展示。代码请不要直接复制,我都写在一起了,请大家看完自己写。
    //初始化    UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];    myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48];    myLabel.textAlignment = NSTextAlignmentCenter;    [self.view addSubview:myLabel];    //设置文本样式    //整数    myLabel.format = @"%d";    //浮点数样式数字    myLabel.format = @"%.2f";    //设置变化范围及动画时间    //整数    [myLabel countFrom:0 to:100 withDuration:4.0f];    //浮点数    [myLabel countFrom:0.00 to:3198.23 withDuration:4.0f];


1. 整数样式数字的变化

2. 浮点数样式数字的变化


3. 带有千分位分隔符的浮点数样式

由于UICountingLabel没有这种样式, 所以稍微需要修改一下UICountingLabel文件.
首先在UICountingLabel.h头文件中增加一个属性,如下图:


接着在UICountingLabel.m文件里面- (void)setTextValue:(CGFloat)value方法中添加如下代码:


代码:

- (void)setTextValue:(float)value{    if (self.attributedFormatBlock != nil) {        self.attributedText = self.attributedFormatBlock(value);    }    else if(self.formatBlock != nil)    {        self.text = self.formatBlock(value);    }    else    {        // check if counting with ints - cast to int        if([self.format rangeOfString:@"%(.*)d" options:NSRegularExpressionSearch].location != NSNotFound || [self.format rangeOfString:@"%(.*)i"].location != NSNotFound )        {            self.text = [NSString stringWithFormat:self.format,(int)value];        }        else        {            if (self.positiveFormat.length > 0) {//带千分位分隔符样式                NSString *str = [NSString stringWithFormat:self.format, value];                NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];                formatter.numberStyle = NSNumberFormatterDecimalStyle;                [formatter setPositiveFormat:self.positiveFormat];                self.text = [NSString stringWithFormat:@"%@",[formatter stringFromNumber:[NSNumber numberWithFloat:[str floatValue]]]];                            } else {                self.text = [NSString stringWithFormat:self.format,value];            }        }    }}

这样UICountingLabel就可以实现这种样式了.

    //设置分隔符样式    myLabel.positiveFormat = @"###,##0.00";

效果图如下:


鸣谢:http://www.jianshu.com/p/e25f63e7af3f


如果有错误或不足烦请读者指出,共同学习,共同进步。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台