iOS UIView Block動畫
阿新 • • 發佈:2018-11-21
UIView 動畫
關於UIView動畫,蘋果提供了許多簡便的API。
封裝好的blcok動畫,使用起來超簡單。
第一種:最基礎的
[UIView animateWithDuration:① animations:^{
②
}];
①:動畫執行時間(型別:NSTimeInterval)
②:要執行動畫的view,最後的狀態(座標,旋轉角度,大小,透明度等)
例子:
UIView * view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
[UIView animateWithDuration:1 animations:^{
view.frame = CGRectMake(100, 100, 50, 50);
view.alpha = 0;
view.backgroundColor = [UIColor yellowColor];
}];
第二種:帶有完成的block動畫
[UIView animateWithDuration:① animations:^{
②
} completion:^(BOOL finished) {
③
}];
①:動畫執行時間(型別:NSTimeInterval)
②:要執行動畫的view,最後的狀態(座標,旋轉角度,大小,透明度等)
③:動畫執行完要執行的程式碼,例如:網路請求,更新資料等。
第三種:帶有延時和速度模式的block動畫
[UIView animateWithDuration:① delay:② options:③ animations:^{
④
} completion:^(BOOL finished) {
⑤
}];
①:動畫執行時間(型別:NSTimeInterval)
②:動畫延遲執行的時間 (型別:NSTimeInterval )
③:動畫的過渡效果引數如下:多個引數時用“|”連線 {
UIViewAnimationOptionLayoutSubviews //提交動畫的時候佈局子控制元件,表示子控制元件將和父控制元件一同動畫。
UIViewAnimationOptionAllowUserInteraction //動畫時允許使用者交流,比如觸控
UIViewAnimationOptionBeginFromCurrentState //從當前狀態開始動畫
UIViewAnimationOptionRepeat //動畫無限重複
UIViewAnimationOptionAutoreverse //執行動畫迴路,前提是設定動畫無限重複
UIViewAnimationOptionOverrideInheritedDuration //忽略外層動畫巢狀的執行時間
UIViewAnimationOptionOverrideInheritedCurve //忽略外層動畫巢狀的時間變化曲線
UIViewAnimationOptionAllowAnimatedContent //通過改變屬性和重繪實現動畫效果,如果key沒有提交動畫將使用快照
UIViewAnimationOptionShowHideTransitionViews //用顯隱的方式替代新增移除圖層的動畫效果
UIViewAnimationOptionOverrideInheritedOptions //忽略巢狀繼承的選項
//時間函式曲線相關
UIViewAnimationOptionCurveEaseInOut //時間曲線函式,由慢到快
UIViewAnimationOptionCurveEaseIn //時間曲線函式,由慢到特別快
UIViewAnimationOptionCurveEaseOut //時間曲線函式,由快到慢
UIViewAnimationOptionCurveLinear //時間曲線函式,勻速
}
④:要執行動畫的view,最後的狀態(座標,旋轉角度,大小,透明度等)
⑤:動畫執行完要執行的程式碼,例如:網路請求,更新資料等。
第四種:帶有彈簧特性的block動畫
[UIView animateWithDuration: delay: usingSpringWithDamping:① initialSpringVelocity:② options: animations:^{
} completion:^(BOOL finished) {
}];
相同的引數就不介紹了
主要介紹兩個
①:阻尼比。阻尼比為1或大於1,動畫將平穩減速到其最終價值View沒有振盪。阻尼比小於1,將產生越來越多的回彈來完全停止。(型別:CGFloat)
②:彈簧的速度。(型別:CGFloat)
第五種:轉場動畫
[UIView transitionWithView:① duration:1 options:② animations:^{
} completion:^(BOOL finished) {
}];
①:要執行動畫的View
②:過度效果 {
UIViewAnimationOptionTransitionNone //無效果
UIViewAnimationOptionTransitionFlipFromLeft //左右翻轉
UIViewAnimationOptionTransitionFlipFromRight //右左翻轉
UIViewAnimationOptionTransitionCurlUp //向上翻書的效果
UIViewAnimationOptionTransitionCurlDown //向下翻書的效果
UIViewAnimationOptionTransitionCrossDissolve //漸隱漸現
UIViewAnimationOptionTransitionFlipFromTop //上下翻轉
UIViewAnimationOptionTransitionFlipFromBottom //下上翻轉
}
例子:
宣告一個view1
self.view1 = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
self.view1 .backgroundColor = [UIColor redColor];
[self.view addSubview: self.view1 ];
在一個按鈕的點選事件裡寫:
- (IBAction)btnfun:(id)sender {
self.view1.backgroundColor = [UIColor yellowColor];
[UIView transitionWithView:self.view1 duration:1 options:UIViewAnimationOptionTransitionFlipFromBottom animations:^{
UIView*v = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
v.backgroundColor =[UIColor blueColor];
[self.view1 addSubview:v];
self.view1.frame = CGRectMake(0, 0, 200, 200);
self.view1.alpha = 0.4;
} completion:^(BOOL finished) {
}];
//備註:經過測試。改變顏色的話 不要寫在animations的block裡,效果不好,寫在執行動畫之前。
}
以下兩個 還未研究,有時間補上 有懂得可以在評論裡告訴我 謝謝
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray<__kindof UIView *> *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0)