TableView là được sử dụng rất nhiều trong các ứng dụng của chúng ta. Vì vậy, việc tạo thêm một số hiệu ứng cho TableView khiến cho ứng dụng trở lên sinh động và bớt nhàm chán hơn. Chỉ với một vài câu lệnh, mọi thứ sẽ trở lên mới mẻ và dễ gần hơn rất nhiều lần.
Hầu như các animation của tableview sẽ được tạo trong method dưới đây:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// Add animations here
}Chúng ta bắt đầu với hiệu ứng đơn giản nhất nhưng được sử dụng nhiều nhất:
Kết quả đạt được:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.alpha = 0
UIView.animate(withDuration: 0.5,
delay: 0.1 * Double(indexPath.row),
animations: {
cell.alpha = 1
})
}Hiệu ứng Bounce animation:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.transform = CGAffineTransform(translationX: 0, y: 60)
UIView.animate(
withDuration: 1,
delay: 0.05 * Double(indexPath.row),
usingSpringWithDamping: 0.4,
initialSpringVelocity: 0.1,
options: [.curveEaseInOut],
animations: {
cell.transform = CGAffineTransform(translationX: 0, y: 0)
})
}Move and Fade Animation
Kết hợp hai hiệu ứng trên và chung ta ngừng sử dụng hiệu ứng Spring cho Cell, một hiệu ứng mới được tạo thành.
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.transform = CGAffineTransform(translationX: 0, y: 30)
cell.alpha = 0
UIView.animate(
withDuration: 1,
delay: 0.05 * Double(indexPath.row),
options: [.curveEaseInOut],
animations: {
cell.transform = CGAffineTransform(translationX: 0, y: 0)
cell.alpha = 1
})
}Slide in Animation
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.transform = CGAffineTransform(translationX: tableView.bounds.width, y: 0)
UIView.animate(
withDuration: 1,
delay: 0.5 * Double(indexPath.row),
options: [.curveEaseInOut],
animations: {
cell.transform = CGAffineTransform(translationX: 0, y: 0)
})
} Trên đây là một số ví dụ về việc thêm animation vào tableview bằng các hiệu ứng cơ bản của UIView( transform, alpha …) ngoài ra với 1 số hiệu ứng khác như Flip, Change color … cũng được sử dụng rất nhiều trong các hiệu ứng animation. Chúng ta hoàn toàn có thể tạo ra các animation mang mang màu sắc của cá nhân như các họa sĩ code vậy.
Một lưu ý đó là khi muốn kiểm soát tốt hơn các animation thì chúng ta nên tạo ra một class riêng để xử lý việc chạy animation. Nó đồng thời cũng kiểm soát việc animation chỉ chạy một lần duy nhất với tất cả các cell.