UItableViewCell的動畫swift版

分類:IT技術 時間:2016-10-11
### **tableViewCell**的動畫效果
看到很多APP的tableViewCel在從屏幕外進入屏幕的時候會有很炫的動畫,就找資料寫了一個demo,非常炫酷,也非常實用
- 先看下實現的效果吧,有兩種動畫效果

![cell動畫](https://static.oschina.net/uploads/img/201607/19184619_mtoj.gif "cell動畫")
- 下面開始正式內容
1.創建工程,添加2個ViewController,實現NavigationController跳轉
2.紅色cell的動畫效果,需要重寫**viewWillAppear**方法,在**viewWillAppear**方法中將所有的cell移動到屏幕外邊,並且設置動畫

```
override func viewWillAppear(animated: Bool) {
    // tableView重新加載視圖
   self.tableView.reloadData()
    // 獲取tableView所有的cell的數組
   let cells = self.tableView.visibleCells
   for cell in cells {
        // 將每個cell移動到屏幕外
       cell.transform = CGAffineTransformMakeTranslation(0, self.view.frame.size.height)
    }
    // 將每個cell移動到自己的位置,並且根據cell的index設置延時
    for (index, cell) in cells.enumerate() {
        UIView.animateWithDuration(1, delay: 0.05 * Double(index), options: .CurveLinear, animations: { () -> Void in
        cell.transform = CGAffineTransformMakeTranslation(0, 0)
        }, completion: { (finished) -> Void in     
        })
    }    
}
```
 3.綠色cell 的動畫效果,這個動畫效果我們需要在**willDisplayCell**的代理方法中實現,並且需要用到UIview的簡單動畫
```
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    // 設置大小縮放
     let trans = CATransform3DMakeScale(0.1, 0.1, 0.1)
    // 在大小縮放的基礎上設置旋轉
     cell.layer.transform = CATransform3DRotate(trans, CGFloat(M_PI_2), 0, 0, 1)
     UIView.animateWithDuration(1) { () -> Void in
        // 動畫實現將cell的layer復原
         cell.layer.transform = CATransform3DIdentity
     }
    // 最後復原cell的frame
     cell.frame = CGRectMake(0, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height);    
}
```
- 這樣帶動畫的cell就完成了,附上github地址:[cell動畫](https://github.com/qq360078224/cellAnimation),喜歡的可以給星支持一下啦~~另外更多iOS動畫效果可以參考我的另一篇博客:[iOS核心動畫詳解swift版](http://my.oschina.net/ozawa4865/blog/714904)

Tags: 動畫 工程 資料

文章來源:


ads
ads

相關文章
ads

相關文章

ad