iOS动画开发之四——核心动画编程(CoreAnimation)

谁借莪１个温暖的怀抱￠ 2022-01-26 12:17 254阅读 0赞

## iOS动画开发之四——核心动画编程(CoreAnimation) ##

### 一、引言    ###

前几篇博客详细介绍了有关UIView层的动画使用与相关的效果，然而这些动画是UIKit为我们封装好的核心动画层的方法，通过这些方法，我们可以用的更加简便，当然功能也十分强大，基本能达到我们项目的大多需求。但是如果你想更加自由的通过动画操作视图的属性，你就需要跳过UIKit的封装，使用CoreAnimation核心动画层的方法来实现动画。

### 二、开始前的准备    ###

#### 1、认识一个的朋友    ####

在开始介绍核心动画的内容前，我们需要先搞明白一个东西：Layer。你可能很少听说他，可是他却无处不在，在iOS的UI开发中，任何一个View包括继承于UIView的子类上面都会有一个Layer，可以理解为Layer为单独的一层，专门负责视图的显示，而view除此之外更多负责触摸时间等逻辑处理。因此，iOS也将所有动画的操作都交给你Layer来负责。

#### 2、Layer层可以做到的事    ####

Layer如此神秘，那他究竟可以做到哪些事？他确实可以做很多view做不了的事情.

##### (1)设置view的圆角属性 #####

[?][Link 1]

效果如下：

[![165350\_D5Xf\_2340880.png][165350_D5Xf_2340880.png]][165350_D5Xf_2340880.png]

##### (2)设置view的边框 #####

[?][Link 1]

注意：因为CoreAnimation层是UI层的底层，所以这里的颜色为CGColor对象。

效果如下：

##### [![165843\_qR0U\_2340880.png][165843_qR0U_2340880.png]][165843_qR0U_2340880.png]    #####

##### (3)设置视图阴影 #####

[?][Link 1]

<table style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
 <tbody style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
  <tr style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
   <td style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;color:rgb(175,175,175);background:none;"> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      1 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      2 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      3 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      4 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      5 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      6 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      7 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      8 
    </div> </td> 
   <td style="width:675px;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
    <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">view&nbsp;=&nbsp;[[UIView&nbsp;alloc]initWithFrame:CGRectMake(100,&nbsp;100,&nbsp;100,&nbsp;100)];</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">[self.view&nbsp;addSubview:view];</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">view.backgroundColor=[UIColor&nbsp;redColor];</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">CALayer&nbsp;*layer=view.layer;</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">layer.shadowOffset=CGSizeMake(30,&nbsp;30);</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//设置阴影方向</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">layer.shadowColor=[[UIColor&nbsp;blackColor]&nbsp;CGColor];</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//设置阴影颜色</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">layer.shadowOpacity=0.5;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//设置阴影透明度</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">layer.shadowRadius=10;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//设置阴影圆角</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

效果如下：

[![170301\_jCTn\_2340880.png][170301_jCTn_2340880.png]][170301_jCTn_2340880.png]

这样的立体效果是否已经很酷了？NO，在加上动画才对。

### 三、CoreAnimation的使用 ###

#### 1、基础属性相关的动画CABasicAnimation ####

CABasicAnimation是核心动画中对属性操作需要用到了一个动画类，示例如下：

[?][Link 1]

<table style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
 <tbody style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
  <tr style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
   <td style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;color:rgb(175,175,175);background:none;"> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      1 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      2 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      3 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      4 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      5 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      6 
    </div> 
    <div style="border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.1em;text-align:right;vertical-align:baseline;font-size:1em;background-image:none;">
      7 
    </div> </td> 
   <td style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
    <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;"> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">CALayer&nbsp;*layer=view.layer;</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">CABasicAnimation&nbsp;*&nbsp;ani=&nbsp;[CABasicAnimation&nbsp;animationWithKeyPath:@</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#0000FF;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">"opacity"</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">];</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//创建对象，参数关键字为layer的属性</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">ani.duration=3;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//设置执行时间</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">ani.repeatCount=1;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//设置执行次数</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">ani.timingFunction=[CAMediaTimingFunction&nbsp;functionWithName:kCAMediaTimingFunctionEaseInEaseOut];</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//设置线性效果</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">[layer&nbsp;addAnimation:ani&nbsp;forKey:@</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#0000FF;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">"test"</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">];</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//添加动画</code> 
     </div> 
     <div style="border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background-image:none;"> 
      <code style="color:#FF0000;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">layer.opacity=0;</code> 
      <code style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:rgb(0,130,0);border:0px;line-height:1.1em;vertical-align:baseline;font-size:1em;background:none;">//透明度改变时执行动画动作</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

通过上面的示例，我们可以发现，layer的属性都可以来进行动画动作，这样，我们对动画的操作就自由的很多。

#### 2、关键帧动画CAKeyframeAnimation ####

关键帧动画除了动画改变layer的属性外，可以设置几个关键帧点，通过这些点，可以实现路径更加负责的动画，例如：

[?][Link 1]

类比如上代码，我们还可以通过关键帧让试图按照我们预定的路线移动，同时我们还可以设置两个数组，分别为keyTimes和timingFunctions。这两个数组中的值可以设置动画每一段的运动线性特征和每一段的运动时间比例。

[Link 1]: http://my.oschina.net/u/2340880/blog/484793#
[165350_D5Xf_2340880.png]: /images/20220126/651a434463ec4e398393bf3b5d3b2b0a.png
[165843_qR0U_2340880.png]: /images/20220126/b8640fee7fa5495aac1cdea430635a2e.png
[170301_jCTn_2340880.png]: /images/20220126/6e587756c3b14ba5a34e53bb7d78ba54.png