漸變動畫.gif

• 1 . 閑來無聊，研究了下CATransition動畫，發(fā)現(xiàn)原來，還是很實(shí)用,想了下決定試著看能否封裝下,最后在使用幾種方法后，最后使用類擴(kuò)展(類別)的方法:

Paste_Image.png

-2.在CATransition這個實(shí)體中，蘋果有提供我們多個動畫，CATransition的type屬性
1.#define定義的常量
kCATransitionFade 交叉淡化過渡
kCATransitionMoveIn 新視圖移到舊視圖上面
kCATransitionPush 新視圖把舊視圖推出去
kCATransitionReveal 將舊視圖移開,顯示下面的新視圖
2.用字符串表示
pageCurl 向上翻一頁
pageUnCurl 向下翻一頁
rippleEffect 滴水效果
suckEffect 收縮效果，如一塊布被抽走
cube 立方體效果
oglFlip 上下翻轉(zhuǎn)效果
因此，我在類的擴(kuò)展中定義以下幾種枚舉類型：

#import <UIKit/UIKit.h>
/**
 *  SX動畫擴(kuò)展:
 */
@interface UIView (SXAnimation)
/**
 *  動畫類型
 */
typedef enum{
    
    SXpageCurl,               // 向上翻一頁
    SXpageUnCurl,              //向下翻一頁
    SXrippleEffect,            //波紋
    SXsuckEffect,              //吸收
    SXcube,                    //立方體
    SXoglFlip,                 //翻轉(zhuǎn)
    SXcameraIrisHollowOpen,    //鏡頭開
    SXcameraIrisHollowClose,   //鏡頭關(guān)
    SXfade,                    //翻頁
    SXmovein,                  //彈出
    SXpush                     //推出
    
}AnimationType;

/**
 *  動畫方向
 */
typedef enum{
    SXleft,                 //左
    SXright,                //右
    SXtop,                  //頂部
    SXbottom,               //底部
    SXmiddle 
    
}Direction;

-3. 最終再擴(kuò)展一個類別方法，用于設(shè)置我們想要的某些動畫。

/**
 *  動畫設(shè)置
 *
 *  @param animation    動畫
 *  @param durationTime 動畫時間
 *  @param subtype      過渡方向
 */
- (void)setAnimationWithType:(AnimationType)animation
                    duration:(float)durationTime
                   directionSubtype:(Direction)subtype;

-4 .實(shí)現(xiàn)部分，還是很簡單的

- (void)setAnimationWithType:(AnimationType)animation
                    duration:(float)durationTime
            directionSubtype:(Direction)subtype
{
    //CATransition實(shí)體
    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.在滾動視圖中代理方法中設(shè)置想要的動畫效果：

//將要拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    
    //調(diào)用設(shè)置動畫
     [scroll setAnimationWithType:Type duration:1.0 directionSubtype:SXright];
   
}

• 7.設(shè)置一個按鈕，彈出選擇框，選擇想要的效果，設(shè)置Type = SXpageUnCurl等效果;
  
  Paste_Image.png