iOS - Label 数字动态变化

1、数字动态变化

• 具体实现代码见 GitHub 源码 QExtension

• QCountingLabel.h

  	/// 文本数字变化方式枚举
  	typedef NS_ENUM(NSUInteger, QCountingMethod) {
  
  	    QCountingMethodEaseInOut,     // 开始结束慢，中间快
  	    QCountingMethodEaseIn,        // 开始慢，结束快
  	    QCountingMethodEaseOut,       // 开始快，结束慢
  	    QCountingMethodLinear         // 匀速
  	};
  
  	@interface QCountingLabel : UILabel
  
  	/// 文本数字样式，默认为 @"%f"
  	@property (nonatomic, strong) NSString *format;
  
  	/// 文本数字分隔符样式，例如 @"###,##0.00"
  	@property (nonatomic, strong) NSString *positiveFormat;
  
  	/// 文本数字变化方式，默认为 EaseInOut
  	@property (nonatomic, assign) QCountingMethod method;
  
  	/// 文本数字变化时间，默认为 2.0
  	@property (nonatomic, assign) NSTimeInterval animationDuration;
  
  	/// 文本数字样式 Block
  	@property (nonatomic, copy) NSString *(^formatBlock)(CGFloat);
  
  	/// 富文本数字样式 Block
  	@property (nonatomic, copy) NSAttributedString *(^attributedFormatBlock)(CGFloat);
  
  	/// 文本数字变化完成回调 Block
  	@property (nonatomic, copy) void (^completionBlock)();
  
  	/**
  	 *  文本数字在指定时间内从起始值变化到结束值
  	 *
  	 *  @param frame            控件的 frame
  	 *  @param format           文本数字样式，默认为 @"%f"
  	 *  @param positiveFormat   文本数字分隔符样式
  	 *  @param method           文本数字变化方式，默认为 EaseInOut
  	 *  @param startValue       起始值
  	 *  @param endValue         结束值
  	 *  @param duration         变化时间
  	 *  @param completion       完成回调
  	 *
  	 *  @return QCountingLabel 对象
  	 */
  	+ (instancetype)q_countingLabelWithFrame:(CGRect)frame
  	                                  format:(NSString *)format
  	                          positiveFormat:(nullable NSString *)positiveFormat
  	                                  method:(QCountingMethod)method
  	                               fromValue:(CGFloat)startValue
  	                                 toValue:(CGFloat)endValue
  	                            withDuration:(NSTimeInterval)duration
  	                              completion:(void (^)())completion;
  
  	/**
  	 *  文本数字从起始值变化到结束值
  	 *
  	 *  <p> 默认变化时间 2.0 秒 <p>
  	 *
  	 *  @param startValue   起始值
  	 *  @param endValue     结束值
  	 *
  	 *  @return nil
  	 */
  	- (void)q_countFromValue:(CGFloat)startValue toValue:(CGFloat)endValue;
  
  	/**
  	 *  文本数字在指定时间内从起始值变化到结束值
  	 *
  	 *  @param startValue   起始值
  	 *  @param endValue     结束值
  	 *  @param duration     变化时间
  	 *
  	 *  @return nil
  	 */
  	- (void)q_countFromValue:(CGFloat)startValue toValue:(CGFloat)endValue withDuration:(NSTimeInterval)duration;
  
  	/**
  	 *  文本数字从当前值变化到结束值
  	 *
  	 *  <p> 默认变化时间 2.0 秒 <p>
  	 *
  	 *  @param endValue     结束值
  	 *
  	 *  @return nil
  	 */
  	- (void)q_countFromCurrentValueToValue:(CGFloat)endValue;
  
  	/**
  	 *  文本数字在指定时间内从当前值变化到结束值
  	 *
  	 *  @param endValue     结束值
  	 *  @param duration     变化时间
  	 *
  	 *  @return nil
  	 */
  	- (void)q_countFromCurrentValueToValue:(CGFloat)endValue withDuration:(NSTimeInterval)duration;
  
  	/**
  	 *  文本数字从 0 变化到结束值
  	 *
  	 *  <p> 默认变化时间 2.0 秒 <p>
  	 *
  	 *  @param endValue     结束值
  	 *
  	 *  @return nil
  	 */
  	- (void)q_countFromZeroToValue:(CGFloat)endValue;
  
  	/**
  	 *  文本数字在指定时间内从 0 变化到结束值
  	 *
  	 *  @param endValue     结束值
  	 *  @param duration     变化时间
  	 *
  	 *  @return nil
  	 */
  	- (void)q_countFromZeroToValue:(CGFloat)endValue withDuration:(NSTimeInterval)duration;
  
  	@end
  

• QCountingLabel.m

  	#ifndef kQLabelCounterRate
  	#define kQLabelCounterRate 3.0
  	#endif
  
  	NS_ASSUME_NONNULL_BEGIN
  
  	@interface QCountingLabel ()
  
  	@property (nonatomic, assign) CGFloat startingValue;
  	@property (nonatomic, assign) CGFloat destinationValue;
  	@property (nonatomic, assign) NSTimeInterval progress;
  	@property (nonatomic, assign) NSTimeInterval lastUpdate;
  	@property (nonatomic, assign) NSTimeInterval totalTime;
  	@property (nonatomic, assign) CGFloat easingRate;
  
  	@property (nonatomic, strong, nullable) CADisplayLink *timer;
  
  	@end
  
  	@implementation QCountingLabel
  
  	#pragma mark - 文本数字变化方法
  
  	/// 创建 QCountingLabel 对象
  	+ (instancetype)q_countingLabelWithFrame:(CGRect)frame
  	                                  format:(NSString *)format
  	                          positiveFormat:(nullable NSString *)positiveFormat
  	                                  method:(QCountingMethod)method
  	                               fromValue:(CGFloat)startValue
  	                                 toValue:(CGFloat)endValue
  	                            withDuration:(NSTimeInterval)duration
  	                              completion:(void (^)())completion {
  
  	    QCountingLabel *label = [[self alloc] initWithFrame:frame];
  
  	    label.format = format;
  	    label.positiveFormat = positiveFormat;
  	    label.method = method;
  	    label.completionBlock = completion;
  	    [label q_countFromValue:startValue toValue:endValue withDuration:duration];
  
  	    return label;
  	}
  
  	/// 文本数字从起始值变化到结束值
  	- (void)q_countFromValue:(CGFloat)startValue toValue:(CGFloat)endValue {
  
  	    if (self.animationDuration == 0.0f) {
  	        self.animationDuration = 2.0f;
  	    }
  
  	    [self q_countFromValue:startValue toValue:endValue withDuration:self.animationDuration];
  	}
  
  	/// 文本数字在指定时间内从起始值变化到结束值
  	- (void)q_countFromValue:(CGFloat)startValue toValue:(CGFloat)endValue withDuration:(NSTimeInterval)duration {
  
  	    self.startingValue = startValue;
  	    self.destinationValue = endValue;
  
  	    // remove any (possible) old timers
  	    [self.timer invalidate];
  	    self.timer = nil;
  
  	    if (duration == 0.0) {
  
  	        // No animation
  	        [self q_setTextValue:endValue];
  
  	        if (self.completionBlock) {
  	            self.completionBlock();
  	        }
  
  	        return;
  	    }
  
  	    self.easingRate = 3.0f;
  	    self.progress = 0;
  	    self.totalTime = duration;
  	    self.lastUpdate = [NSDate timeIntervalSinceReferenceDate];
  
  	    if (self.format == nil) {
  	        self.format = @"%f";
  	    }
  
  	    CADisplayLink *timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(q_timerUpdate:)];
  	    timer.frameInterval = 2;
  	    [timer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
  	    [timer addToRunLoop:[NSRunLoop mainRunLoop] forMode:UITrackingRunLoopMode];
  	    self.timer = timer;
  	}
  
  	/// 文本数字从当前值变化到结束值
  	- (void)q_countFromCurrentValueToValue:(CGFloat)endValue {
  
  	    [self q_countFromValue:[self q_getCurrentValue] toValue:endValue];
  	}
  
  	/// 文本数字在指定时间内从当前值变化到结束值
  	- (void)q_countFromCurrentValueToValue:(CGFloat)endValue withDuration:(NSTimeInterval)duration {
  
  	    [self q_countFromValue:[self q_getCurrentValue] toValue:endValue withDuration:duration];
  	}
  
  	/// 文本数字从 0 变化到结束值
  	- (void)q_countFromZeroToValue:(CGFloat)endValue {
  
  	    [self q_countFromValue:0.0f toValue:endValue];
  	}
  
  	/// 文本数字在指定时间内从 0 变化到结束值
  	- (void)q_countFromZeroToValue:(CGFloat)endValue withDuration:(NSTimeInterval)duration {
  
  	    [self q_countFromValue:0.0f toValue:endValue withDuration:duration];
  	}
  
  	/// format setter
  	- (void)setFormat:(NSString *)format {
  
  	    _format = format;
  
  	    // update label with new format
  	    [self q_setTextValue:self.q_getCurrentValue];
  	}
  
  	#pragma mark - 工具方法
  
  	/// 定时器定时响应事件处理
  	- (void)q_timerUpdate:(NSTimer *)timer {
  
  	    // update progress
  	    NSTimeInterval now = [NSDate timeIntervalSinceReferenceDate];
  	    self.progress += now - self.lastUpdate;
  	    self.lastUpdate = now;
  
  	    if (self.progress >= self.totalTime) {
  	        [self.timer invalidate];
  	        self.timer = nil;
  	        self.progress = self.totalTime;
  	    }
  
  	    [self q_setTextValue:[self q_getCurrentValue]];
  
  	    if (self.progress == self.totalTime) {
  	        if (self.completionBlock) {
  	            self.completionBlock();
  	        }
  	    }
  	}
  
  	/// 设置数值
  	- (void)q_setTextValue:(CGFloat)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];
  	            NSString *formatterString = [formatter stringFromNumber:[NSNumber numberWithFloat:[str floatValue]]];
  
  	            self.text = formatterString;
  
  	        } else {
  
  	            // 普通浮点型样式
  	            self.text = [NSString stringWithFormat:self.format, value];
  	        }
  	    }
  	}
  
  	/// 获取当前值
  	- (CGFloat)q_getCurrentValue {
  
  	    if (self.progress >= self.totalTime) {
  	        return self.destinationValue;
  	    }
  
  	    CGFloat percent = self.progress / self.totalTime;
  	    CGFloat updateVal = [self update:percent];
  
  	    return self.startingValue + (updateVal * (self.destinationValue - self.startingValue));
  	}
  
  	/// 更新数值
  	- (CGFloat)update:(CGFloat)t {
  
  	    switch (self.method) {
  
  	        case 0: {
  	            int sign = 1;
  	            int r = (int)kQLabelCounterRate;
  
  	            if (r % 2 == 0) {
  	                sign = -1;
  	            }
  
  	            t *= 2;
  
  	            if (t < 1) {
  	                return 0.5f * powf(t, kQLabelCounterRate);
  	            } else {
  	                return sign * 0.5f * (powf(t - 2, kQLabelCounterRate) + sign * 2);
  	            }
  
  	            break;
  	        }
  
  	        case 1: {
  	            return powf(t, kQLabelCounterRate);
  
  	            break;
  	        }
  
  	        case 2: {
  	            return 1.0 - powf((1.0 - t), kQLabelCounterRate);
  
  	            break;
  	        }
  
  	        case 3: {
  	            return t;
  
  	            break;
  	        }
  
  	        default:
  	            return t;
  	    }
  	}
  
  	@end
  

• 使用

  • 1、初始化

    • QCountingLabel 继承自 UILabel, 初始化和 UILabel 一样

      	// 创建 QCountingLabel 对象
      	QCountingLabel *countingLabel = [[QCountingLabel alloc] initWithFrame:CGRectMake(0, 0, 300, 120)];
      	[self.view addSubview:countingLabel];
      
      	// 常规设置，QCountingLabel 继承 UILabel, 设置和 UILabel 一样
      	countingLabel.center = self.view.center;
      	countingLabel.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.5];
      	countingLabel.font = [UIFont systemFontOfSize:50];
      	countingLabel.textColor = [UIColor redColor];
      	countingLabel.textAlignment = NSTextAlignmentCenter;
      

    • 也可以使用类方法一体式创建设置

      	// 创建 QCountingLabel 对象
      	QCountingLabel *countingLabel = [QCountingLabel q_countingLabelWithFrame:CGRectMake(50, 100, 300, 120)
      	                                                                  format:@"%f"
      	                                                          positiveFormat:@"###,###.##"
      	                                                                  method:QCountingMethodEaseOut
      	                                                               fromValue:20
      	                                                                 toValue:3048.64
      	                                                            withDuration:10.0f
      	                                                              completion:^{
      
      	    NSLog(@"completion");
      	}];
      
      	[self.view addSubview:countingLabel];
      

  • 2、设置文本样式

    • 不设置时默认为 @"%f"

      	// 设置文本样式
      	countingLabel.format = @"%d";
      

    • 也可以使用 block 设置普通样式或富文本样式

      	// 设置文本样式，使用 block 可以根据不同的值设置多种不同的样式
      	countingLabel.formatBlock = ^NSString *(CGFloat value) {
      
      	    NSInteger years = value / 12;
      	    NSInteger months = (NSInteger)value % 12;
      
      	    if (years == 0) {
      
      	        return [NSString stringWithFormat: @"%ld 个月", (long)months];
      
      	    } else {
      
      	        return [NSString stringWithFormat: @"%ld 年, %ld 个月", (long)years, (long)months];
      	    }
      	};
      

  • 3、设置文本分隔符样式

    • 设置金额等金融数字时可以奢姿带有千分位分隔符的浮点数样式

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

  • 4、设置文本变化方式

    • 不设置时默认为 EaseInOut

      	// 设置文本变化方式
      	countingLabel.method = QCountingMethodLinear;
      

  • 5、设置变化范围及动画时间

    • 不设置时间时默认为 2 秒

      	[countingLabel q_countFromValue:10 toValue:100];
      
      	[countingLabel q_countFromValue:10 toValue:100 withDuration:1.0f];
      

  • 6、设置变化完成时的回调

    • 数字变化完成时，可以设置回调，再执行其他的操作

      	// 设置变化完成时的回调
      	countingLabel.completionBlock = ^void () {
      
      	    NSLog(@"completion");
      	};
      

1.1 整数样式数字的变化

• 创建设置代码

  	@property (nonatomic, strong) QCountingLabel *countingLabel;
  
  	// 创建 QCountingLabel 对象
  	self.countingLabel = [[QCountingLabel alloc] initWithFrame:CGRectMake(0, 0, 300, 120)];
  	[self.view addSubview:self.countingLabel];
  
  	// 常规设置，QCountingLabel 继承 UILabel, 设置和 UILabel 一样
  	self.countingLabel.center = self.view.center;
  	self.countingLabel.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.5];
  	self.countingLabel.font = [UIFont systemFontOfSize:50];
  	self.countingLabel.textColor = [UIColor redColor];
  	self.countingLabel.textAlignment = NSTextAlignmentCenter;
  
  	// 设置文本样式
  	self.countingLabel.format = @"%d";
  
  	// 设置变化范围及动画时间
  	[self.countingLabel q_countFromValue:10 toValue:1000 withDuration:1.0f];
  

  • 效果

    

1.2 浮点数样式数字的变化

• 创建设置代码

  	@property (nonatomic, strong) QCountingLabel *countingLabel;
  
  	// 创建 QCountingLabel 对象
  	self.countingLabel = [[QCountingLabel alloc] initWithFrame:CGRectMake(0, 0, 300, 120)];
  	[self.view addSubview:self.countingLabel];
  
  	// 常规设置，QCountingLabel 继承 UILabel, 设置和 UILabel 一样
  	self.countingLabel.center = self.view.center;
  	self.countingLabel.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.5];
  	self.countingLabel.font = [UIFont systemFontOfSize:50];
  	self.countingLabel.textColor = [UIColor redColor];
  	self.countingLabel.textAlignment = NSTextAlignmentCenter;
  
  	// 设置文本样式
  	self.countingLabel.format = @"%.2f";
  
  	// 设置变化范围及动画时间
  	[self.countingLabel q_countFromValue:0 toValue:3198.23 withDuration:1.0f];
  

  • 效果

    

1.3 带有千分位分隔符的浮点数

• 创建设置代码

  	@property (nonatomic, strong) QCountingLabel *countingLabel;
  
  	// 创建 QCountingLabel 对象
  	self.countingLabel = [[QCountingLabel alloc] initWithFrame:CGRectMake(0, 0, 300, 120)];
  	[self.view addSubview:self.countingLabel];
  
  	// 常规设置，QCountingLabel 继承 UILabel, 设置和 UILabel 一样
  	self.countingLabel.center = self.view.center;
  	self.countingLabel.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.5];
  	self.countingLabel.font = [UIFont systemFontOfSize:50];
  	self.countingLabel.textColor = [UIColor redColor];
  	self.countingLabel.textAlignment = NSTextAlignmentCenter;
  
  	// 设置文本样式
  	self.countingLabel.format = @"%.2f";
  
  	// 设置分隔符样式
  	self.countingLabel.positiveFormat = @"###,###.##";
  
  	// 设置变化范围及动画时间
  	[self.countingLabel q_countFromValue:0 toValue:3048.64 withDuration:1.0f];
  

  • 效果