iOS-基础动画

在应用中加入适当的动画,可以赋予界面视觉线索,帮助用户了解应用的工作流程,从而营造更好的用户体验。这里我们的基础动画主要是基于类UIView的动画。

基础动画

  通过查阅文档,我们发现UIView类提供了基础动画的实现。SDK提供了两种方法来初始化一个动画:

  1. iOS4及其以后版本,使用基于块(block-based)的动画方法,这也是官方推荐的方法;
  2. 使用开始/提交(begin/commit)动画方法。

  基于块的动画方法是很简单的,我们只需要使用类似(animateWithDuration:animations:)这样的方法,设定某个UIView的终止状态,就可以实现一个简单的动画了。然而这种方法只支持iOS4及其以上的版本,如果需要支持低于这些版本的话,则需要使用第二种方式(开始/提交动画)来实现。

以下这些属性是可以用来标识UIView的终止状态的,修改这些属性值可以触发动画效果。

  1. frame
  2. bounds
  3. center
  4. transform
  5. alpha
  6. backgroundColor
  7. contentStretch

基于块的动画

首先我们来看一下常用的最基本的方法。其中duration就是动画持续时间, animations快中实现需要动画效果的view的相关属性。第二个方法还有一个completion块参数,这个块会在动画结束时被调用,所以我们可以在这里当动画结束后更新一些属性或进行下一个动画。

+ (void)animateWithDuration:(NSTimeInterval)duration
                 animations:(void (^)(void))animations

+ (void)animateWithDuration:(NSTimeInterval)duration
                 animations:(void (^)(void))animations
                 completion:(void (^)(BOOL finished))completion

= =。比如我们来写个小例子,让一个UILabel以渐变的方式出现。

//初始化Label的透明度为0
aLabel.alpha = 0.0;
[UIView animateWithDuration:0.5 animations:^
{
    //在这里设定动画结束时Label的效果
    aLabel.alpha = 1.0;
}];

是不是很简单!是不是很简单!是不是很简单!

开始/提交动画

//我会更新的!

时间函数

  动画的速度曲线都是由时间函数来控制的。我们上面提到的两个方法默认都是使用渐快-渐慢函数。而官方还给我们提供了以下多种不同的时间函数。

UIViewAnimationOptionCurveEaseInOut
UIViewAnimationOptionCurveEaseIn
UIViewAnimationOptionCurveEaseOut
UIViewAnimationOptionCurveLinear

如果我们需要对动画进行一些设定,那么之前那两个函数则无法满足我们的需求,所以我们需要另外一个方法。

+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay
                    options:(UIViewAnimationOptions)options
                 animations:(void (^)(void))animations
                 completion:(void (^)(BOOL finished))completion

这个方法比之前的参数多了一些,比如delay表示动画延时多久发生,options则是我们关注的可选参数。这些参数除了可以设置为上面的时间函数之外,还可以设置一些别的参数,这些参数可以用或(|)操作符来连接,同时设置多个选项。以下是一些常用的可选参数设置。

UIViewAnimationOptionAllowUserInteraction
只有显示的设置了该选项,视图在动画过程中才能响应用户事件。

UIViewAnimationOptionRepeat
让动画反复执行。该选项通常与UIViewAnimationOptionAutoreverse一起使用。

UIViewAnimationOptionAutoreverse
让UIView的属性从起始值变化到终止值后自动执行反转动画,再从终止值变化到起始值。

关键帧动画

  之前的动画都属于基础动画,都是从一个状态变化到另一个状态,UIView的值进行了一次修改。如果我们需要在多个值之间进行变化,那么我们就需要关键帧动画了。首先我们先来看看关键帧动画的相关函数方法。

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
                               delay:(NSTimeInterval)delay
                             options:(UIViewKeyframeAnimationOptions)options
                          animations:(void (^)(void))animations
                          completion:(void (^)(BOOL finished))completion

和之前的一样,duration表示动画持续时间, delay延时执行时间,options可选动画参数,completion动画结束后调用的块。它们最大的不同在于,我们需要在animations中进行动画关键帧的设置,给动画设置多个关键帧。

+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime
                        relativeDuration:(double)frameDuration
                              animations:(void (^)(void))animations

其中第一个参数是相对起始时间,表示该关键帧开始执行的时刻在整个动画持续时间中的百分比,取值范围是0到1.第二个参数是相对持续时间,表示该关键帧占整个动画持续时间的百分比,取值范围也是0到1。

弹簧动画

Apple提供了一个轻松为视图添加弹簧动画的方法。

+ (void)animateWithDuration:(NSTimeInterval)duration
                  delay:(NSTimeInterval)delay
 usingSpringWithDamping:(CGFloat)dampingRatio
  initialSpringVelocity:(CGFloat)velocity
                options:(UIViewAnimationOptions)options
             animations:(void (^)(void))animations
             completion:(void (^)(BOOL finished))completion

duration为动画持续时间;delay为动画延时执行时间;dampingRatio为弹性阻尼,取值范围是0到1,越接近0,动画的弹性效果就越明显;velocity动画开始时的加速度,通常传入0;options动画选项,与基础动画一样;animation设置动画block;completion动画结束后执行的block。

参考资料

1 《iOS编程(第四版)》,THE BIG NERD RANCH GUIDE.
2 Apple iOS 9.2 开发文档.