iOS动画-按钮动画

421 查看

前言

在上一篇认识CoreAnimation中笔者介绍了系统的动画库CoreAnimation,使用动画库有很多好处,这里就不再进行重复叙述。那么本篇将承接上一篇的内容,使用提到的基础的动画相关类来实现动画效果,效果图放上:

大体上可以看到demo主要是渐变以及形变两种动画,在更早之前的文章,我们就使用UIView的动画接口完成过相同的动画,而这次将换成CoreAnimation来完成这些工作

关于图层

在iOS中,每一个UIView都拥有一个与之绑定的CALayer图层对象,其负责视图内容的绘制与显示。跟前者一样,CALayer也拥有树状的子图层结构,以及相似的接口方法。CALayer是图层的基类,主要提供了视图显示范围、图层结构接口等属性,我们通过使用它的子类。下面是一段在控制器的界面中心添加一个圆形的紫色图层:

同样的,每一个CALayer存在一个sublayers的数组属性,我们也可以遍历这个数组来完成移除子视图之类的操作:

由于核心动画框架的动画都是基于CALayer的图层进行添加实现的,所以图层的添加移除方法是最常用的方法。当然,还有一个addAnimation(anim:forKey:)接口用来给图层添加动画

基础动画

基础动画CABasicAnimation是最常用来实现动画效果的动画类,其继承自CAAnimation动画基类,为图层动画效果实现了一个keyPath属性,我们通过设置这个属性来为对应的keyPath属性值执行动画效果。动画类提供了fromValuetoValue两个属性用来设置动画的起始和结束的值,比如下面一段代码让添加到视图上的紫色图层变得透明:


上面的代码用动画表现了在1秒内让图层的opacity属性从10的过程。但上面不难看出在动画结束之后,紫色的图层没有保持opacity等于0的状态,而是回到了动画最开始的状态。这是为什么呢?

在上一篇中笔者提到过在每一个CALayer中存在着模型呈现渲染三种图层树,正是这些图层树共同作用来完成隐式动画。那么使用核心动画的时候,实际上CABasicAnimation会根据动画时长计算出每一帧的动画属性的值,然后实时提交给呈现树来展示对应时间点的视图效果,在动画结束时CAAnimation对象会自动从图层上移除。而由于在整个动画过程模型树的值没有改变,所以在动画结束的时候呈现树会再次从模型树获取图层的属性重新绘制。对此,存在这几种解决方案:

  • 在实现动画的时候同时修改opacity,保证模型树的数据同步
  • 取消CAAnimation的自动移除,并且设置在动画结束后保持动画的结束状态