地址放在最前面:
寫在前面
最近在使用一些app時 , 發(fā)現(xiàn)他們點贊功能后面的數(shù)字增加或者減少會有一個動畫改變的效果 , 很喜歡這樣的小細(xì)節(jié) , 于是自己動手做了一個類似demo ~~
效果圖
demo效果圖
思路分析
首先要做到類似的對一個數(shù)中所有位數(shù)的數(shù)字單獨進行動畫 , 那就不能簡單的讓label或是view直接做動畫 , 而是應(yīng)該根據(jù)位數(shù)切分成幾個單獨的部分 , 然后根據(jù)值的變化 , 找出需要進行動畫的位數(shù)對應(yīng)的部分(好繞口 = =!)進行動畫處理.
我這里的做法是每次值發(fā)生改變 , 創(chuàng)建(或復(fù)用)相應(yīng)位數(shù)的CAScrollLayer(每個layer上面有@".",@"0",@"1",...@"9"這10個label.layer) , 計算每個scrollLayer的frame后添加到view上. 然后根據(jù)位數(shù)上的值計算改變后的scrollLayer.sublayerTransform.translation.y , 進行動畫處理.
如圖所示,顯示數(shù)字810時view對應(yīng)的結(jié)構(gòu)
結(jié)構(gòu)
<small><small><small><small> 話說圖好丑啊!!!!??(看不到,看不到..)</small></small></small></small>
代碼分析
- 因為在創(chuàng)建scrollLayer時, 需要對新舊兩個數(shù)值進行比較 , 所以setter方法中應(yīng)該先設(shè)置scrollLayer , 然后再進行賦值.創(chuàng)建的scrollLayer會保存在數(shù)組中
//設(shè)置顯示的數(shù)字
-(void)setNumberValue:(NSNumber *)numberValue {
[self configScrollLayers:numberValue];
_numberValue = numberValue;
}
- 在configScrollLayer方法中,因為我們有時候要復(fù)用這些scrollLayer , 而數(shù)字位數(shù)的復(fù)用是從低位到高位.(比如第一次數(shù)字是12 , 第二次數(shù)字是123 , 那么我們能復(fù)用的是第一次的個位和十位對應(yīng)的layer).所以我這里保存layer的數(shù)組 , 存放順序是從右到左 . 即array[0]代表的是最低位的數(shù)字(最右邊的數(shù)字). 計算layer位置也是從右到左計算 , 簡化邏輯
CGFloat lastX = 0;
//先根據(jù)對齊方式 , 計算最低位數(shù)字的x值
if (_alignment == NSTextAlignmentRight) {
lastX = self.frame.size.width - kAnimationNumberLabel_eachWidth - _contentEdgeInsets.right;
} else if (_alignment == NSTextAlignmentLeft) {
lastX = (kAnimationNumberLabel_eachWidth + _textMargin) * (numberValue.description.length - 1) + _contentEdgeInsets.left;
} else if (_alignment == NSTextAlignmentCenter) {
lastX = self.frame.size.width / 2.0 + (kAnimationNumberLabel_eachWidth * numberValue.description.length + _textMargin * (numberValue.description.length - 1)) / 2.0 - kAnimationNumberLabel_eachWidth;
}
- 復(fù)用layer的邏輯是先比較新舊兩個數(shù)組的個數(shù) , 如果新數(shù)組位數(shù)小于scrollLayers.count , 則需要將多余的layer從數(shù)組和頁面中移除 , 保存到temLayers中 . 如果新數(shù)組位數(shù)大于scrollLayers.count , 則需要判斷temLayers中是否有l(wèi)ayer , 有的話拿來復(fù)用 , 沒有的話創(chuàng)建新的layer
//如果之前數(shù)字的位數(shù)大于新數(shù)字的位數(shù) , 將多余的layer移除存放如temLayers中 , 復(fù)用剩下的layer
for (NSInteger i = numberValue.description.length; i<_scrollLayers.count; i++) {
[_temLayers addObject:_scrollLayers[i]];
[_scrollLayers[i] removeFromSuperlayer];
[_scrollLayers removeObjectAtIndex:i];
i--;
}
//如果之前的數(shù)字的位數(shù)小于新數(shù)字的位數(shù) , 添加新的layer .
for (NSInteger i = _scrollLayers.count; i<numberValue.description.length; i++) {
CGRect frame = CGRectMake(lastX - i * kAnimationNumberLabel_eachWidth, 0, kAnimationNumberLabel_eachWidth, self.bounds.size.height);
if (_temLayers.count) {
_temLayers.lastObject.frame = frame;
[_scrollLayers addObject:_temLayers.lastObject];
[self.layer addSublayer:_temLayers.lastObject];
[_temLayers removeObjectAtIndex:_temLayers.count - 1];
} else {
TextTransformationLayer *textLayer = [TextTransformationLayer layer];
textLayer.frame = frame;
[textLayer setTextArray:@[@".",@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9"] font:_font textColor:_textColor selectText:nil];
[_scrollLayers addObject:textLayer];
[self.layer addSublayer:textLayer];
}
}
- 最后對每個位數(shù)上的layer進行動畫處理 , 滾動到正確的位置
//遍歷layer 進行賦值和計算frame
for (NSInteger i = 0; i<_scrollLayers.count; i++) {
TextTransformationLayer *layer = _scrollLayers[i];
layer.frame = CGRectMake(lastX - i * kAnimationNumberLabel_eachWidth - _textMargin * i, 0, kAnimationNumberLabel_eachWidth, self.bounds.size.height);
//如果是0到9或者9到0 , 不進行動畫展示
BOOL animated;
NSString *newStr = [numberValue.description substringWithRange:NSMakeRange(_scrollLayers.count - i - 1, 1)];
if (i<_numberValue.description.length) {
NSString *curStr = [_numberValue.description substringWithRange:NSMakeRange(_numberValue.description.length - i - 1, 1)];
animated = (abs(newStr.intValue - curStr.intValue) < 9);
} else {
animated = NO;
}
animated = (animated && layer.selectText);
[layer setSelectText:newStr animated:animated];;
}
使用方法
使用的話就很簡單了 , 先創(chuàng)建對象 , 然后進行賦值就好了
NumberTransformationView *view = [[NumberTransformationView alloc] initWithFrame:frame font:[UIFont systemFontOfSize:18]];
view.numberValue = @200;
總結(jié)
這個功能總體來說是比較簡單的 , 我在動手coding之前大致思路是這樣子的
- 首先要注意每個位數(shù)上的數(shù)字都應(yīng)該有動畫效果 , 所以不應(yīng)該對整個數(shù)字做動畫 , 而應(yīng)該切分成若干個模塊單獨進行處理
- 切分后的模塊應(yīng)該注意復(fù)用 , 避免每次設(shè)值都要重新創(chuàng)建.
- 單獨來看, 每個位數(shù)上的邏輯處理是一樣的 , 所以應(yīng)該單獨拿出來作為一個功能.我這里對應(yīng)的是TextTransformationLayer . 所有邏輯和動畫效果都在由這個類完成 , NumberTransformationView只是對前者功能的一個組合.
寫在最后
<big>**demo在最上 , 下載時歡迎順手賞個star. (￢＿￢)
以上.
**</big>
