脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iOS UICountingLabel 动画效果

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

 更新时间：2016年12月27日 14:59:10   作者：jianshu_wl  
本文主要介绍了iOS使用UICountingLabel实现数字变化动画效果的方法，具有一定的参考价值，下面跟着小编一起来看下吧

在大多数金融类 app 上或者其他 app 需要数字展示的地方, 经常会有如下的动画效果:

动画效果

怎么做呢?

一、下载UICountingLabel

下载地址: http://xiazai.jb51.net/201612/yuanma/UICountingLabel-master_jb51.rar

UICountingLabel只支持整形和浮点数样式, 像大部分金融类app里面显示的金额(带有千分位分隔符)的样式是无法显示的, 但是后面会给出解决方案, 实现这些的效果!

二、使用UICountingLabel

1. 初始化

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

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

2. 设置文本样式

可以这样设置:

myLabel.format = @"%d";

也可以使用 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:50 to:100 withDuration:5.0f];

就这么简单!

三、实例效果

1. 整数样式数字的变化

代码如下:

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

效果图如下:

整数样式

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

代码如下:

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

效果图如下:

浮点数样式

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

由于UICountingLabel没有这种样式, 所以稍微需要修改一下UICountingLabel文件.

首先在UICountingLabel.h头文件中增加一个属性, 如下图:

添加positiveFormat属性

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

添加此段代码

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

效果图如下:

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • iOS开发 widget构建详解及实现代码

    iOS开发 widget构建详解及实现代码

    这篇文章主要介绍了iOS开发 widget构建详解的相关资料,并附实例代码，需要的朋友可以参考下
    2016-11-11
  • 详解iOS AFNetworking取消正在进行的网络请求

    详解iOS AFNetworking取消正在进行的网络请求

    这篇文章主要介绍了详解iOS AFNetworking取消正在进行的网络请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • iOS开发中class和#import的区别介绍

    iOS开发中class和#import的区别介绍

    这篇文章主要介绍了iOS开发中class和#import的区别,非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2018-02-02
  • iOS实现联系人按照首字母进行排序的实例

    iOS实现联系人按照首字母进行排序的实例

    下面小编就为大家分享一篇iOS实现联系人按照首字母进行排序的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • iOS中NSObject的两种含义：类和协议详解

    iOS中NSObject的两种含义：类和协议详解

    这篇文章主要给大家介绍了关于iOS中NSObject的两种含义：类和协议的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09
  • iOS实现简易钟表

    iOS实现简易钟表

    这篇文章主要为大家详细介绍了iOS实现简易钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • iOS图片压缩、滤镜、剪切及渲染等详解

    iOS图片压缩、滤镜、剪切及渲染等详解

    这篇文章主要给大家介绍了关于iOS图片压缩、滤镜、剪切及渲染等的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • iOS中的集合该如何弱引用对象示例详解

    iOS中的集合该如何弱引用对象示例详解

    这篇文章主要给大家介绍了关于在iOS中的集合该如何弱引用对象的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来依稀学习学习吧。
    2017-09-09
  • OC - 9.基于Quartz2D绘制下载进度条(demo)

    OC - 9.基于Quartz2D绘制下载进度条(demo)

    这篇文章主要介绍了OC - 9.基于Quartz2D绘制下载进度条(demo)的相关资料,需要的朋友可以参考下
    2015-11-11
  • iOS浮点类型精度问题的原因与解决办法

    iOS浮点类型精度问题的原因与解决办法

    在iOS开发中,我们经常要使用浮点类型去接收后台返回过来的的数据,这时往往会遇到精度问题,这篇文章主要给大家介绍了关于iOS浮点类型精度问题的原因与解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01

最新评论