一行程式碼讓你的TableView動起來-iOS動畫

王小樹發表於2017-09-07

前言

UITableView 是iOS日常開發中經常使用到的控制元件。tableView的普通展示效果比較生硬，為了提升APP的活力，提升體驗，我們可以對根據tableView的特點，操作Cell實現一些動畫效果。
我寫了一個簡單的動畫集 TableViewAnimationKit，只需要一行程式碼就可以讓tableView實現動畫
目前有大概10個動畫，後續會優化增加。
原始碼放到Github上： TableViewAnimationKit歡迎大家star、下載，交流溝通。

正文

一、效果展示：

二、使用方法

TableViewAnimationKit呼叫各個動畫的方法都為類方法，只需一行程式碼就可以呼叫。
eg:

[TableViewAnimationKit shakeAnimationWithTableView:tableView];複製程式碼

TableViewAnimationKit提供的動畫類方法

+ (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;複製程式碼

三、原始碼講解

先舉其中一個動畫效果為例子：

動畫效果為Cell左右各自插入。
實現程式碼很簡單如下：

+ (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陣列，進行遍歷，對每個執行動畫，不同cell的執行時間、方向有所差異，一起構成整個動畫。