小碼哥-鬥魚直播APP之加載數據動畫

加載數據動畫

動畫效果

• 效果如下：
  

• 效果分析

  • 在每個界面第一次請求數據時，會先展示一個請求數據的動畫
  • 多個界面都有該動畫效果，因此需要抽取一個最基本的父控制器
  • 在父控制器中添加顯示動畫View&UICollectionView的業務邏輯即可
    • 進入界面，展示動畫View，隱藏UICollectionView
    • 請求到數據，隱藏動畫View，展示UICollectionView

父控制器抽取

• 四個界面需要有一個共同的父類
  • （之後做其他界面也會集成子該類）
• 創建BaseViewController
  • 在控制器中添加用於展示動畫的UIImageView
  • 給UIImageView設置執行動畫的圖片，並且執行動畫
  • 因爲其他界面用於展示內容的View
  • 對外提供方法，當數據在家完成時，可以隱藏UIImageView&顯示展示內容的View
• 代碼分析<
  
• 代碼如下：

1. class BaseViewController: UIViewController {
3. // MARK: 定義屬性
4. var contentView : UIView?
6. // MARK: 懶加載屬性
7. lazy var animImageView : UIImageView = { [unowned self] in
8. let imageView = UIImageView(image: UIImage(named: "img_loading_1"))
9. imageView.center = self.view.center
10. imageView.animationImages = [UIImage(named: "img_loading_1")!, UIImage(named: "img_loading_2")!]
11. imageView.animationRepeatCount = LONG_MAX
12. imageView.animationDuration = 0.3
13. imageView.autoresizingMask = [.flexibleBottomMargin, .flexibleTopMargin]
14. return imageView
15. }()
17. // MARK:- 系統回調
18. override func viewDidLoad() {
19. super.viewDidLoad()
21. setupUI()
22. }
23. }
26. extension BaseViewController {
27. func setupUI() {
28. // 0.設置整個背景
29. view.backgroundColor = UIColor(r: 250, g: 250, b: 250)
31. // 1.添加animImageView
32. view.addSubview(animImageView)
34. // 2.執行動畫
35. animImageView.startAnimating()
37. // 3.隱藏collectionView
38. contentView?.isHidden = true
39. }
41. func loadDataFinished() {
42. animImageView.stopAnimating()
43. animImageView.isHidden = true
44. contentView?.isHidden = false
45. }
46. }