快速入门指南：使用 UIViewPropertyAnimator 做动画

   <p>iOS 10 带来了一堆非常有意思的新特性，例如 UIViewPropertyAnimator 。这是一个能够改善动画处理方式的新类。</p>    <p>它彻底改变了我们所习惯的工作流，为动画逻辑添加了一个更为精细的控制手段。</p>    <h2>一个简单例子</h2>    <p>让我们看看如何创建一个改变视图中心的动画。</p>    <pre>  <code class="language-objectivec">let animator = UIViewPropertyAnimator(duration: 1.0, curve: .easeOut){      AView.center = finalPoint  }  animator.startAnimation()  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9402e21692fea05556997c972cd54516.gif"></p>    <p>这里至少有 3 点值得去关注：</p>    <ol>     <li>动画是通过一个闭包来定义的，这与 UIView 的动画方法 “UIView.animation(duration:…)” 十分相似。</li>     <li>方法返回了一个对象——animator。</li>     <li>动画并不是立即执行，而是通过 startAnimation() 方法来触发执行。</li>    </ol>    <h2>动画状态</h2>    <p>使用这种新方式来处理动画的不同之处就是 animator 有完整的状态机逻辑。通过 UIViewAnimation 协议，控件可以用一种简单明了的方式实现动画 <strong>状态</strong> 的管理，例如调用 startAnimation 、 pauseAnimation 和 stopAnimation 函数。通过调用这些函数，我们可以更新控件的状态，使得控件在 active 、 inactive 和 stopped 状态之间转换。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/56ba84755f6301511a91872e7752660c.png"></p>    <p>当动画开始或者暂停的时候，动画状态为 active ， 当控件被创建出来且没有开始执行动画或者已经执行完动画的时候，它的状态是 inactive 。这里还是要声明下 inactive 和 stopped 之间还是有一点区别的。当动画执行完毕或者使用 stop 命令暂停动画后，控件的状态变为 stopped ，而在 animator 内部会调用 finishAnimation(at:) 来表明当前动画完毕， 然后会设置当前状态为 inactive ，最后会调用 completion block (稍后会详细说明)</p>    <h2>动画选项</h2>    <p>在之前的例子中应该注意到了，在动画的 block 中，我们定义了两个参数：动画的 duration 和动画的 curve ， 一个 UIViewAnimationCurve 能够表示大部分的常见动画曲线类型（ easeIn, easeOut, liner 或者 easeInOut ）。</p>    <p>当你需要对动画曲线做更多的设置时，你可以通过两个控制点来定义一个贝塞尔曲线</p>    <pre>  <code class="language-objectivec">let animator = UIViewPropertyAnimator(                 duration: 1.0,                  point1: CGPoint(0.1,0.5),                  point2: CGPoint(0.5, 0.2){             AView.alpha = 0.0  }  </code></pre>    <p>(如果贝塞尔曲线也不能满足需求的话，可以使用 UITimingCurveProvider 创建一个完全自定义的曲线)</p>    <p>另外一个有趣的动画选项是你可以向函数传递 dampingRatio 参数。这与 UIView 的动画方法相似，可以通过使用一个 0 到 1 的 damping 值来实现弹跳效果。</p>    <pre>  <code class="language-objectivec">let animator = UIViewPropertyAnimator(                 duration: 1.0,                 dampingRatio:0.4){             AView.center = CGPoint(x:0, y:0)  }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7449e139c3e036e610536ef8ca9ffaad.gif"></p>    <p>让动画延后执行的操作也非常简单，只需要在 startAnimation 函数中传入 afterDelay 参数。</p>    <pre>  <code class="language-objectivec">animator.startAnimation(afterDelay:2.5)  </code></pre>    <h2>动画 Block</h2>    <p>UIViewPropertyAnimator 遵守了 UIViewImplicitlyAnimating 协议，这个协议赋予 UIViewPropertyAnimator 许多有趣的特性。举个例子，除了在初始化期间指定的第一个动画 block 外，还可以指定多个动画 block。</p>    <pre>  <code class="language-objectivec">// Initialization  let animator = UIViewPropertyAnimator(duration: 2.0, curve: .easeOut){      AView.alpha = 0.0  }  // Another animation block  animator.addAnimation{       Aview.center = aNewPosition  }  animator.startAnimation()  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/765484c2dbb9f8377479574bf792922a.gif"></p>    <p>你也可以在已经执行动画的代码里添加动画 block， 这个 block 会立即执行并使用剩下的时间作为其动画时长。</p>    <h2>与动画的交互</h2>    <p>在前面的内容里已经说明了我们可以通过调用 startAnimation、stopAnimation 和 pauseAnimation 等方法实现动画的循环。默认的动画循环可以通过 fractionComplete 属性进行修改。这个值表明了动画的完成百分比，它的取值范围在 0.0 到 1.0 之间。这样就可以通过修改 fractionComplete 来让循环达到预期效果（例如：用户可能会通过 slider 或者 pan 手势来实时改变参数值）</p>    <pre>  <code class="language-objectivec">animator.fractionComplete = slider.value  </code></pre>    <p>在一些场景下，你可能想在动画执行完毕后做一些操作， addCompletion 允许你添加一个在动画执行完毕后才会被触发的 block。</p>    <pre>  <code class="language-objectivec">animator.addCompletion { (position) in      print("Animation completed")  }  </code></pre>    <p>position 参数是 UIViewAnimatingPosition 类型，它用于表明动画结束的位置，这个值本身是一个枚举，包含了 starting、end 和 current。通常得到的值是 end。</p>    <p>这就是快速入门指南的全部内容了。</p>    <p>我已经迫不及待地想使用这个新的动画系统来实现一些酷炫的 UI 效果了！我会在 推ter 上分享作品 :wink: Ciao！</p>    <p>本文由 SwiftGG 翻译组翻译，已经获得作者翻译授权，最新文章请访问http://swift.gg。</p>    <p> </p>    <p>来自：http://swift.gg/2017/04/20/quick-guide-animations-with-uiviewpropertyanimator/</p>    <p> </p>