【轉】iOS開發之各類動畫各類頁面切面效果

原文： http://www.cnblogs.com/ludashi/p/4160208.html?utm_source=tuicool

　　因工做緣由，有段時間沒發表博客了，今天就發表篇博客給你們帶來一些乾貨，切勿錯過 哦。今天所介紹的主題是關於動畫的，在以前的博客中也有用到動畫的地方，今天就好好的總結一下iOS開發中經常使用的動畫。說道動畫其中有一個是仿射變換的概 念，至於怎麼仿射的怎麼變換的，原理如何等在本篇博客中不作贅述。今天要分享的是如和用動畫作出咱們要作的效果。

　　今天主要用到的動畫類是CALayer下的CATransition至於各類動畫類中如何繼承的在這也不作贅述，網上的資料是一抓一大把。好廢話少說切入今天的正題。

　　一.封裝動畫方法

　　　　1.用CATransition實現動畫的封裝方法以下，每句代碼是何意思，請看註釋之。

 1 #pragma CATransition動畫實現  2 - (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIView *) view  3 {  4 //建立CATransition對象  5 CATransition *animation = [CATransition animation];  6  7 //設置運動時間  8 animation.duration = DURATION;  9 10 //設置運動type 11 animation.type = type; 12 if (subtype != nil) { 13 14 //設置子類 15 animation.subtype = subtype; 16  } 17 18 //設置運動速度 19 animation.timingFunction = UIViewAnimationOptionCurveEaseInOut; 20 21 [view.layer addAnimation:animation forKey:@"animation"]; 22 }

　　　　代碼說明：

　　　　　　CATransition經常使用的屬性以下：

　　　　　　　　duration:設置動畫時間

　　　　　　　　type:稍後下面會詳細的介紹運動類型

　　　　　　　　subtype:和type匹配使用，指定運動的方向，下面也會詳細介紹

　　　　　　　　timingFunction ：動畫的運動軌跡，用於變化起點和終點之間的插值計算,形象點說它決定了動畫運行的節奏,好比是

　　　　　　　　　　　　　　　　　均勻變化(相同時間變化量相同)仍是先快後慢,先慢後快仍是先慢再快再慢.　　　　

　　　　　　　　　　　　　　      *  動畫的開始與結束的快慢,有五個預置分別爲(下同):

　　　　　　　　　　　　　　　　　　     *  kCAMediaTimingFunctionLinear            線性,即勻速

 　　　　　　　　　　　　　　　　　　    *  kCAMediaTimingFunctionEaseIn            先慢後快

    　　　　　　　　　　　　　　　　　　 *  kCAMediaTimingFunctionEaseOut           先快後慢

     　　　　　　　　　　　　　　　　　　*  kCAMediaTimingFunctionEaseInEaseOut     先慢後快再慢

     　　　　　　　　　　　　　　　　　　*  kCAMediaTimingFunctionDefault           實際效果是動畫中間比較快.

 

　　　　2.用UIView的block回調實現動畫的代碼封裝　

1 #pragma UIView實現動畫 2 - (void) animationWithView : (UIView *)view WithAnimationTransition : (UIViewAnimationTransition) transition 3 { 4 [UIView animateWithDuration:DURATION animations:^{ 5  [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 6  [UIView setAnimationTransition:transition forView:view cache:YES]; 7  }]; 8 }

 

　　　　3.改變View的背景圖，便於切換時觀察

1 #pragma 給View添加背景圖 2 -(void)addBgImageWithImageName:(NSString *) imageName 3 { 4 self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:imageName]]; 5 }

 

　　二.調用上面的方法實現咱們想要的動畫

　　　　1.咱們在View上添加多個Button,給不一樣的Button設置不一樣的Tag值，而後再ViewController中綁定同一個方法，點擊不一樣的button實現不一樣的頁面切換效果。storyBoard上的控件效果以下圖所示：

　　　　2.下面咱們就開始編寫點擊button要回調的方法

　　　　　　(1).定義枚舉來標示按鈕所對應的動畫類型，代碼以下：

 1 typedef enum : NSUInteger {  2 Fade = 1, //淡入淡出  3 Push, //推擠  4 Reveal, //揭開  5 MoveIn, //覆蓋  6 Cube, //立方體  7 SuckEffect, //吮吸  8 OglFlip, //翻轉  9 RippleEffect, //波紋 10 PageCurl, //翻頁 11 PageUnCurl, //反翻頁 12 CameraIrisHollowOpen, //開鏡頭 13 CameraIrisHollowClose, //關鏡頭 14 CurlDown, //下翻頁 15 CurlUp, //上翻頁 16 FlipFromLeft, //左翻轉 17 FlipFromRight, //右翻轉 18 19 } AnimationType;

　　

　　　　(2),獲取Button的Tag值：

1     UIButton *button = sender; 2 AnimationType animationType = button.tag;

 

　　　　(3).每次點擊button都改變subtype的值，包括上,左,下,右

 1     NSString *subtypeString;  2  3 switch (_subtype) {  4 case 0:  5 subtypeString = kCATransitionFromLeft;  6 break;  7 case 1:  8 subtypeString = kCATransitionFromBottom;  9 break; 10 case 2: 11 subtypeString = kCATransitionFromRight; 12 break; 13 case 3: 14 subtypeString = kCATransitionFromTop; 15 break; 16 default: 17 break; 18  } 19 _subtype += 1; 20 if (_subtype > 3) { 21 _subtype = 0; 22 }

 

　　　　(4),經過switch結合上邊的枚舉來判斷是那個按鈕點擊的

1 switch (animationType) 2 { 3 //各類Case,此處代碼下面會給出 4 }

 

　　　3.調用咱們封裝的運動方法，來實現動畫效果

　　　　(1),淡化效果

1         case Fade: 2  [self transitionWithType:kCATransitionFade WithSubtype:subtypeString ForView:self.view]; 3 break; 4 

　　

　　　　(2).Push效果

1         case Push: 2  [self transitionWithType:kCATransitionPush WithSubtype:subtypeString ForView:self.view]; 3 break; 4 

　　　　　效果以下：

　　　

 

　　　　(3).揭開效果：

1         case Reveal: 2  [self transitionWithType:kCATransitionReveal WithSubtype:subtypeString ForView:self.view]; 3 break;

　　　　效果圖以下：

　　　　

 

　　　　(4).覆蓋效果

1         case MoveIn: 2  [self transitionWithType:kCATransitionMoveIn WithSubtype:subtypeString ForView:self.view]; 3 break; 4 

　　　　　　效果圖以下：

　　　　

 

　　　　(5).立方體效果

1         case Cube: 2 [self transitionWithType:@"cube" WithSubtype:subtypeString ForView:self.view]; 3 break;

　　　　效果以下：

　　　　

 

　　　　(6).吮吸效果

1         case SuckEffect: 2 [self transitionWithType:@"suckEffect" WithSubtype:subtypeString ForView:self.view]; 3 break;

　　　　　　效果以下：

　　

 

　　　　(7).翻轉效果

1         case OglFlip: 2 [self transitionWithType:@"oglFlip" WithSubtype:subtypeString ForView:self.view]; 3 break;

　　　　圖以下：

　　　　

 

　　　　8.波紋效果

1         case RippleEffect: 2 [self transitionWithType:@"rippleEffect" WithSubtype:subtypeString ForView:self.view]; 3 break;

　　　　

 

　　　　(9).翻頁和反翻頁效果

1         case PageCurl: 2 [self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:self.view]; 3 break; 4 5 case PageUnCurl: 6 [self transitionWithType:@"pageUnCurl" WithSubtype:subtypeString ForView:self.view]; 7 break;

　　

 

　　　　(10).相機打開效果

1         case CameraIrisHollowOpen: 2 [self transitionWithType:@"cameraIrisHollowOpen" WithSubtype:subtypeString ForView:self.view]; 3 break; 4 5 case CameraIrisHollowClose: 6 [self transitionWithType:@"cameraIrisHollowClose" WithSubtype:subtypeString ForView:self.view]; 7 break;

 

　　(11),調用上面封裝的第二個動畫方法

 1         case CurlDown:  2  [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionCurlDown];  3 break;  4  5 case CurlUp:  6  [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionCurlUp];  7 break;  8  9 case FlipFromLeft: 10  [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionFlipFromLeft]; 11 break; 12 13 case FlipFromRight: 14  [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionFlipFromRight]; 15 break;

　　

　　我把上面的Demo的源碼放在GitHub上，其地址爲：https://github.com/lizelu/CATransitionDemo.git　　　　　　

　　今天的博客就先到這裏吧，之後有時間還會更新內容的，敬請關注哦！！

做者：青玉伏案
出處：http://www.cnblogs.com/ludashi/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。 若是文中有什麼錯誤，歡迎指出。以避免更多的人被誤導。