前言
hihi,勇敢的小伙伴儿们,大家好,loadingView在生活中已经是很常见了,各大平台都有不同的loadingView,最常见的浏览器就能看到的如下图这种Google Chrome的等待动画,
还有很多种其他的loading动画需要我们学习,
有时候我们使用做好的gif就可以实现,那么我们为什么要学习动画的绘制呢?
因为CALayer动画可以实现比UIView动画更丰富、更底层、效率更高的动画。能用代码实现的尽量不用资源文件,实际上也是对我们应用的一种瘦身。
话不多说,送上我的Demo地址:CALayerDemo1 (名字起得很随意hhhh),然后开始我们今天的学习吧~
正文
这篇文章通过两个加载动画向大家介绍CALayer的动画。按照面向对象的思想说,Layer其实就是一个模型类,它包含若干属性,并没有任何处理逻辑的方法,这些属性影响着显示在Layer中的内容。我们先来看看UIView和CALayer之间有什么区别和联系。
- 联系:Layer是View背后的那个女人。每一个UIView后面都有对应的CALayer,大家看到的在UIView中显示的内容其实是在CALayer中。
- 区别:
- View有复杂的、各种组合的布局机制。Layer只有极简单的布局。
- View可以响应用户交互。Layer不能响应用户交互。
- View中的绘画逻辑有CPU执行。Layer中的绘画直接有GPU执行。
- View有丰富的、功能强大的子类。Layer只有很少的几个子类。
- View动画属性较少,局限性较大。Layer由于更底层、动画属性更多,所以可以实现出更灵活、更丰富的动画。
第一个CALayer动画
Layer动画系列的文章,我不准备系统的从简单到复杂的知识进行讲解,我会通过各种实战示例,示例中用到什么知识点就讲什么知识点。
第一个动画让我们来实现Google Chrome浏览器加载时页签上的等待动画~
新建项目CALayerDemo1,打开Main.storyboard
,拖拽一个UIView到ViewController中,添加好约束,自行设置ViewController和UIView的背景色,这里UIView的背景色我设置为无色:
然后添加该View的Outlet到ViewController
中,这个UIView就是要展示加载动画的View:
@property (weak, nonatomic) IBOutlet UIView *loadingView;
打开ViewController.m
,申明一个常量属性ovalShapleLayer
:
CAShapeLayer *ovalShapeLayer = [CAShapeLayer layer];
ovalShapleLayer
的类型是CAShapleLayer
,它是CALayer
的为数不多的子类之一。它的作用是在屏幕上画出各种形状,不论是简单的圆形、方形还是复杂的五角星或不规则图形都难不住它。CAShapeLayer
有如下一些主要属性:
- strokeColor:笔画颜色。
- strokeStart:笔画开始位置。
- strokeEnd:笔画结束位置。
- fillColor:图形填充颜色。
- lineWidth:笔画