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

VicTQUP 8年前
   <p>一、下载UICountingLabel</p>    <p>下载地址: <a href="/misc/goto?guid=4959674314898728032">https://github.com/dataxpress/UICountingLabel</a><br> UICountingLabel只支持整形和浮点数样式, 像大部分金融类app里面显示的金额(带有千分位分隔符)的样式是无法显示的, 但是后面会给出解决方案, 实现这些的效果!</p>    <p>二、使用UICountingLabel</p>    <p>1. 初始化</p>    <p>UICountingLabel 继承 UILabel, 初始化和 UILabel 一样, 如下:</p>    <pre>  <code class="language-objectivec">UICountingLabel* myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(10, 10, 100, 40)];  [self.view addSubview:myLabel];</code></pre>    <p>2. 设置文本样式</p>    <p>可以这样设置:</p>    <pre>  <code class="language-objectivec">myLabel.format = @"%d";</code></pre>    <p>也可以使用 block设置:</p>    <pre>  <code class="language-objectivec">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];      }  };</code></pre>    <p>3. 设置变化范围及动画时间</p>    <pre>  <code class="language-objectivec">[myLabel countFrom:50 to:100 withDuration:5.0f];</code></pre>    <p>就这么简单!</p>    <p>三、实例效果</p>    <p>1. 整数样式数字的变化</p>    <p>代码如下:</p>    <pre>  <code class="language-objectivec">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];</code></pre>    <p>效果图如下:</p>    <p><img src="https://simg.open-open.com/show/4bd0d726e7709d8b1394eec7bbd727d3.gif" alt="iOS使用UICountingLabel实现数字变化的动画效果" width="458" height="168"></p>    <p>整数样式</p>    <p>2. 浮点数样式数字的变化</p>    <p>代码如下:</p>    <pre>  <code class="language-objectivec">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];</code></pre>    <p>效果图如下:</p>    <p><img src="https://simg.open-open.com/show/a0857023b58061c313d14e5d1ae4936e.gif" alt="iOS使用UICountingLabel实现数字变化的动画效果" width="458" height="168"></p>    <p>浮点数样式</p>    <p>3. 带有千分位分隔符的浮点数样式</p>    <p>由于UICountingLabel没有这种样式, 所以稍微需要修改一下UICountingLabel文件.<br> 首先在<code>UICountingLabel.h</code>头文件中增加一个属性, 如下图:</p>    <p><img src="https://simg.open-open.com/show/ed1bd8c40dea970450eaeccba4d8880a.png" alt="iOS使用UICountingLabel实现数字变化的动画效果" width="990" height="116"></p>    <p>添加<code>positiveFormat</code>属性</p>    <p><br> 接着在<code>UICountingLabel.m</code>文件里面<code>- (void)setTextValue:(CGFloat)value</code>方法中添加如下代码:</p>    <p><img src="https://simg.open-open.com/show/8415d3a6ff7b382eabdba73854c8bf90.png" alt="iOS使用UICountingLabel实现数字变化的动画效果" width="1153" height="466"></p>    <p>添加此段代码</p>    <p>这样UICountingLabel就可以实现这种样式了.<br> <br> 下面开始实现这种样式, 代码如下:</p>    <pre>  <code class="language-objectivec">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];</code></pre>    <p>效果图如下:</p>    <p><img src="https://simg.open-open.com/show/e957a0c3027fc2a13392158eb3465201.gif" alt="iOS使用UICountingLabel实现数字变化的动画效果" width="458" height="168"></p>    <p>带有千分位分隔符的浮点数</p>    <p><br>  </p>    <p>文/<a href="/misc/goto?guid=4959674315037801935">jianshu_wl</a>(简书)<br>  </p>    <p> </p>    <p> </p>