Day13 - tableViewCell 动画显示

效果图

最终效果如下

代码结合了day11的学习内容

1、UI布局

在ViewController加入导航栏

添加导航栏

然后拖入tableView

设置约束

拖入一个tableViewCell

拖入cell

选中tableViewCell

设置属性

创建一个类继承UITableViewCell类名：FirstTableViewCell
在进入storyboard中选择Cell

设置关联

后面的ViewController和这个类似，不做介绍了。

2、实现必要的代理方法

定义属性：记得把tableView拖入到ViewController中

@IBOutlet weak var tableView: UITableView!
private lazy var data : NSArray = ["测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据"]

代理方法

 // MARK: - Table view data source
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("firstCell", forIndexPath: indexPath) as! FirstTableViewCell
        
        cell.textLabel?.text = data[indexPath.row] as? String
        
        return cell
    }

修改Cell背景颜色

 private func changeColor(indexPath:NSIndexPath) -> UIColor{
        let green = CGFloat(indexPath.row) / CGFloat(data.count)
        return UIColor(red: 1, green: green, blue:  1, alpha: 1)
    }
    
    func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
        cell.backgroundColor = changeColor(indexPath)
    }

设置代理

tableView.delegate = self
        tableView.dataSource = self
        
        automaticallyAdjustsScrollViewInsets = false

//class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource

实现动画

 override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        
        
        animationTable()
        
    }
    
    
    private func animationTable(){
        tableView.reloadData()
        
        //获取可见的cell
        let cells = tableView.visibleCells
        
        //获取tableview高度
        let height : CGFloat = tableView.bounds.height
        
        //遍历，并设置每个cell的位置
        for i in cells {
            let cell : UITableViewCell = i as UITableViewCell
            cell.transform = CGAffineTransformMakeTranslation(0, height)
        }
        
        //设置动画
        
        var index = 0.0
        
        //遍历并设置动画
        for item in cells {
            let cell : UITableViewCell = item as UITableViewCell
            UIView.animateWithDuration(1.5, delay: 0.05 * index, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveLinear, animations: { 
                cell.transform = CGAffineTransformMakeTranslation(0, 0)
                }, completion: nil)
            index += 1
        }
    }

第二个页面的源码:附上OC与Swift对比

//
//  SecondTableViewController.swift
//  TableViewCellAnimation
//
//  Created by ios on 16/9/19.
//  Copyright © 2016年 ios. All rights reserved.
//

import UIKit

class SecondTableViewController: UITableViewController {
    
    private lazy var data : NSArray = ["测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据","测试数据"]
    
    override func viewDidLoad() {
    
    }
    
    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        //开始动画
        animationTable()
    }
    
    
    private func animationTable(){
        tableView.reloadData()
        
        //获取可见的cell
        let cells = tableView.visibleCells
        //OC
//        NSArray * cells = self.talbeView.visibleCells;
        
        //获取tableview高度
        let height : CGFloat = tableView.bounds.height
        //OC
//        CGFloat height = self.tableView.bounds.size.height;
        
        //遍历，并设置每个cell的位置
        for i in cells {
            let cell : UITableViewCell = i as UITableViewCell
            cell.transform = CGAffineTransformMakeTranslation(0, -height)
        }
        
        //OC
//        for (UITableViewCell * i in cells) {
//            i.transform = CGAffineTransformMakeTranslation(0, -height);
//        }
        
        //设置动画
        
        var index = 0.0
        //OC
//        CGFloat index = 0.0;
        
        //遍历并设置动画
        for item in cells {
            let cell : UITableViewCell = item as UITableViewCell
            UIView.animateWithDuration(1.5, delay: 0.05 * index, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveLinear, animations: {
                cell.transform = CGAffineTransformMakeTranslation(0, 0)
                }, completion: nil)
            index += 1
        }
        
        //OC
//        for (UITableViewCell * item in cells) {
//            [UIView animateWithDuration:1.5 delay:index * 0.01 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
//                cell.transform = CGAffineTransformMakeTranslation(0, 0)
//                } completion:nil];
//        }
    }

    
    
    
    // MARK: - Table view data source

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return data.count
    }

    
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("secondCell", forIndexPath: indexPath) as! SecondTableViewCell

        cell.textLabel?.text = data[indexPath.row] as? String

        return cell
    }
    
    
    private func changeColor(indexPath:NSIndexPath) -> UIColor{
        let green = CGFloat(indexPath.row) / CGFloat(data.count)
        return UIColor(red: 1 - (green), green: green, blue:  1, alpha: 1)
    }
    
    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
        cell.backgroundColor = changeColor(indexPath)
    }
}

Demo - TableViewCellAnimation