前言

久违的再次动笔写博客。。。

说明

从一年前开始使用即刻这款APP， 一直觉得它的细节做的特别好， 最近开始动笔，仿写它的一些效果实现， 从点赞数字变化开始。

Demo 地址

https://github.com/94haox/AnimationNumber

实现

开始

先看下效果（GIF图，没做好需要等一等，当然我建议是直接下载Demo，运行。。。 ）

效果图

在点赞的时候， 点赞数+1， 或者取消点赞 -1， 只在个位（当然临界点是牵扯到各个位）实现 向上平滑而出， 或者向下平滑而出的动画

思考

• 首先点赞数是一个字符串，我们需要对字符串中的单个字符进行操作，那么首先， 我们需要将字符串分割，便于操作；
• 分割成单个字符后， 需要用UILabel 显示， 意味着需要相同个数的Label；
• 对Label做动画；

动手敲代码

新建一个类 继承于UIView, AnimationNumber;

添加一些便于自定义label的属性

// 显示label的字体
@property (nonatomic, strong)UIFont *numberFont;
// 显示label的颜色
@property (nonatomic, strong)UIColor *numberColor;
// 用于接收字符串
@property (nonatomic, copy) NSString *currentNumber;

在 Extension 中添加一些我们不需要暴露在外的属性

// 之前显示的数字
@property (nonatomic, strong) NSMutableArray<NSString *> *oldNumbers;
// 之前显示的Label
@property (nonatomic, strong) NSMutableArray<UILabel *> *oldLabelList;
// 当前显示的数字
@property (nonatomic, strong) NSMutableArray<NSString *> *currentNumbers;
// 当前显示的Label
@property (nonatomic, strong) NSMutableArray<UILabel *> *currentLabelList;
@property (nonatomic, strong) UIView *contentView;

在第一次接收字符串的时候， oldNumbers，oldLabelList 应该是空的；只有在第二次接收的时候才会储存上一次的分割后的number， 和Label；

初始化

- (instancetype)initWithFrame:(CGRect)frame{
  if (self = [super initWithFrame:frame]) {
    self.oldNumbers = [NSMutableArray arrayWithCapacity:1];
    self.currentNumbers = [NSMutableArray arrayWithCapacity:1];
    self.oldLabelList = [NSMutableArray arrayWithCapacity:1];
    self.currentLabelList = [NSMutableArray arrayWithCapacity:1];

    // contentView 写成了懒加载， 看Demo
    [self addSubview:self.contentView]; 
  }
  return self;
}

下面说明， 主要实现的方法；

 // 分割 字符串
- (void)carveUpNumberWith:(NSString *)number{
  NSMutableArray<UILabel *> *labelsList = [NSMutableArray array];
  NSMutableArray<NSString *> *numbersList = [NSMutableArray array];
  for (int i = 0; i < number.length; i++) {
    NSString *stringItem = [number substringWithRange:NSMakeRange(i, 1)];
    // Label创建 看Demo
    UILabel *label = [self createLabels:stringItem];
    CGRect frame = label.frame;
    // 第一个Label
    frame.origin.x = labelsList.count > 0 ? CGRectGetMaxX(labelsList.lastObject.frame) : 0;
    frame.origin.y = 0;
    label.frame = frame;
    [labelsList addObject:label];
    [numbersList addObject:stringItem];
  }
  self.currentLabelList = labelsList;
  self.currentNumbers = numbersList;
}

最重要的方法

实现动画
- (void)updateLabelsWithNumber:(NSString *)number{
    //  通过oldLabelList.count判断是否是第一次接收字符串
  if (self.oldLabelList.count > 0) {
    // 判断两次数字的差别， 从最后一位开始比较
    NSInteger length = number.length;
    NSInteger oldLength = self.oldLabelList.count;
    for (int i = 0; i < self.currentNumbers.count; i ++) {
      NSString *item = [number substringWithRange:NSMakeRange(length - i-1, 1)];
      UILabel *label = self.currentLabelList[length-i-1];
      // 判断 防止数组越界
      if (i < self.oldLabelList.count) {
        NSString *oldItem = self.oldNumbers[oldLength - i-1];
        UILabel *oldLabel = self.oldLabelList[oldLength-i-1];
        // 判断相同位置， 是否数字相同
        if (![oldItem isEqualToString:item]) {
        //  相同位置， 单个数字， 现在比之前大， 动画从上往下， 现在比之前小则从下往上
          CGRect frame = label.frame;
          if (oldItem.integerValue < item.integerValue) {
           frame.origin.y = - label.frame.size.height;
          }else{
           frame.origin.y = label.frame.size.height;
          }
          label.frame = frame;

          [UIView animateWithDuration:animationDuration delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            CGRect frame = label.frame;
            frame.origin.y = 0;
            label.frame = frame;

            CGRect oldFrame = oldLabel.frame;
            if (oldItem.integerValue < item.integerValue) {
              oldFrame.origin.y = oldLabel.frame.size.height;
            }else{
              oldFrame.origin.y = -oldLabel.frame.size.height;
            }
            oldLabel.frame = oldFrame;
          } completion:^(BOOL finished) {
            // 做完动画， 移出视图
            [oldLabel removeFromSuperview];
          }];
        }else{
          [oldLabel removeFromSuperview];
        }
        
      }else{
        CGRect frame = label.frame;
        frame.origin.y = - label.frame.size.height;
        label.frame = frame;
        
        [UIView animateWithDuration:animationDuration delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
          CGRect frame = label.frame;
          frame.origin.y = 0;
          label.frame = frame;
        } completion:nil];
        
      }
    }
  }
  
  // 当之前的数值比较大时， 移除多出的位数
  if (self.oldLabelList.count > self.currentLabelList.count) {
    for (int i = 0; i < self.oldLabelList.count - self.currentLabelList.count; i ++) {
      UILabel *label = self.oldLabelList[i];
      [label removeFromSuperview];
    }
  }
  
  self.oldLabelList = self.currentLabelList;
  self.oldNumbers = self.currentNumbers;
  
}

结束

其实效果挺简单， 当然实现也挺简单， 可能有更好的实现方法， 希望看到的朋友，告诉我。。。