Session230-Advanced Animations With UIKit

主要内容

• 基础 (Basics)
• 可交互与可中断的动画(Interactive and Interruptible Animations)
• UIVew Property Animator新属性(New Property Animator Behaviors)
• 协同动画(Coordinating Animations)
• 提示与技巧(Tips and Tricks)

基础(Basics)

传统的UIView动画都是线性的动画

屏幕快照 2017-06-21 下午6.59.49.png

iOS10中增加的UIView Property Animator对比传统UIView动画有以下特性:

• 自定义时间函数(Custom timing)
  通过UICubicTimeParamters函数，指定自己想要的时间曲线

  
  
  

  屏幕快照 2017-06-21 下午7.03.18.png

• 可交互 (Interactive)

屏幕快照 2017-06-21 下午7.05.43.png

在Session 一个普通的view位移动画Demo中，对在原点的view添加了pan手势。在手势开始是添加UIView Property Animator并对其调用pauseAnimation使其进入active状态。
随着手势change过程中，不断设定UIView Property Animator的完成进度。手势结束时就让UIView Property Animator从之前设定的完成进度开始进行动画

但是交互时候有个细节要注意。就是 暂停UIView Property Animator不断设置其完成进度时候，它是按线性时间来设置(不管你是否使用了自定义时间曲线)

屏幕快照 2017-06-21 下午7.13.35.png

这上图在其暂停时不断设定它的完成进度，可以看到紫色的线性时间，灰色的是创建UIView Property Animator时自定义的时间曲线

屏幕快照 2017-06-21 下午7.15.10.png

但是手势结束开始动画时，它会根据之前的进度从线性时间开始点转换为自定义时间曲线的相应比例并开始。

• 可中断 (Interruptible)

屏幕快照 2017-06-21 下午7.17.36.png

屏幕快照 2017-06-21 下午7.18.50.png

还是以view的位移动画为例子。不同的是在view位移过程中进行手势的检测。
在手势Begin时检测是否已有UIView Property Animator，若没则创建，并暂停它；
在手势Change过程中不断改变它的完成进度；
在手势End时候从最新的完成进度开始进行动画
同时也要注意设置其进度时的所用的时间曲线

正常动画时按自定义时间曲线来

暂停时按照线性时间曲线来

恢复动画时按照指定的时间曲线开始

• 可相应 (Responsive)

UIView Property Animator新属性

var scrubsLineary: Bool

A Boolean value indicating whether a paused animation scrubs linearly or uses its specified timing information.

var pauseOnCompletion: Bool

之前的UIView Property Animator finish后会进入inactive状态。设置这个属性为YES后，完成动画后会进入pause状态，方便你进行逆动画(revers)

提示与技巧(Tips and Tricks)

屏幕快照 2017-06-21 下午7.36.23.png

后面的Demo就是把点击评论按钮弹出评论视图控制器的过程变成可交互和可中断和可逆向的动画，在这过程中添加了若干协同动画：包括UIVisualEffectView的模糊blurAnimator；标题文字属性(大小 位置)CGAffineTranasform的animator动画，视图控制器边框圆角的animator动画，甚至是帧动画的animator动画

屏幕快照 2017-06-21 下午7.43.01.png

屏幕快照 2017-06-21 下午7.44.04.png