CATransition动画精讲-CSDN博客

前言

曾经，笔者对动画一无所知，当他人问起时，总是似懂非懂。每一次别人说起动画效果时，笔者都不好意思插话，因此懂得太少，只是会使用UIView的那几个添加动画的方法。现在，不再等待，一步一步地学习其基础知识并开始尝试写一些常用的动画效果。

如果您也一样迷茫，那就不要迷茫了，实践出真知！！！

基础知识

我们直接看官方声明：

/** Transition animation subclass. **/

@interface CATransition : CAAnimation

/* The name of the transition. Current legal transition types include
 * `fade', `moveIn', `push' and `reveal'. Defaults to `fade'. */

@property(copy) NSString *type;

/* An optional subtype for the transition. E.g. used to specify the
 * transition direction for motion-based transitions, in which case
 * the legal values are `fromLeft', `fromRight', `fromTop' and
 * `fromBottom'. */

@property(nullable, copy) NSString *subtype;

/* The amount of progress through to the transition at which to begin
 * and end execution. Legal values are numbers in the range [0,1].
 * `endProgress' must be greater than or equal to `startProgress'.
 * Default values are 0 and 1 respectively. */

@property float startProgress;
@property float endProgress;

/* An optional filter object implementing the transition. When set the
 * `type' and `subtype' properties are ignored. The filter must
 * implement `inputImage', `inputTargetImage' and `inputTime' input
 * keys, and the `outputImage' output key. Optionally it may support
 * the `inputExtent' key, which will be set to a rectangle describing
 * the region in which the transition should run. Defaults to nil. */

@property(nullable, strong) id filter;

@end

CATransition类继承于CAAnimation类，提供的是过滤的效果，如push、fade、reveal等。

type属性是用于指定效果类型，当前官方提供的效果有fade, moveIn, push和reveal. 默认为fade。对于其它类型，如cube立体效果这种官方没有公开，也不清楚是否是使用私有。

subtype属性是可选的，主要用于指定动画的方向。比如动作类动画效果中，有从左边进入、从右边进入等效果。

@property float startProgress;
@property float endProgress;

这两个属性可以设置动画动作的进度，默认为0->1。

filter属性默认为nil，一旦设置了此属性，type和subtype就会被忽略。这个属性意思就是滤镜的意思吧，它需要实现inputImage、inputTargetImage、inputTime、outputImage，当然还有一个可选的inputExtent，不要求实现。

更多基础知识，请参考：CAAnimation精讲

实战练习做动画

先看看我们做效果图：

常用的transition动画几乎都有了，而且笔者在学习的同时，也这将些动画封装成了一个类方法，只需要一行代码就可以实现动画效果了哦！

头文件声明

这里只公共了一个方法，并将常用的动画使用一个枚举类型来指定，不用再记着那些单词了。

//
//  HYBTransitionAnimation.h
//  CATransitionOfObjCDemo
//
//  Created by huangyibiao on 15/12/14.
//  Copyright © 2015年 huangyibiao. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef NS_ENUM(NSUInteger, HYBTransitionType) {
  kHYBTransitionFade = 1,     // 淡入淡出
  kHYBTransitionPush,         // 推进效果
  kHYBTransitionReveal,       // 揭开效果
  kHYBTransitionMoveIn,       // 慢慢进入并覆盖效果
  kHYBTransitionCube,         // 立体翻转效果
  kHYBTransitionSuckEffect,   // 像被吸入瓶子的效果
  kHYBTransitionRippleEffect, // 波纹效果
  kHYBTransitionPageCurl,     // 翻页效果
  kHYBTransitionPageUnCurl,   // 反翻页效果
  kHYBTransitionCameraOpen,   // 开镜头效果
  kHYBTransitionCameraClose,  // 关镜头效果
  kHYBTransitionCurlDown,     // 下翻页效果
  kHYBTransitionCurlUp,       // 上翻页效果
  kHYBTransitionFlipFromLeft, // 左翻转效果
  kHYBTransitionFlipFromRight,// 右翻转效果
  kHYBTransitionOglFlip       // 翻转
};

typedef NS_ENUM(NSUInteger, HYBTransitionSubtype) {
  kHYBTransitionSubtypeFromLeft = 1,  // 从左边进入
  kHYBTransitionSubtypeFromRight,     // 从右边进入
  kHYBTransitionSubtypeFromTop,       // 从顶部进入
  kHYBTransitionSubtypeFromBottom     // 从底部进入
};

@interface HYBTransitionAnimation : NSObject

+ (void)transitionForView:(UIView *)aView
                               type:(HYBTransitionType)type
                            subtype:(HYBTransitionSubtype)subtype
                           duration:(NSTimeInterval)duration;

@end

实现文件

其实实现的代码也很简单，只是对枚举类型判断一下，然后添加动画：

//
//  HYBTransitionAnimation.m
//  CATransitionOfObjCDemo
//
//  Created by huangyibiao on 15/12/14.
//  Copyright © 2015年 huangyibiao. All rights reserved.
//

#import "HYBTransitionAnimation.h"

@implementation HYBTransitionAnimation

+ (void)transitionForView:(UIView *)aView
                               type:(HYBTransitionType)type
                            subtype:(HYBTransitionSubtype)subtype
                           duration:(NSTimeInterval)duration {
  NSString *animationType = nil;
  NSString *animationSubtype = nil;

  switch (subtype) {
    case kHYBTransitionSubtypeFromLeft:
      animationSubtype = kCATransitionFromLeft;
      break;
      case kHYBTransitionSubtypeFromRight:
      animationSubtype = kCATransitionFromRight;
      break;
      case kHYBTransitionSubtypeFromTop:
      animationSubtype = kCATransitionFromTop;
      break;
      case kHYBTransitionSubtypeFromBottom:
      animationSubtype = kCATransitionFromBottom;
      break;
    default:
      break;
  }

  switch (type) {
    case kHYBTransitionFade: {
      animationType = kCATransitionFade;
      break;
    }
    case kHYBTransitionPush: {
      animationType = kCATransitionPush;
      break;
    }
    case kHYBTransitionReveal: {
      animationType = kCATransitionReveal;
      break;
    }
    case kHYBTransitionMoveIn: {
      animationType = kCATransitionMoveIn;
      break;
    }
    case kHYBTransitionCube: {
      animationType = @"cube";
      break;
    }
    case kHYBTransitionSuckEffect: {
      animationType = @"suckEffect";
      break;
    }
    case kHYBTransitionRippleEffect: {
      animationType = @"rippleEffect";
      break;
    }
    case kHYBTransitionPageCurl: {
      animationType = @"pageCurl";
      break;
    }
    case kHYBTransitionPageUnCurl: {
      animationType = @"pageUnCurl";
      break;
    }
    case kHYBTransitionCameraOpen: {
      animationType = @"cameraIrisHollowOpen";
      break;
    }
    case kHYBTransitionCameraClose: {
      animationType = @"cameraIrisHollowClose";
      break;
    }
    case kHYBTransitionCurlDown: {
      [self animationForView:aView type:UIViewAnimationTransitionCurlDown duration:duration];
      break;
    }
    case kHYBTransitionCurlUp: {
      [self animationForView:aView type:UIViewAnimationTransitionCurlUp duration:duration];
      break;
    }
    case kHYBTransitionFlipFromLeft: {
      [self animationForView:aView type:UIViewAnimationTransitionFlipFromLeft duration:duration];
      break;
    }
    case kHYBTransitionFlipFromRight: {
      [self animationForView:aView type:UIViewAnimationTransitionFlipFromRight duration:duration];
      break;
    }
      case kHYBTransitionOglFlip:
      animationType = @"oglFlip";
      break;
    default: {
      break;
    }
  }

  if (animationType != nil) {
    CATransition *animation = [CATransition animation];
    animation.duration = duration;
    animation.type = animationType;

    if (animationSubtype != nil) {
      animation.subtype = animationSubtype;
    }

    animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;

    [aView.layer addAnimation:animation forKey:@"animation"];
  }
}

+ (void)animationForView:(UIView *)aView
                    type:(UIViewAnimationTransition)type
                duration:(NSTimeInterval)duration {
  [UIView animateWithDuration:duration animations:^{
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:type forView:aView cache:YES];
  }];
}

@end

解析

我们的核心添加动画的代码是：

CATransition *animation = [CATransition animation];
animation.duration = duration;
animation.type = animationType;

if (animationSubtype != nil) {
  animation.subtype = animationSubtype;
}

animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;

[aView.layer addAnimation:animation forKey:@"animation"];

系统提供给我们一些动画是在UIView上提供的方法，我们可以看看这个枚举：

typedef NS_ENUM(NSInteger, UIViewAnimationTransition) {
    UIViewAnimationTransitionNone,
    UIViewAnimationTransitionFlipFromLeft,
    UIViewAnimationTransitionFlipFromRight,
    UIViewAnimationTransitionCurlUp,
    UIViewAnimationTransitionCurlDown,
};

我们添加动画只需要调用UIView添加动画的方法就可以实现了：

[UIView animateWithDuration:duration animations:^{
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:type forView:aView cache:YES];
}];

测试效果

我们在ViewController这里尝试一下效果，这里只是使用定时器每一秒就自动切换一种效果：

//
//  ViewController.m
//  CATransitionOfObjCDemo
//
//  Created by huangyibiao on 15/12/14.
//  Copyright © 2015年 huangyibiao. All rights reserved.
//

#import "ViewController.h"
#import "HYBTransitionAnimation.h"

@interface ViewController ()

@property (nonatomic, assign) int subtype;
@property (nonatomic, strong) NSArray *array;

@property (nonatomic, strong) UIImage *img1;
@property (nonatomic, strong) UIImage *img2;
@property (nonatomic, assign) BOOL isImg1;
@property (nonatomic, assign) NSUInteger index;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  self.array = @[@(kHYBTransitionFade),
                 @(kHYBTransitionPush),
                 @(kHYBTransitionReveal),
                 @(kHYBTransitionMoveIn),
                 @(kHYBTransitionCube),
                 @(kHYBTransitionSuckEffect),
                 @(kHYBTransitionRippleEffect),
                 @(kHYBTransitionPageCurl),
                 @(kHYBTransitionPageUnCurl),
                 @(kHYBTransitionCameraOpen),
                 @(kHYBTransitionCameraClose),
                 @(kHYBTransitionCurlDown),
                 @(kHYBTransitionCurlUp),
                 @(kHYBTransitionFlipFromLeft),
                 @(kHYBTransitionFlipFromRight),
                 @(kHYBTransitionOglFlip)];

  self.img1 = [UIImage imageNamed:@"1.png"];
  self.img2 = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"3" ofType:@"jpg"]];

  self.view.backgroundColor = [UIColor colorWithPatternImage:self.img1];
  self.isImg1 = YES;

  [NSTimer scheduledTimerWithTimeInterval:1.0
                                   target:self
                                 selector:@selector(updateAnimation)
                                 userInfo:nil
                                  repeats:YES];
}

- (void)updateAnimation {

  if (self.index >= self.array.count) {
    self.index = 0;
  }

  HYBTransitionType type = [[self.array objectAtIndex:self.index++] intValue];
  static int s_subtypeValue = 0;
  HYBTransitionSubtype subtype = kHYBTransitionSubtypeFromTop;
  s_subtypeValue++;
  if (s_subtypeValue >= 4) {
    s_subtypeValue = 1;
  }

  subtype = (HYBTransitionSubtype)s_subtypeValue;

  [HYBTransitionAnimation transitionForView:self.view
                                       type:type
                                    subtype:subtype
                                   duration:1.0];

  if (self.isImg1) {
    self.view.backgroundColor = [UIColor colorWithPatternImage:self.img1];
  } else {
    self.view.backgroundColor = [UIColor colorWithPatternImage:self.img2];
  }

  self.isImg1 = !self.isImg1;
}

@end