前言
久違的再次動(dòng)筆寫博客匾嘱。撬讽。。
說明
從一年前開始使用即刻這款A(yù)PP靖榕， 一直覺得它的細(xì)節(jié)做的特別好， 最近開始動(dòng)筆颤枪，仿寫它的一些效果實(shí)現(xiàn)淑际， 從點(diǎn)贊數(shù)字變化開始畏纲。
Demo 地址
https://github.com/94haox/AnimationNumber
實(shí)現(xiàn)
開始
先看下效果（GIF圖，沒做好需要等一等春缕，當(dāng)然我建議是直接下載Demo盗胀，運(yùn)行。锄贼。票灰。 ）
效果圖
在點(diǎn)贊的時(shí)候， 點(diǎn)贊數(shù)+1宅荤， 或者取消點(diǎn)贊 -1屑迂， 只在個(gè)位（當(dāng)然臨界點(diǎn)是牽扯到各個(gè)位）實(shí)現(xiàn) 向上平滑而出， 或者向下平滑而出的動(dòng)畫
思考
- 首先點(diǎn)贊數(shù)是一個(gè)字符串冯键，我們需要對字符串中的單個(gè)字符進(jìn)行操作惹盼，那么首先， 我們需要將字符串分割惫确，便于操作手报；
- 分割成單個(gè)字符后蚯舱， 需要用UILabel 顯示， 意味著需要相同個(gè)數(shù)的Label掩蛤；
- 對Label做動(dòng)畫晓淀；
動(dòng)手敲代碼
新建一個(gè)類 繼承于UIView, AnimationNumber;
添加一些便于自定義label的屬性
// 顯示label的字體
@property (nonatomic, strong)UIFont *numberFont;
// 顯示label的顏色
@property (nonatomic, strong)UIColor *numberColor;
// 用于接收字符串
@property (nonatomic, copy) NSString *currentNumber;
在 Extension 中添加一些我們不需要暴露在外的屬性
// 之前顯示的數(shù)字
@property (nonatomic, strong) NSMutableArray<NSString *> *oldNumbers;
// 之前顯示的Label
@property (nonatomic, strong) NSMutableArray<UILabel *> *oldLabelList;
// 當(dāng)前顯示的數(shù)字
@property (nonatomic, strong) NSMutableArray<NSString *> *currentNumbers;
// 當(dāng)前顯示的Label
@property (nonatomic, strong) NSMutableArray<UILabel *> *currentLabelList;
@property (nonatomic, strong) UIView *contentView;
在第一次接收字符串的時(shí)候， oldNumbers盏档，oldLabelList 應(yīng)該是空的凶掰；只有在第二次接收的時(shí)候才會(huì)儲(chǔ)存上一次的分割后的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;
}
下面說明， 主要實(shí)現(xiàn)的方法稚配；
// 分割 字符串
- (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創(chuàng)建 看Demo
UILabel *label = [self createLabels:stringItem];
CGRect frame = label.frame;
// 第一個(gè)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;
}
最重要的方法
實(shí)現(xiàn)動(dòng)畫
- (void)updateLabelsWithNumber:(NSString *)number{
// 通過oldLabelList.count判斷是否是第一次接收字符串
if (self.oldLabelList.count > 0) {
// 判斷兩次數(shù)字的差別畅涂， 從最后一位開始比較
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];
// 判斷 防止數(shù)組越界
if (i < self.oldLabelList.count) {
NSString *oldItem = self.oldNumbers[oldLength - i-1];
UILabel *oldLabel = self.oldLabelList[oldLength-i-1];
// 判斷相同位置， 是否數(shù)字相同
if (![oldItem isEqualToString:item]) {
// 相同位置道川， 單個(gè)數(shù)字午衰， 現(xiàn)在比之前大， 動(dòng)畫從上往下冒萄， 現(xiàn)在比之前小則從下往上
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) {
// 做完動(dòng)畫臊岸， 移出視圖
[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];
}
}
}
// 當(dāng)之前的數(shù)值比較大時(shí)， 移除多出的位數(shù)
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;
}
結(jié)束
其實(shí)效果挺簡單尊流， 當(dāng)然實(shí)現(xiàn)也挺簡單帅戒， 可能有更好的實(shí)現(xiàn)方法， 希望看到的朋友崖技，告訴我逻住。。迎献。
