前言
久违的再次动笔写博客。。。
说明
从一年前开始使用即刻这款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;
}
结束
其实效果挺简单， 当然实现也挺简单， 可能有更好的实现方法， 希望看到的朋友，告诉我。。。
