IOS中的動畫使用
IOS中的動畫右兩大類1.UIView的檢視動畫2.Layer的動畫 UIView的動畫也是基於Layer的動畫
動畫的程式碼格式都很固定
1.UIView動畫 :一般方式
[UIView beginAnimations:@"ddd" context:nil];//設定動畫
[UIView commitAnimations]; //提交動畫
這兩個是必須有的,然後在兩句的中間新增動畫的程式碼
[UIView beginAnimations:@"ddd" context:nil];//設定動畫 ddd為動畫名稱
[UIView setAnimationDuration:3];//定義動畫持續時間
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; //setAnimationCurve來定義動畫加速或減速方式
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.window cache:YES];
//設定動畫的樣式 forView為哪個view實現這個動畫效果
[UIView setAnimationDelay:3]; //設定動畫延遲多久執行
[UIView setAnimationDelegate:self]; //設定動畫的代理 實現動畫執行前後的方法 在commitAnimation之前設定
[UIView setAnimationDidStopSelector:@selector(stop)];//設定動畫結束後執行的方法
[UIView setAnimationWillStartSelector:@selector(star)];//設定動畫將要開始執行的方法
[UIView commitAnimations]; //提交動畫
typedef enum {
UIViewAnimationTransitionNone, //普通狀態
UIViewAnimationTransitionFlipFromLeft, //從左往右翻轉
UIViewAnimationTransitionFlipFromRight, //從右往左翻轉
UIViewAnimationTransitionCurlUp, //向上翻頁
UIViewAnimationTransitionCurlDown, //向下翻頁
} UIViewAnimationTransition;
typedef enum {
UIViewAnimationCurveEaseInOut,
UIViewAnimationCurveEaseIn,
UIViewAnimationCurveEaseOut,
UIViewAnimationCurveLinear
} UIViewAnimationCurve;
[UIView beginAnimations:@"ddd" context:nil]; //設定動畫
view.frame = CGRectMake(200, 200, 100, 100);
[UIView commitAnimations]; //提交動畫
當view從本來的frame移動到新的frame時會慢慢漸變 而不是一下就完成了 中間也可以新增到上面那段中間 只是多種效果重疊
以下這些也可以加到 [UIView beginAnimations:@"ddd" context:nil]; [UIView commitAnimations];之間
view.transform = CGAffineTransformMakeTranslation(10, 10);//設定偏移量 相對於最初的 只能偏移一次
view.transform = CGAffineTransformTranslate(view.transform, 10, 10); //設定偏移量 偏移多次
self.view.transform = CGAffineTransformMakeRotation(M_PI);//設定旋轉度 只能旋轉一次
self.view.transform = CGAffineTransformRotate(self.view.transform, M_PI); //旋轉多次
self.view.transform = CGAffineTransformMakeScale(1.1, 1.1); //設定大小 只能改變一次 數值時相對於本來的幾倍
self.view.transform = CGAffineTransformScale(self.view.transform, 1.1, 1.1);//改變多次
self.view.transform = CGAffineTransformIdentity;//回到當初的樣子 執行一次
self.view.transform = CGAffineTransformInvert(self.view.transform);//得到相反的樣子 大小 方向 位置執行多次
Block方式
[UIView animateWithDuration:3 animations:^(void){
//這裡相當於在begin和commint之間
}completion:^(BOOL finished){
//這裡相當於動畫執行完成後要執行的方法,可以繼續巢狀block
}];
2.CAAnimation
需要新增庫,和包含標頭檔案
caanimation有多個子類
CABasicAnimation
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
//@""裡的字串有多種,可以自己找相關資料,一定要填對,動畫才會執行 opacity設定透明度 bounds.size設定大小
[animation setFromValue:[NSNumber numberWithFloat:1.0]]; //設定透明度從幾開始
[animation setToValue:[NSNumber numberWithFloat:0.3]];//設定透明度到幾結束
[animation setDuration:0.1]; //設定動畫時間
[animation setRepeatCount:100000];//設定重複時間
[animation setRepeatDuration:4]; //會限制重複次數
[animation setAutoreverses:NO];//設定是否從1.0到0.3 再從0.3到1.0 為一次 如果設定為NO則 1.0到0.3為一次
[animation setRemovedOnCompletion:YES]; //完成時移出動畫 預設也是
[view.layer addAnimation:animation forKey:@"abc"];//執行動畫
CAKeyframeAnimation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];//設定view從初始位置經過一系列點
NSArray *postionAraay = [NSArray arrayWithObjects:[NSValue valueWithCGPoint:CGPointMake(100, 20)], [NSValue valueWithCGPoint:CGPointMake(40, 80)],[NSValue valueWithCGPoint:CGPointMake(30, 60)],[NSValue valueWithCGPoint:CGPointMake(20, 40)],[NSValue valueWithCGPoint:CGPointMake(0, 100)],nil];//設定點
NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.3],[NSNumbernumberWithFloat:0.5],[NSNumber numberWithFloat:0.6],[NSNumber numberWithFloat:0.1],[NSNumbernumberWithFloat:1.0], nil]; //設定移動過程的時間
[animation setKeyTimes:times];
[animation setValues:postionAraay];
[animation setDuration:5]; //設定動畫時間
[bigImage.layer addAnimation:animation forKey:@"dd"]; //執行動畫
CATransition
CATransition *animation = [CATransition animation];
animation.duration = 0.5f;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.fillMode = kCAFillModeForwards;
/*
kCATransitionFade;
kCATransitionMoveIn;
kCATransitionPush;
kCATransitionReveal;
*/
/*
kCATransitionFromRight;
kCATransitionFromLeft;
kCATransitionFromTop;
kCATransitionFromBottom;
*/
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromBottom;
[view.layer addAnimation:animation forKey:animation];
type也可以直接用字串
/*
cube
suckEffect 捲走
oglFlip 翻轉
rippleEffect 水波
pageCurl 翻頁
pageUnCurl
cameraIrisHollowOpen
cameraIrisHollowClose
*/
相關文章
- IOS動畫使用iOS動畫
- 聊聊iOS中的動畫iOS動畫
- Flutter 中動畫的使用Flutter動畫
- iOS 動畫iOS動畫
- [譯] iOS 中賞心悅目的動畫iOS動畫
- iOS 動畫之Spring動畫、Block動畫、GIF圖iOS動畫SpringBloC
- lottie 動畫在 vue 中的使用動畫Vue
- iOS動畫全面解析iOS動畫
- iOS UIView基本動畫iOSUIView動畫
- iOS 動畫技巧 (一)iOS動畫
- 系統學習iOS動畫之五:使用UIViewPropertyAnimatoriOS動畫UIView
- iOS動畫系列之七:實現類似Twitter的啟動動畫iOS動畫
- iOS實現字串動畫iOS字串動畫
- iOS 關鍵幀動畫iOS動畫
- iOS 動畫之CoreAnimation(CALayer)iOS動畫
- 系統學習iOS動畫之七:其它型別的動畫iOS動畫型別
- 可以玩的UI-iOS互動式動畫UIiOS動畫
- Flutter動畫的使用Flutter動畫
- 【動畫消消樂 】仿ios、android中常見的一個loading動畫 074動畫iOSAndroid
- iOS中WKWebView互動使用總結iOSWebView
- iOS動畫系列之四:基礎動畫之平移篇iOS動畫
- 系統學習iOS動畫之一:檢視動畫iOS動畫
- 系統學習iOS動畫之三:圖層動畫iOS動畫
- iOS 動畫 - 窗景篇(二)iOS動畫
- Flutter 中的動畫Flutter動畫
- vue中的動畫Vue動畫
- iOS動畫系列之二:帶時分秒指標的時鐘動畫(下)iOS動畫指標
- 搞定動畫之 JQuery 中的自定義動畫動畫jQuery
- 系統學習iOS動畫之六:3D動畫iOS動畫3D
- 逐幀動畫的使用動畫
- iOS動態庫的使用iOS
- iOS 核心動畫高階技巧 - 1iOS動畫
- iOS 動畫基礎總結篇iOS動畫
- iOS動畫-擴散波紋效果iOS動畫
- iOS開發 - 動畫實踐系列iOS動畫
- iOS開發UI篇--iOS動畫(Core Animation)總結iOSUI動畫
- 系統學習iOS動畫之四:檢視控制器的轉場動畫iOS動畫
- 如何在網頁中做出炫酷的動畫(使用Spine)網頁動畫
- iOS動畫專題·UIView二維形變動畫與CAAnimation核心動畫(transform動畫,基礎,關鍵幀,組動畫,路徑動畫,貝塞爾曲線)iOS動畫UIViewORM