UIView動畫(過渡效果)的學習筆記

UIView視圖的動畫功能,可以使在更新或切換視圖時有放緩節奏、產生流暢的動畫效果,進而改善用戶體驗。UIView可以產生動畫效果的變化包括:

位置變化:在屏幕上移動視圖。

  • 大小變化:改變視圖框架(frame)和邊界。
  • 拉伸變化:改變視圖內容的延展區域。
  • 改變透明度:改變視圖的alpha值。
  • 改變狀態:隱藏或顯示狀態。
  • 改變視圖層次順序:視圖哪個前哪個後。
  • 旋轉:即任何應用到視圖上的仿射變換(transform)。

創建UIView動畫(塊)——(指過渡效果的動畫)

一.基本方式:使用UIView類的UIViewAnimation擴展
 UIView動畫是成塊運行的。發出beginAnimations:context:請求標誌着動畫塊的開始;commitAnimations標誌着動畫塊的結束。把這兩個類方法發送給UIView而不是發送給單獨的視圖。在這兩個調用之間的可定義動畫的展現方式並更新視圖。函數說明:

//開始準備動畫
+ (void)beginAnimations:(NSString *)animationID context:(void *)context;

//運行動畫
+ (void)commitAnimations;

具體二段動畫代碼:

複製代碼
 1 [UIView beginAnimations:nil context:nil];
 2 //setAnimationCurve來定義動畫加速或減速方式
 3 [UIView setAnimaitonCurve:UIViewAnimationCurveLinear]; 
 4 [UIView setAnimationDuration:2.7]; //動畫時長
 5 [UIView setAnimationTransition:transition forView:self.view cache:YES];
 6 // operation>>>
 7 [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
 8 // end<<<<<
 9 [UIView commitAnimations];
10 
11 CGContextRef context = UIGraphicsGetCurrentContext(); //返回當前視圖堆棧頂部的圖形上下文
12 [UIView beginAnimations:nil context:context];
13 [UIView setAnimaitonCurve:UIViewAnimationCurveEaseInOut];
14 [UIView setAnimationDuration:1.0];
15 // View changes go here
16 [contextView setAlpha:0.0f];
17 [UIView commitAnimations];
複製代碼

其中transition取值範圍:UIView類本身提供四種過渡效果
UIViewAnimationTransitionNone 正常
UIViewAnimationTransitionFlipFromLeft 從左向右翻
UIViewAnimationTransitionFlipFromRight 從右向左翻
UIViewAnimationTransitionCurlUp 從下向上卷
UIViewAnimationTransitionCurlDown 從上向下卷 

二.block方式:使用UIView類的UIViewAnimationWithBlocks擴展
要用到的函數有:

複製代碼
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);
//間隔,延遲,動畫參數(好像沒用?),界面更改塊,結束塊

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);
 // delay = 0.0, options = 0

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0); 
// delay = 0.0, options = 0, completion = NULL
複製代碼
複製代碼
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0); 
// toView added to fromView.superview, fromView removed from its superview界面替換,這裏的options參數有效
複製代碼

三.core方式:使用CATransition類
iPhone還支持Core Animation作爲其QuartzCore架構的一部分,CA API爲iPhone應用程序提供了高度靈活的動畫解決方案。但是須知:CATransition只針對圖層,不針對視圖。圖層是Core Animation與每個UIView產生聯繫的工作層面。使用Core Animation時,應該將CATransition應用到視圖的默認圖層([myView layer]而不是視圖本身。

使用CATransition類實現動畫,只需要建立一個Core Animation對象,設置它的參數,然後把這個帶參數的過渡添加到圖層即可。
使用要引入QuartzCore.framework 代碼#import <QuartzCore/QuartzCore.h>


示例代碼:

複製代碼
 1 CATransition *transition = [CATransition animation];
 2 transition.duration = 0.7;
 3 transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 4 transition.type = kCATransitionMoveIn;//{kCATransitionMoveIn, kCATransitionPush, kCATransitionReveal, kCATransitionFade};
 5 
 6 //更多私有{@"cube",@"suckEffect",@"oglFlip",@"rippleEffect",@"pageCurl",@"pageUnCurl",@"cameraIrisHollowOpen",@"cameraIrisHollowClose"};
 7 transition.subtype = kCATransitionFromLeft;//{kCATransitionFromLeft, kCATransitionFromRight, kCATransitionFromTop, kCATransitionFromBottom};
 8 
 9 transition.delegate = self;
10 [self.view.layer addAnimation:transition forKey:nil];
11 
12 // 要做的
13 [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
複製代碼

CATransition動畫使用了類型type和子類型subtype兩個概念。type屬性指定了過渡的種類(淡化、推擠、揭開、覆蓋)。subtype設置了過渡的方向(從上、下、左、右)。另外,CATransition私有的動畫類型有(立方體、吸收、翻轉、波紋、翻頁、反翻頁、鏡頭開、鏡頭關)。
 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章