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