当前位置：首页 > 资讯 > 技术文档

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

时间：2021-04-14 13:21 编辑：来源：阅读：
扫一扫，手机访问

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

在大多数金融类 app 上或者其他 app 需要数字展示的地方, 经常会有如下的动画效果: [img]http://files.jb51.net/file_images/article/201612/2016122715041630.gif[/img] 动画效果怎么做呢? [b]一、下载UICountingLabel[/b] 下载地址: [url=http://xiazai.jb51.net/201612/yuanma/UICountingLabel-master_jb51.rar]http://xiazai.jb51.net/201612/yuanma/UICountingLabel-master_jb51.rar[/url] UICountingLabel只支持整形和浮点数样式, 像大部分金融类app里面显示的金额(带有千分位分隔符)的样式是无法显示的, 但是后面会给出解决方案, 实现这些的效果! [b]二、使用UICountingLabel[/b] [b]1. 初始化[/b] UICountingLabel 继承 UILabel, 初始化和 UILabel 一样, 如下:

UICountingLabel* myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(10, 10, 100, 40)];
[self.view addSubview:myLabel];

[b]2. 设置文本样式[/b] 可以这样设置: [code]myLabel.format = @"%d";[/code] 也可以使用 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];
 }
};

[b]3. 设置变化范围及动画时间[/b] [code][myLabel countFrom:50 to:100 withDuration:5.0f];[/code] 就这么简单! [b]三、实例效果[/b] [b]1. 整数样式数字的变化[/b] 代码如下:

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];
//设置格式
myLabel.format = @"%d";
//设置变化范围及动画时间
[self.myLabel countFrom:0
    to:100
  withDuration:1.0f];

效果图如下: [img]http://files.jb51.net/file_images/article/201612/2016122715041631.gif[/img] 整数样式 [b]2. 浮点数样式数字的变化[/b] 代码如下:

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];
//设置格式
myLabel.format = @"%.2f";
//设置变化范围及动画时间
[self.myLabel countFrom:0.00
    to:3198.23
  withDuration:1.0f];

效果图如下: [img]http://files.jb51.net/file_images/article/201612/2016122715041632.gif[/img] 浮点数样式 [b]3. 带有千分位分隔符的浮点数样式[/b] 由于UICountingLabel没有这种样式, 所以稍微需要修改一下UICountingLabel文件. 首先在UICountingLabel.h头文件中增加一个属性, 如下图: [img]http://files.jb51.net/file_images/article/201612/2016122715041633.png[/img] 添加positiveFormat属性接着在UICountingLabel.m文件里面- (void)setTextValue:(CGFloat)value方法中添加如下代码: [img]http://files.jb51.net/file_images/article/201612/2016122715041634.png[/img] 添加此段代码这样UICountingLabel就可以实现这种样式了. 下面开始实现这种样式, 代码如下:

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];
//设置格式
myLabel.format = @"%.2f";
//设置分隔符样式
myLabel.positiveFormat = @"###,##0.00";
//设置变化范围及动画时间
[self.myLabel countFrom:0.00
   to:3048.64
  withDuration:1.0f];

效果图如下: [img]http://files.jb51.net/file_images/article/201612/2016122715041630.gif[/img] 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！

全部评论(0)

资讯排行榜
更多>>