iOS - 給數(shù)字的改變增加動(dòng)效

地址放在最前面:

簡單實(shí)現(xiàn)動(dòng)效改變數(shù)字-github

寫在前面

最近在使用一些app時(shí) , 發(fā)現(xiàn)他們點(diǎn)贊功能后面的數(shù)字增加或者減少會(huì)有一個(gè)動(dòng)畫改變的效果 , 很喜歡這樣的小細(xì)節(jié) , 于是自己動(dòng)手做了一個(gè)類似demo ~~

效果圖

demo效果圖
demo效果圖

思路分析

首先要做到類似的對一個(gè)數(shù)中所有位數(shù)的數(shù)字單獨(dú)進(jìn)行動(dòng)畫 , 那就不能簡單的讓label或是view直接做動(dòng)畫 , 而是應(yīng)該根據(jù)位數(shù)切分成幾個(gè)單獨(dú)的部分 , 然后根據(jù)值的變化 , 找出需要進(jìn)行動(dòng)畫的位數(shù)對應(yīng)的部分(好繞口 = =!)進(jìn)行動(dòng)畫處理.
我這里的做法是每次值發(fā)生改變 , 創(chuàng)建(或復(fù)用)相應(yīng)位數(shù)的CAScrollLayer(每個(gè)layer上面有@".",@"0",@"1",...@"9"這10個(gè)label.layer) , 計(jì)算每個(gè)scrollLayer的frame后添加到view上. 然后根據(jù)位數(shù)上的值計(jì)算改變后的scrollLayer.sublayerTransform.translation.y , 進(jìn)行動(dòng)畫處理.
如圖所示,顯示數(shù)字810時(shí)view對應(yīng)的結(jié)構(gòu)

結(jié)構(gòu)

<small><small><small><small> 話說圖好丑啊!!!!??(看不到,看不到..)</small></small></small></small>

代碼分析

  • 因?yàn)樵趧?chuàng)建scrollLayer時(shí), 需要對新舊兩個(gè)數(shù)值進(jìn)行比較 , 所以setter方法中應(yīng)該先設(shè)置scrollLayer , 然后再進(jìn)行賦值.創(chuàng)建的scrollLayer會(huì)保存在數(shù)組中
//設(shè)置顯示的數(shù)字
-(void)setNumberValue:(NSNumber *)numberValue {
    [self configScrollLayers:numberValue];
    _numberValue = numberValue;
}
  • 在configScrollLayer方法中,因?yàn)槲覀冇袝r(shí)候要復(fù)用這些scrollLayer , 而數(shù)字位數(shù)的復(fù)用是從低位到高位.(比如第一次數(shù)字是12 , 第二次數(shù)字是123 , 那么我們能復(fù)用的是第一次的個(gè)位和十位對應(yīng)的layer).所以我這里保存layer的數(shù)組 , 存放順序是從右到左 . 即array[0]代表的是最低位的數(shù)字(最右邊的數(shù)字). 計(jì)算layer位置也是從右到左計(jì)算 , 簡化邏輯
CGFloat lastX = 0;
    //先根據(jù)對齊方式 , 計(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的邏輯是先比較新舊兩個(gè)數(shù)組的個(gè)數(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];
        }
        
    }
  • 最后對每個(gè)位數(shù)上的layer進(jìn)行動(dòng)畫處理 , 滾動(dòng)到正確的位置
//遍歷layer 進(jìn)行賦值和計(jì)算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 , 不進(jìn)行動(dòng)畫展示
        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)建對象 , 然后進(jìn)行賦值就好了

  NumberTransformationView *view = [[NumberTransformationView alloc] initWithFrame:frame font:[UIFont systemFontOfSize:18]];

  view.numberValue = @200;

總結(jié)

這個(gè)功能總體來說是比較簡單的 , 我在動(dòng)手coding之前大致思路是這樣子的

  1. 首先要注意每個(gè)位數(shù)上的數(shù)字都應(yīng)該有動(dòng)畫效果 , 所以不應(yīng)該對整個(gè)數(shù)字做動(dòng)畫 , 而應(yīng)該切分成若干個(gè)模塊單獨(dú)進(jìn)行處理
  2. 切分后的模塊應(yīng)該注意復(fù)用 , 避免每次設(shè)值都要重新創(chuàng)建.
  3. 單獨(dú)來看, 每個(gè)位數(shù)上的邏輯處理是一樣的 , 所以應(yīng)該單獨(dú)拿出來作為一個(gè)功能.我這里對應(yīng)的是TextTransformationLayer . 所有邏輯和動(dòng)畫效果都在由這個(gè)類完成 , NumberTransformationView只是對前者功能的一個(gè)組合.

寫在最后

<big>**demo在最上 , 下載時(shí)歡迎順手賞個(gè)star. (¬_¬)
以上.
**</big>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末习贫,一起剝皮案震驚了整個(gè)濱河市答恶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌惭蹂,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡筹吐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進(jìn)店門秘遏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來骏令,“玉大人,你說我怎么就攤上這事垄提±拼” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵铡俐,是天一觀的道長凰兑。 經(jīng)常有香客問我,道長审丘,這世上最難降的妖魔是什么吏够? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮滩报,結(jié)果婚禮上锅知,老公的妹妹穿的比我還像新娘。我一直安慰自己脓钾,他們只是感情好售睹,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著可训,像睡著了一般昌妹。 火紅的嫁衣襯著肌膚如雪捶枢。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天飞崖,我揣著相機(jī)與錄音烂叔,去河邊找鬼。 笑死固歪,一個(gè)胖子當(dāng)著我的面吹牛蒜鸡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播牢裳,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼逢防,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了贰健?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤恬汁,失蹤者是張志新(化名)和其女友劉穎伶椿,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體氓侧,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡脊另,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了约巷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偎痛。...
    茶點(diǎn)故事閱讀 37,997評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖独郎,靈堂內(nèi)的尸體忽然破棺而出踩麦,到底是詐尸還是另有隱情,我是刑警寧澤氓癌,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布谓谦,位于F島的核電站,受9級特大地震影響贪婉,放射性物質(zhì)發(fā)生泄漏反粥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一疲迂、第九天 我趴在偏房一處隱蔽的房頂上張望才顿。 院中可真熱鬧,春花似錦尤蒿、人聲如沸郑气。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽竣贪。三九已至军洼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間演怎,已是汗流浹背匕争。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留爷耀,地道東北人甘桑。 一個(gè)月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像歹叮,于是被迫代替她去往敵國和親跑杭。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容