程序博客网 > 淘宝达人申请大v认证

常见的iOS对动画的操作

来源：互联网 发布：淘宝达人申请大v认证 编辑：程序博客网 时间：2024/05/22 03:02

常见的iOS对动画的操作分为两类：

  • CALayer层的操作

  • UIView的操作

二者有何区别

  • UIView里面包含有一个CALayer层

  • UIView之所以能够在屏幕上显示出来，完全因为其内部拥有一个CALayer层

  • CALayer层的操作更底层更轻量级、性能更高。

  • UIView动画执行完毕之后不会反弹，而CALayer动画改变layer的状态位置，出现假象的改变，其实实际位置并没有改变

开发时如何选择二者：

  • 每个UIView的操作其实是对CALayer层的封装，比较简单，优先选择UIView动画操作。

  • 操作CALayer层更直接，能实现UIView所不能实现的功能UIView动画

UIView常用的一些方法

一、首尾式动画（经典的不能再经典啦）

<code class="language-[UIView beginAnimations:nil context:nil] ; hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//需要执行动画的核心代码</span>     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置动画执行时间</span>     [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> setAnimationDuration:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>];     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置代理</span>     [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> setAnimationDelegate:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span>];     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置动画执行完毕调用的事件</span>     [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> setAnimationDidStopSelector:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@selector</span>(didStopAnimation)];    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.customView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.center</span>=CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>);    [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> commitAnimations];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
<code class="language-+ (void)setAnimationWillStartSelector:(SEL)selector   当动画即将开始时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationDidStopSelector:(SEL)selector  当动画结束时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationDuration:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)duration   动画的持续时间，秒为单位+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationDelay:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)delay  动画延迟delay秒后再开始+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationStartDate:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDate</span> *)startDate   动画的开始时间，默认为now+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationCurve:(UIViewAnimationCurve)curve  动画的节奏控制+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationRepeatCount:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>)repeatCount  动画的重复次数+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationRepeatAutoreverses:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span>)repeatAutoreverses  如果设置为<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>,代表动画每次重复执行的效果会跟上一次相反+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationTransition:(UIViewAnimationTransition)transition forView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)view cache:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span>)cache  设置视图view的过渡效果, transition指定过渡类型, cache设置<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>代表使用视图缓存，性能较好+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationDelegate:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span>)delegate     设置动画代理对象，当动画开始或者结束时会发消息给代理对象+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationWillStartSelector:(SEL)selector   当动画即将开始时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationDidStopSelector:(SEL)selector  当动画结束时，执行delegate对象的selector，并且把beginAnimations:context:中传入的参数传进selector+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationDuration:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)duration   动画的持续时间，秒为单位+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationDelay:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)delay  动画延迟delay秒后再开始+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationStartDate:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDate</span> *)startDate   动画的开始时间，默认为now+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationCurve:(UIViewAnimationCurve)curve  动画的节奏控制+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationRepeatCount:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>)repeatCount  动画的重复次数+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationRepeatAutoreverses:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span>)repeatAutoreverses  如果设置为<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>,代表动画每次重复执行的效果会跟上一次相反+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setAnimationTransition:(UIViewAnimationTransition)transition forView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)view cache:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span>)cache  设置视图view的过渡效果, transition指定过渡类型, cache设置<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>代表使用视图缓存，性能较好</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li></ul>

二、block动画(依旧也经典)

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)animateWithDuration:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)duration delay:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)delay options:(UIViewAnimationOptions)options animations:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> (^)(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>))animations completion:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> (^)(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span> finished))completion<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//duration：动画的持续时间</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//delay：动画延迟delay秒后开始</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//options：动画的节奏控制</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//animations：将改变视图属性的代码放在这个block中</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//completion：动画结束后，会自动调用这个block</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)transitionWithView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)view duration:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)duration options:(UIViewAnimationOptions)options animations:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> (^)(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>))animations completion:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> (^)(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span> finished))completion<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//duration：动画的持续时间</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//view：需要进行转场动画的视图</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//options：转场动画的类型</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//animations：将改变视图属性的代码放在这个block中</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//completion：动画结束后，会自动调用这个block</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)transitionFromView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)fromView toView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)toView duration:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)duration options:(UIViewAnimationOptions)options completion:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> (^)(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span> finished))completion<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//duration：动画的持续时间</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//options：转场动画的类型</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//animations：将改变视图属性的代码放在这个block中</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//completion：动画结束后，会自动调用这个block</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">options参数的详细的枚举typedef <span class="hljs-constant" style="box-sizing: border-box;">NS_OPTIONS</span>(<span class="hljs-constant" style="box-sizing: border-box;">NSUInteger</span>, <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptions</span>) {    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionLayoutSubviews</span>            = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionAllowUserInteraction</span>      = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> turn on user interaction <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">while</span> animating    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionBeginFromCurrentState</span>     = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> start all views from current value, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">not</span> initial value    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionRepeat</span>                    = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> repeat animation indefinitely    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionAutoreverse</span>               = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> repeat, run animation back <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">and</span> forth    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionOverrideInheritedDuration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> ignore nested duration    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionOverrideInheritedCurve</span>    = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> ignore nested curve    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionAllowAnimatedContent</span>      = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> animate contents (applies to transitions only)    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionShowHideTransitionViews</span>   = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> flip to/from hidden state instead of adding/removing    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionOverrideInheritedOptions</span>  = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <<  <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">do</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">not</span> inherit any options <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> animation type    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionCurveEaseInOut</span>            = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> default    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionCurveEaseIn</span>               = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionCurveEaseOut</span>              = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionCurveLinear</span>               = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionNone</span>            = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> default    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionFlipFromLeft</span>    = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionFlipFromRight</span>   = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionCurlUp</span>          = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionCurlDown</span>        = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionCrossDissolve</span>   = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionFlipFromTop</span>     = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,    <span class="hljs-constant" style="box-sizing: border-box;">UIViewAnimationOptionTransitionFlipFromBottom</span>  = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,} <span class="hljs-constant" style="box-sizing: border-box;">NS_ENUM_AVAILABLE_IOS</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4_0</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul>

CALayer层动画

CALayer的两个属性：

  • position位置（原点为父类的（0，0））

  • anchorPoint 锚点（默认原点在自身长和宽各一半的交点（0.5，0.5））

什么是隐式动画

简单说，每个控件都有一个自带的CALayer层，这个层称为根层，与之相对于的就是非根层，非根层的的属性改变就会默认引发动画，这样的动画就可以称为隐式动画

若项目需求要求不能够动画效果，如何关闭隐式动画？
<code class="hljs sql has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    [CATransaction <span class="hljs-operator" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">begin</span>];</span>    [CATransaction setDisableActions:YES];    //......这里修改你想修改的Layer属性就不会产生默认的隐式动画    [CATransaction <span class="hljs-operator" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">commit</span>];</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

Layer层的动画分类

这里写图片描述

CAAnimation是所有动画类的父类，它和CAPropertyAnimation不能直接使用，应该使用它的子类CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

<code class="hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">CABasicAnimation基础动画fromValue：keyPath相应属性值的初始值toValue：keyPath相应属性的结束值byValue : 增加多少值(注意对比toValue的意思)keyPath内容是CALayer的可动画Animation属性</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*这是 keyPath 所有属性字符，供大家参考*/</span>    transform<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scale</span> = 比例轉換    transform<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scale</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.x</span> = 闊的比例轉換    transform<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scale</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.y</span> = 高的比例轉換    transform<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.rotation</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.z</span> = 平面圖的旋轉    opacity = 透明度    margin    zPosition    backgroundColor    背景颜色    cornerRadius    圆角    borderWidth    bounds    contents    contentsRect    cornerRadius    frame    hidden    mask    masksToBounds    opacity    position    shadowColor    shadowOffset    shadowOpacity    shadowRadius</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li></ul>
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1.创建动画对象</span>    CABasicAnimation *anim = [CABasicAnimation animation];    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2.设置动画对象</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// keyPath决定了执行怎样的动画, 调整哪个属性来执行动画</span>    anim<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.keyPath</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"transform.translation.x"</span>;    anim<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.toValue</span> = @(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//执行的时间</span>    anim<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//加入下面两行，当动画结束时，layer所在的位置不会回到初始位置</span>    anim<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.removedOnCompletion</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>;    anim<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.fillMode</span> = kCAFillModeForwards;     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3.添加动画</span>    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span> addAnimation:anim forKey:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

CAKeyframeAnimation关键帧动画

CAKeyframeAnimation是CABasicAnimation的升级版，CABasicAnimation只能改变一组属性动画就停止了，而CAKeyframeAnimation可以运行关于一个属性的一个数组的数据(这里需要特别注意是同一个属性的一组数据)

<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//values：所有的值</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//path：路线</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//keyTimes：可以为对应的关键帧制定对应的时间点，取值范围是0到1.0</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

注意：path和values二者是相互排斥的，二者选取一个即可

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*values例子*/</span>        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"transform.rotation"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.values</span> = array<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        // 动画的重复执行次数        anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.repeatCount</span> = MAXFLOAT<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        // 保持动画执行完毕后的状态        anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.removedOnCompletion</span> = NO<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fillMode</span> = kCAFillModeForwards<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        [self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.redView</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.layer</span> addAnimation:anim forKey:nil]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*path例子*/</span>CAKeyframeAnimation *anim = [CAKeyframeAnimation animation]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"position"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.removedOnCompletion</span> = NO<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fillMode</span> = kCAFillModeForwards<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    CGMutablePathRef path = CGPathCreateMutable()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    CGPathAddEllipseInRect(path, NULL, CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.path</span> = path<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    CGPathRelease(path)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*设置动画的执行节奏*/</span>    anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    anim<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.delegate</span> = self<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    [self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.redView</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.layer</span> addAnimation:anim forKey:nil]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

CAAnimationGroup 动画组

我们上面两个动画类都是只能对同一个属性进行修改产生动画，而不能同时修改两个参数属性。所有就引入了CAAnimationGroup动画组  
最经典的莫过于：边旋转边缩放边移动的动画效果，其实就是前面的基础动画加入到动画组形成的

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*1.创建旋转动画对象*/</span>     CABasicAnimation *rotate = [CABasicAnimation animation]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    rotate<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"transform.rotation"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    rotate<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> = @(M_PI)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*2.创建缩放动画对象*/</span>     CABasicAnimation *scale = [CABasicAnimation animation]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    scale<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"transform.scale"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    scale<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> = @(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*3.平移动画*/</span>     CABasicAnimation *move = [CABasicAnimation animation]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    move<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"transform.translation"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    move<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> = [NSValue valueWithCGPoint:CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>)]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*4.将所有的动画添加到动画组中*/</span>     CAAnimationGroup *group = [CAAnimationGroup animation]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    group<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.animations</span> = @[rotate, scale, move]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    group<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    group<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.removedOnCompletion</span> = NO<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    group<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fillMode</span> = kCAFillModeForwards<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    [self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.myvie</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.layer</span> addAnimation:group forKey:nil]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;  </span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li></ul>

CATransition转场动画

提供移除屏幕和移入屏幕的动画效果

<code class="language-OC hljs scala has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">   <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 转场动画代码 */</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建转场动画对象</span>    CATransition *anim = [CATransition animation];    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置转场类型</span>    anim.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">type</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"pageCurl"</span>;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置动画的方向</span>    anim.subtype = kCATransitionFromLeft;    anim.duration = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>;    [_imageV.layer addAnimation:anim forKey:nil];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//type：动画过渡类型</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//subtype：动画过渡方向</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li></ul>

附一张type参照表

这里写图片描述

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">+(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)transitionWithView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span>*)view duration:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)duration options:(UIViewAnimationOptions)options animations:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>(^)(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>))animations completion:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>(^)(BOOLfinished))completion;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//duration：动画的持续时间</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//view：需要进行转场动画的视图</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//options：转场动画的类型</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//animations：将改变视图属性的代码放在这个block中</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//completion：动画结束后，会自动调用这个block</span>+ (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)transitionFromView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span>*) fromView toView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span>*) toViewduration:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSTimeInterval</span>)durationoptions:(UIViewAnimationOptions) options completion:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>(^)(BOOLfinished))completion;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//duration：动画的持续时间</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//options：转场动画的类型</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//animations：将改变视图属性的代码放在这个block中</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//completion：动画结束后，会自动调用这个block</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

动画代理

动画也是存在代理的，实现代理可以在动画开始的时候调用和动画结束的时候调用的时候做些事情

<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> anim.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delegate</span> = self; <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> mark 动画开始的时候调用</span>- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)animationDidStart:(CAAnimation *)anim{}<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> mark 动画结束的时候调用</span>- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
0 0
淘宝达人申请大v认证 淘宝达人申请大v认证
原创粉丝点击
热门IT博客
会计软件单机版会计软件单机版
淘宝店铺信誉级别分类淘宝店铺信誉级别分类
单片机课程设计报告
线切割3b手动编程入门
路由器做淘宝客
安心贷网络借贷平台
网络视频会议解决方案
蓝月传奇装备附灵数据
灭绝 丧尸屠城 知乎
sql 2005 32位标准版
淘宝人生免费txt下载
御城河商家数据保镖
云计算的应用领域
无线端淘宝卖家运营
授权软件.
哲理名句知乎
707软件使用
ubuntu搜狗输入法设置
网店经营数据分析报告
淘宝网店海报设计技巧
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 望月歌谱 望月抒怀 望月存雅 高楼望月 水中望月 望月简谱 举杯望月 抬头望月 雨后望月 望月留美 望月古诗 民族舞望月 回头望月 望月淳 望月真由 醉仙望月 望月山庄 望月伊织 塑望月 推窗望月 望月膳 望月科幻岛 望月老师 望月曲谱 望月里沙 望月奈奈 望月之城 古诗望月 望月课文 望月之兔 望月诗 望月李白 望月双角 望月沙 望月 徐志摩 望月蟮 黑鸭子望月 望月石 望月谱子 天狗望月石 天狗望月图

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里