2018-10-29

UITableView 是iOS日常開發(fā)中經(jīng)常使用到的控件。tableView的普通展示效果比較生硬鹊杖,為了提升APP的活力积瞒,提升體驗(yàn),我們可以對(duì)根據(jù)tableView的特點(diǎn)缰贝,操作Cell實(shí)現(xiàn)一些動(dòng)畫效果。
我寫了一個(gè)簡(jiǎn)單的動(dòng)畫集 TableViewAnimationKit,只需要一行代碼就可以讓tableView實(shí)現(xiàn)動(dòng)畫
目前有大概10個(gè)動(dòng)畫绽左,后續(xù)會(huì)優(yōu)化增加蹋凝。
源碼放到Github上: TableViewAnimationKit歡迎大家star房交、下載,交流溝通。

正文

一帜慢、效果展示:


1819750-5969d06fc5f0b1ad.gif
1819750-cf35bdb88e2233d3.gif
1819750-d15b7c658245dd00.gif

二、使用方法

TableViewAnimationKit調(diào)用各個(gè)動(dòng)畫的方法都為類方法,只需一行代碼就可以調(diào)用。
eg:

[TableViewAnimationKit shakeAnimationWithTableView:tableView];

TableViewAnimationKit提供的動(dòng)畫類方法

+ (void)moveAnimationWithTableView:(UITableView *)tableView;
+ (void)alphaAnimationWithTableView:(UITableView *)tableView;
+ (void)fallAnimationWithTableView:(UITableView *)tableView;
+ (void)shakeAnimationWithTableView:(UITableView *)tableView;
+ (void)overTurnAnimationWithTableView:(UITableView *)tableView;
+ (void)toTopAnimationWithTableView:(UITableView *)tableView;
+ (void)springListAnimationWithTableView:(UITableView *)tableView;
+ (void)shrinkToTopAnimationWithTableView:(UITableView *)tableView;
+ (void)layDonwAnimationWithTableView:(UITableView *)tableView;
+ (void)roteAnimationWithTableView:(UITableView *)tableView;

三怜森、源碼講解

先舉其中一個(gè)動(dòng)畫效果為例子:

1819750-d15b7c658245dd00.gif

動(dòng)畫效果為Cell左右各自插入翅萤。
實(shí)現(xiàn)代碼很簡(jiǎn)單如下:

  • (void)shakeAnimationWithTableView:(UITableView *)tableView {

    NSArray *cells = tableView.visibleCells;
    for (int i = 0; i < cells.count; i++) {
    UITableViewCell cell = [cells objectAtIndex:i];
    if (i%2 == 0) {
    cell.transform = CGAffineTransformMakeTranslation(-XS_SCREEN_WIDTH,0);
    }else {
    cell.transform = CGAffineTransformMakeTranslation(XS_SCREEN_WIDTH,0);
    }
    [UIView animateWithDuration:0.4 delay:i
    0.03 usingSpringWithDamping:0.75 initialSpringVelocity:1/0.75 options:0 animations:^{
    cell.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {

      }];
    

    }
    }
    主要思路為:
    獲得tableview的visibleCells數(shù)組恐疲,進(jìn)行遍歷,對(duì)每個(gè)執(zhí)行動(dòng)畫套么,不同cell的執(zhí)行時(shí)間培己、方向有所差異,一起構(gòu)成整個(gè)動(dòng)畫胚泌。

四省咨、其他一些動(dòng)畫效果

1819750-0afc78f10af2b2c7.gif
1819750-4d944aa53c9bd4c9.gif
1819750-eb4098312d48dd11.gif
1819750-ca7bd0c59dfd74dd.gif
1819750-ca78886a3e9b0cf0.gif

后語

源碼放到Github上: TableViewAnimationKit有需要的同學(xué)可以下載、star玷室,目前只算Demo級(jí)別零蓉,后面會(huì)繼續(xù)優(yōu)化、增加動(dòng)畫穷缤。如有什么想法敌蜂,歡迎進(jìn)行技術(shù)交流。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末津肛,一起剝皮案震驚了整個(gè)濱河市章喉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖秸脱,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件落包,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡摊唇,警方通過查閱死者的電腦和手機(jī)妥色,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來遏片,“玉大人嘹害,你說我怎么就攤上這事∷北悖” “怎么了笔呀?”我有些...
    開封第一講書人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)髓需。 經(jīng)常有香客問我许师,道長(zhǎng),這世上最難降的妖魔是什么僚匆? 我笑而不...
    開封第一講書人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任微渠,我火速辦了婚禮,結(jié)果婚禮上咧擂,老公的妹妹穿的比我還像新娘逞盆。我一直安慰自己,他們只是感情好松申,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開白布云芦。 她就那樣靜靜地躺著,像睡著了一般贸桶。 火紅的嫁衣襯著肌膚如雪舅逸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評(píng)論 1 300
  • 那天皇筛,我揣著相機(jī)與錄音琉历,去河邊找鬼。 笑死水醋,一個(gè)胖子當(dāng)著我的面吹牛旗笔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播离例,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼换团,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了宫蛆?” 一聲冷哼從身側(cè)響起艘包,我...
    開封第一講書人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤的猛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后想虎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卦尊,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年舌厨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了岂却。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡裙椭,死狀恐怖躏哩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情揉燃,我是刑警寧澤扫尺,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布,位于F島的核電站炊汤,受9級(jí)特大地震影響正驻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜抢腐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一姑曙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧迈倍,春花似錦伤靠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至提完,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間丘侠,已是汗流浹背徒欣。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜗字,地道東北人打肝。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像挪捕,于是被迫代替她去往敵國(guó)和親粗梭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

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

  • 淘寶貨源渠道模型 批發(fā)市場(chǎng)進(jìn)貨的特點(diǎn) 批發(fā)市場(chǎng)的價(jià)格低滞乙,對(duì)于網(wǎng)店來說,容易實(shí)現(xiàn)薄利多銷鉴嗤,但是需要壓貨 批發(fā)市場(chǎng)種類...
    武林大蝦閱讀 616評(píng)論 0 6
  • 退出簡(jiǎn)書斩启,還沒發(fā)展起來就自己作死的公司,惡心
    免貴姓宋閱讀 179評(píng)論 0 0
  • 今天上午班上忙了半天 下午沒什么事就沒有去 在家學(xué)習(xí)產(chǎn)品知識(shí)醉锅、做產(chǎn)品示范 在學(xué)和做的過程中 減少了對(duì)事業(yè)的難度 增...
    郭玉倩閱讀 208評(píng)論 0 0
  • 前言之前有人留言說想看我的所謂奮斗史兔簇,前天的這篇調(diào)查「以產(chǎn)品思維去做微信公眾號(hào)」也顯示這部分人比例還不少,今天突然...
    程本超閱讀 1,298評(píng)論 1 3
  • 這些年此虑,你信任過誰? 文章首發(fā)寫手圈 作者:李沐遙 01 曼莉口锭,是我工作中認(rèn)識(shí)的一個(gè)好姐姐朦前。在剛剛經(jīng)歷了喪夫之痛后...
    李沐遙閱讀 486評(píng)論 2 2