【iOS】CATransition动画简单使用

渐变动画.gif

• 1 . 闲来无聊，研究了下CATransition动画，发现原来，还是很实用,想了下决定试着看能否封装下,最后在使用几种方法后，最后使用类扩展(类别)的方法:

Paste_Image.png

-2.在CATransition这个实体中，苹果有提供我们多个动画，CATransition的type属性
1.#define定义的常量
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
2.用字符串表示
pageCurl 向上翻一页
pageUnCurl 向下翻一页
rippleEffect 滴水效果
suckEffect 收缩效果，如一块布被抽走
cube 立方体效果
oglFlip 上下翻转效果
因此，我在类的扩展中定义以下几种枚举类型：

#import <UIKit/UIKit.h>
/**
 *  SX动画扩展:
 */
@interface UIView (SXAnimation)
/**
 *  动画类型
 */
typedef enum{
    
    SXpageCurl,               // 向上翻一页
    SXpageUnCurl,              //向下翻一页
    SXrippleEffect,            //波纹
    SXsuckEffect,              //吸收
    SXcube,                    //立方体
    SXoglFlip,                 //翻转
    SXcameraIrisHollowOpen,    //镜头开
    SXcameraIrisHollowClose,   //镜头关
    SXfade,                    //翻页
    SXmovein,                  //弹出
    SXpush                     //推出
    
}AnimationType;

/**
 *  动画方向
 */
typedef enum{
    SXleft,                 //左
    SXright,                //右
    SXtop,                  //顶部
    SXbottom,               //底部
    SXmiddle 
    
}Direction;

-3. 最终再扩展一个类别方法，用于设置我们想要的某些动画。

/**
 *  动画设置
 *
 *  @param animation    动画
 *  @param durationTime 动画时间
 *  @param subtype      过渡方向
 */
- (void)setAnimationWithType:(AnimationType)animation
                    duration:(float)durationTime
                   directionSubtype:(Direction)subtype;

-4 .实现部分，还是很简单的

- (void)setAnimationWithType:(AnimationType)animation
                    duration:(float)durationTime
            directionSubtype:(Direction)subtype
{
    //CATransition实体
    CATransition* ani=[CATransition animation];
    //动画时间:
    ani.duration = durationTime;
    //选择动画过渡方向:
    switch (subtype) {
        case SXleft:
            ani.subtype = kCATransitionFromLeft;
            break;
        case SXright:
            ani.subtype = kCATransitionFromRight;
            break;
        case SXtop:
            ani.subtype = kCATransitionFromTop;
            break;
        case SXbottom:
            ani.subtype = kCATransitionFromBottom;
            break;
            case SXmiddle:
            ani.subtype = kCATruncationMiddle;
            break;
        default:
            break;
    }
    //选择动画效果：
    switch (animation)
 {
        case SXpageCurl:
        {
            ani.type = @"pageCurl";
        }
            break;
        case SXpageUnCurl:
        {
            ani.type = @"pageUnCurl";
        }
            break;
        case SXrippleEffect:
        {
            ani.type = @"rippleEffect";
        }
            break;
        case SXsuckEffect:
        {
            ani.type = @"suckEffect";
        }
            break;
        case SXcube:
        {
            ani.type = @"cube";
        }
            break;
        case SXcameraIrisHollowOpen:
        {
            ani.type = @"cameraIrisHollowOpen";
        }
            break;
        case SXoglFlip:
        {
            ani.type = @"oglFlip";
        }
            break;
        case SXcameraIrisHollowClose:
        {
            ani.type = @"cameraIrisHollowClose";  
        }
        break;
        case SXmovein:
            ani.type = kCATransitionMoveIn;
            break;
        case SXpush:
            ani.type = kCATransitionPush;
            break;
        case SXfade:
            ani.type = kCATransitionFade;
            break;
             default:
            break;  
      } 
        //动画加到图层上
    [self.layer addAnimation:ani forKey:nil];
    }

• 5.最后是，该如何使用？ ---我在这里用了一个滚动视图做的示例：

@interface ViewController ()<UIScrollViewDelegate>
{
    //动画类型
    AnimationType Type;
    //轮播图
    UIScrollView * scroll ;
    
}

an3.gif

- (void)viewDidLoad {
    [super viewDidLoad];

    Type = SXrippleEffect;
    
    scroll = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 100, ScreenWidth, 200)];
    scroll.contentSize = CGSizeMake(ScreenWidth*8, 200);
    scroll.pagingEnabled = YES;
    scroll.delegate = self;
    
    for (NSInteger i = 0; i<8; i++)
    {
       UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(ScreenWidth*i, 0, ScreenWidth, 200)];
        
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%02ld.jpg",i+1]];
        
        [scroll addSubview:imageView];
    }
    [self.view addSubview:scroll];
    
    
}

6.在滚动视图中代理方法中设置想要的动画效果：

//将要拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    
    //调用设置动画
     [scroll setAnimationWithType:Type duration:1.0 directionSubtype:SXright];
   
}

• 7.设置一个按钮，弹出选择框，选择想要的效果，设置Type = SXpageUnCurl等效果;
  Paste_Image.png