第二十一篇玩转【斗鱼直播APP】系列之加载数据动画

最新推荐文章于 2018-01-28 18:01:00 发布

转载最新推荐文章于 2018-01-28 18:01:00 发布 · 1.3k 阅读

转载专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个通用的基类控制器BaseViewController的设计与实现方法，通过在控制器中加入UIImageView来展示加载数据时的动画效果。该方案适用于多种界面，通过简单的继承与调用即可实现数据加载时的动画展示及数据加载完成后动画的自动隐藏。

加载数据动画

动画效果

效果如下：
效果分析
- 在每个界面第一次请求数据时，会先展示一个请求数据的动画
- 多个界面都有该动画效果，因此需要抽取一个最基本的父控制器
- 在父控制器中添加显示动画View&UICollectionView的业务逻辑即可
  - 进入界面，展示动画View，隐藏UICollectionView
  - 请求到数据，隐藏动画View，展示UICollectionView

父控制器抽取

四个界面需要有一个共同的父类
- （之后做其他界面也会集成子该类）
创建BaseViewController
- 在控制器中添加用于展示动画的UIImageView
- 给UIImageView设置执行动画的图片，并且执行动画
- 因为其他界面用于展示内容的View
- 对外提供方法，当数据在家完成时，可以隐藏UIImageView&显示展示内容的View
代码分析<
代码如下：

class BaseViewController: UIViewController {
    // MARK: 定义属性
    var contentView : UIView?
    // MARK: 懒加载属性
    lazy var animImageView : UIImageView = { [unowned self] in
        let imageView = UIImageView(image: UIImage(named: "img_loading_1"))
        imageView.center = self.view.center
        imageView.animationImages = [UIImage(named: "img_loading_1")!, UIImage(named: "img_loading_2")!]
        imageView.animationRepeatCount = LONG_MAX
        imageView.animationDuration = 0.3
        imageView.autoresizingMask = [.flexibleBottomMargin, .flexibleTopMargin]
        return imageView
    }()
    // MARK:- 系统回调
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }
}
extension BaseViewController {
    func setupUI() {
        // 0.设置整个背景
        view.backgroundColor = UIColor(r: 250, g: 250, b: 250)
        // 1.添加animImageView
        view.addSubview(animImageView)
        // 2.执行动画
        animImageView.startAnimating()
        // 3.隐藏collectionView
        contentView?.isHidden = true
    }
    func loadDataFinished() {
        animImageView.stopAnimating()
        animImageView.isHidden = true
        contentView?.isHidden = false
    }
}