欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-12 20:42:16
在大多数金融类 app 上或者其他 app 需要数字展示的地方, 经常会有如下的动画效果: 动画效果 怎么做呢? 一、下载uicountinglabel...

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

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

动画效果

怎么做呢?

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

效果图如下:

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

整数样式

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

效果图如下:

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

浮点数样式

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

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

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

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

添加positiveformat属性

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

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

添加此段代码

这样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使用UICountingLabel实现数字变化的动画效果

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