Question

如何实现可交互的 UIView 隐式动画

Answer 1

　　这一篇教程将结合一个小 demo 讲解, 最终代码在 github 上可以下载到. demo 的运行效果如图所示, 通过手势拖动顶端红色矩形到虚线位置, 拖动距离超过 50% 松手, 矩形会自动移动到目标位置, 少于 50% 松手, 矩形自动归位:

　　实现一个可交互的动画大概有这么几种思路:

　　在响应 GestureRecognizer 的方法中实时更新 view 的状态, 在 GestureRecognizer 结束的时候创建动画完成后续的部分.

　　在 GestureRecognizer 开始的时候创建显式动画, 随着 Gesture 变化, 改变动画的 progress, 在 GestureRecognizer 结束之后完成动画.

　　在 GestureRecognizer 开始的时候创建隐式动画, 随着 Gesture 变化, 改变动画的 progress, 在 GestureRecognizer 结束之后完成动画.

　　注意 2 和 3 只有显式和隐式的区别.

　　对于简单的 view, 单一的动画 (比如 demo 中的这种, 线性移动一个简单的 view), 三种方法差别不大. 而对于复杂的 view (view 中嵌套多个 subView), 多个动画 (view 和 subview 都有各自的动画), 如果在不考虑可交互的前提下, 隐式的动画已经可以满足需求, 那么方法 3 可能会比方法 1 和 2 简洁得多, 本文将对方法 3 进行讲解.

　　要实现方法 3, 首先要了解 CALayer 的几个属性: speed, timeOffset, beginTime. 对于这几个属性, Controlling Animation Timing 这篇教程图文并茂地给出了直观的解释, 必读, 这里只做简单介绍:

　　speed: 控制动画的速度, 比如设置为 1 (默认), 动画正常运行, 设置为 0 动画暂停, 设置为 -1 动画反向运行.

　　timeOffset: 控制动画在整个动画时间轴上的位置, 比如一个 3 秒的动画, timeOffset 为 1.5, layer 就会处于整个动画过程中间的那个状态.

　　beginTime: 动画的开始时间.

　　有了这些基础, 我们就可以着手实现了, 首先我们需要建立一个 CALayer 的 Category, 添加一些动画辅助代码:

　　- (void)gs_pauseAnimation {
　　self.speed = 0;
　　self.timeOffset = 0;
　　}
　　
　　- (void)gs_recoverToDefaultState {
　　self.speed = 1;
　　self.timeOffset = 0;
　　self.beginTime = 0;
　　}
　　
　　- (void)gs_setTimeProgress:(CFTimeInterval)timeProgress {
　　self.timeOffset = timeProgress;
　　}
　　
　　- (void)gs_continueAnimationWithTimeProgress:(CFTimeInterval)timeProgress {
　　[self gs_recoverToDefaultState];
　　
　　self.beginTime = [self convertTime:CACurrentMediaTime() fromLayer:nil] - timeProgress;
　　}
　　
　　- (void)gs_continueReverseAnimationWithTimeProgress:(CFTimeInterval)timeProgress animationDuration:(CFTimeInterval)duration {
　　[self gs_recoverToDefaultState];
　　
　　self.beginTime = [self convertTime:CACurrentMediaTime() fromLayer:nil] - (duration - timeProgress);
　　self.timeOffset = duration;
　　self.speed = -1;
　　}
　　gs_pauseAnimation: 通过将 speed 设置为 0, 来暂停动画.

　　gs_recoverToDefaultState: 将 layer 的各个属性恢复到默认状态

　　gs_setTimeProgress: 在 gs_pauseAnimation 的基础上, 设置动画的时间进度.

　　gs_continueAnimationWithTimeProgress: 从 timeProgress 时间进度开始, 继续播放之前暂停了的动画

　　这里首先调用了 gs_recoverToDefaultState, 是为了让 convertTime:fromLayer: 得出正确的时间.

　　[self convertTime:CACurrentMediaTime() fromLayer:nil] 将当前系统时间转换到 layer 的时间上, 减去 timeProgress, 假设这是一个 3 秒的动画, timeProgress 为 1 秒, 则这条代码就表示 layer 的动画在一秒之前就已经开始, 所以动画将从运行到第 1 秒的状态开始继续播放.

　　如果不能理解, 可以结合一下文档中这篇: How do I pause all animations in a layer tree?
转载