iOS UIView基本動畫

joker_king發表於2018-12-19
iOSUIView動畫

UIView動畫簡述

UIView 動畫能夠完美的建立起一座連線檢視當前狀態和未來狀態的視覺橋樑。利用這個特性，你可以把所有的視覺變化連線起來形成動畫，從而給使用者帶來更好的體驗。可以產生UIView動畫效果的變化包括

@property frame //基於父檢視的位置和大小
@property bounds //改變檢視的框架和邊界
@property center //改變檢視的中心
@property transform //仿射變換
@property alpha //改變透明度
@property backgroundColor //改變背景顏色
@property contentStretch //拉伸變換
複製程式碼

注意：大部分的動畫效果都有一個準備時長，在viewDidLoad方法中直接呼叫的時候可能會顯現不出動畫的效果。

##UIView動畫塊 首先我們先來看幾個方法,以下的類方法都由UIView來呼叫，設定動畫的一些相關的屬性。

  • 開始構建動畫，標誌著動畫塊的開始 animationID:標記動畫的ID，可以簡單理解為這個動畫的名字 context：上下文，可以為動畫的代理方法傳值 如果不想給這兩個引數，也可以填nil，一般建議給animationID一個引數。
+(void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;
複製程式碼
  • 定義動畫加速和減速的方式 curve:是UIViewAnimationCurve的一個列舉值。
+(void)setAnimationCurve:(UIViewAnimationCurve)curve; 
複製程式碼

下面是它的四個列舉值,這四種方式分別為淡入淡出、淡入、淡出、線性。其中淡入淡出效果最為自然。

typedef NS_ENUM(NSInteger, UIViewAnimationCurve) {
    UIViewAnimationCurveEaseInOut,         // slow at beginning and end
    UIViewAnimationCurveEaseIn,            // slow at beginning
    UIViewAnimationCurveEaseOut,           // slow at end
    UIViewAnimationCurveLinear
};
複製程式碼
  • 以秒為單位指定動畫的時長。 儘量讓動畫在1到2秒內完成，以免讓使用者覺得不耐煩。
+(void)setAnimationDuration:(NSTimeInterval)duration;              // default = 0.2
複製程式碼
  • 設定動畫的重複次數。 如果填寫的不是整數，而是帶有小數的，動畫會執行不完整，所以切記不要給小數。
+(void)setAnimationRepeatCount:(float)repeatCount;
複製程式碼
  • 反轉，讓動畫原速返回，只有設定了重複次數，此方法才會生效。
+(void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 
複製程式碼
  • 設定動畫播放時的回撥物件
+(void)setAnimationDelegate:(nullable id)delegate; 
複製程式碼
  • 動畫開始和結束時的回撥方法。
+(void)setAnimationWillStartSelector:(nullable SEL)selector;                
// default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context
+(void)setAnimationDidStopSelector:(nullable SEL)selector;                  
// default = NULL. -animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
複製程式碼
  • 提交動畫，也標識著動畫塊的結束。 在我們設定完動畫的一些相關的屬性後，我們需要提交這個動畫，才能完成整個流程的操作。 注意，所有有關於動畫的設定必須都在這個呼叫這個方法之前進行，否則無效。
+(void)commitAnimations;  
複製程式碼

示例程式碼

以下是一個讓紅色的View移動的動畫，我們只需要在合適的地方呼叫它就可以看到效果了。

- (void)animationAction{
//開始構建動畫
    //第一個引數：動畫的標記
    //第二個引數：上下文，可以為動畫的代理方法傳值。
    [UIView beginAnimations:@"第一個動畫" context:@"55555"];
    //動畫的時長
    [UIView setAnimationDuration:0.05];
    //重複次數
    [UIView setAnimationRepeatCount:10];
    //反轉，讓動畫原速返回，只有設定了重複次數，此屬性才會生效
    [UIView setAnimationRepeatAutoreverses:YES];
    //設定動畫播放的回撥物件
    [UIView setAnimationDelegate:self];
    //代理方法中動畫開始時的回撥方法
    [UIView setAnimationWillStartSelector:@selector(amimationWillStart: context:)];
    //代理方法中動畫結束時的回撥方法
    [UIView setAnimationDidStopSelector:@selector(animationStop: context:)];
    //改變redView的frame
    CGRect rect = self.redView.frame;
    rect.origin = CGPointMake(250, 300);
    self.redView.frame = rect;
    //提交動畫
    [UIView commitAnimations];
}
複製程式碼

下面是上述程式碼中兩個代理方法的回撥方法

- (void)amimationWillStart:(NSString *)animationTag context:(NSString *)context{
    NSLog(@"%@就要開始了----context---%@",animationTag,context);
}
- (void)animationStop:(NSString *)animatonTag context:(NSString *)context{
    NSLog(@"%@就要停止了----context---%@",animatonTag,context);
}
複製程式碼

過渡動畫

呼叫這個方法就可以實現對指定檢視的過渡效果，transition是一個列舉值，它決定了過渡的效果，cache引數是告訴系統是否用cache進行動畫，一般填YES。

+(void)setAnimationTransition:(UIViewAnimationTransition)transition forView:
(UIView *)view cache:(BOOL)cache;
複製程式碼

示例程式碼

以下是一個過渡動畫的示例

-(void)aniamtion{
    [UIView beginAnimations:@"animation" context:nil];
    [UIView setAnimationDuration:2];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.aView cache:YES];
    [UIView commitAnimations];
}
複製程式碼

轉場動畫

轉場動畫是過渡動畫的一個兄弟型別，它和過渡動畫的效果類似，它的應用場景一般使用在，我們需要在兩個檢視之間進行切換的時候，它與過渡動畫不同的是，它的效果不管你的檢視是多大的，都會進行一個全屏的動畫效果，而過渡動畫的效果只侷限於這個檢視的範圍內。

示例程式碼

- (void)transitionAnimation{
//    轉場動畫在轉場的時候做的操作。
//    [self.redView.superview addSubview:self.green];
//    [self.redView removeFromSuperview];
    [UIView transitionFromView:self.redView toView:self.green duration:2.0 
options:UIViewAnimationOptionTransitionFlipFromBottom completion:nil];
}
複製程式碼

以上是關於UIView的基本動畫的使用以及我的個人理解。

相關文章