iOS培训-斗鱼直播APP之加载数据动画
五年级 记叙文 1749字 242人浏览 荣儿星

玩转【斗鱼直播APP 】系列之加载数据动画

作者:小码哥教育

效果如下:

效果分析

在每个界面第一次请求数据时,会先展示一个请求数据的动画 多个界面都有该动画效果,因此需要抽取一个最基本的父控制器

在父控制器中添加显示动画View&UICollectionView的业务逻辑即可 进入界面,展示动画View ,隐藏UICollectionView

请求到数据,隐藏动画View ,展示UICollectionView

父控制器抽取

四个界面需要有一个共同的父类

(之后做其他界面也会集成子该类)

创建BaseViewController

在控制器中添加用于展示动画的UIImageView

给UIImageView 设置执行动画的图片,并且执行动画

因为其他界面用于展示内容的View

对外提供方法,当数据在家完成时,可以隐藏UIImageView&显示展示内容的View

代码分析<

代码如下: 1. class BaseViewController :UIViewController { 2. 3. // MARK: 定义属性 4. var contentView :UIView ? 5. 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. }() 16. 17. // MARK:- 系统回调 18. override func viewDidLoad(){ 19. super . viewDidLoad () 20. 21. setupUI() 22. } 23. } 24. 25. 26. extension BaseViewController { 27. func setupUI(){ 28. // 0.设置整个背景 29. view. backgroundColor =UIColor (r :250, g:250, b:250) 30. 31. // 1.添加animImageView 32. view. addSubview (animImageView ) 33. 34. // 2.执行动画 35. animImageView. startAnimating () 36. 37. // 3.隐藏collectionView 38. contentView?. isHidden =true 39. } 40. 41. func loadDataFinished(){ 42. animImageView. stopAnimating () 43. animImageView. isHidden =true 44. contentView?. isHidden =false 45. } 46. }