當前位置:
首頁 > 最新 > iOS 動畫基礎總結篇

iOS 動畫基礎總結篇

關鍵時刻,第一時間送達!

GIF/23K

最近在看一個動畫的第三方,想著是時候可以把動畫相關的東西總結下了!

進入正題

動畫的大體分類(個人總結可能有誤)

分類.png

UIView 動畫

屬性動畫

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDelay:1];

[UIView setAnimationDuration:2];

[UIView setAnimationRepeatCount:100];

[UIView setAnimationRepeatAutoreverses: YES]; // 翻轉

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; //設置動畫變化的曲線

UIView *view = self.redview;

view.alpha = 0;

view.center = CGPointMake(view.center.x + 300, view.center.y);

[UIView setAnimationDelegate:self]; // 設置代理 監測動畫結束的

[UIView setAnimationDidStopSelector:@selector(shopAction)];

[UIView commitAnimations];

其中 setAnimationCurve 參數為

UIViewAnimationCurveEaseInOut:這種曲線的動畫開始緩慢,在其持續時間的中間加速,然後在完成之

前再次減慢。這是大多數動畫的默認曲線。

UIViewAnimationCurveEaseIn:動畫開始時緩慢,然後加速,直到動畫結束。這裡選用這種類型動畫曲

線。

UIViewAnimationCurveEaseOut:動畫開始時速度很快,在結束前開始減速。

UIViewAnimationCurveLinear:在動畫持續時間內,動畫勻速運行。

基於Block的屬性動畫

[UIView animateWithDuration:0.5 animations:^{

UIView *view = self.viewArray[4];

view.transform = CGAffineTransformRotate(view.transform, M_2_PI); // 順時針旋轉

}];

[UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{

UIView *view = self.viewArray[5];

view.transform = CGAffineTransformMakeScale(2, 1);//寬高伸縮比例;

} completion:^(BOOL finished) {

if (finished) {

UIView *view = self.viewArray[5];

view.backgroundColor = [UIColor colorWithRed: arc4random()%256 / 255.0 green:arc4random()%256 / 255.0 blue:arc4random()%256/ 255.0 alpha:1.0];

}

}];

[UIView animateKeyframesWithDuration:5 delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{

UIView *view = self.viewArray[6];

view.transform = CGAffineTransformMakeTranslation(300, 6);//xy移動距離;

} completion:^(BOOL finished) {

if (finished) {

UIView *view = self.viewArray[6];

view.backgroundColor = [UIColor colorWithRed: arc4random()%256 / 255.0 green:arc4random()%256 / 255.0 blue:arc4random()%256/ 255.0 alpha:1.0];

}

}];

[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionRepeat animations:^{

UIView *view = self.viewArray[7];

view.transform = CGAffineTransformMake(1.5, 1, 2, 2, 1,1);//自定義形變,參數自擬;

} completion:^(BOOL finished) {

if (finished) {

UIView *view = self.viewArray[7];

view.backgroundColor = [UIColor colorWithRed: arc4random()%256 / 255.0 green:arc4random()%256 / 255.0 blue:arc4random()%256/ 255.0 alpha:1.0];

}

}];

// 彈簧效果 // 一 動畫執行的時間 二 動畫延遲執行的時間 第三個 彈簧震動的頻率 0 - 1 值越小頻率越高 四 彈簧的起始抖動的速度 五 代表動畫的效果 六 具體執行的動畫 七 執行完之後 的操作

[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:10 options:UIViewAnimationOptionCurveLinear animations:^{

UIView *view = self.viewArray[8];

view.center = CGPointMake(0, view.center.y);

}else{

view.center = CGPointMake(view.center.x + 10, view.center.y);

}

} completion:^(BOOL finished) {

}];

我的理解是UIView的屬性動畫 就是在一定時間內改變其屬性值從而達到動畫的效果。

過渡動畫(本來有做gif 圖但是不知道為啥放上來不會動了 捂臉!)

[UIView transitionWithView:self.view3 duration:1 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{

} completion:^(BOOL finished) {

}];

參數

//轉場動畫相關的

UIViewAnimationOptionTransitionNone //無轉場動畫

UIViewAnimationOptionTransitionFlipFromLeft //轉場從左翻轉

UIViewAnimationOptionTransitionFlipFromRight //轉場從右翻轉

UIViewAnimationOptionTransitionCurlUp //上卷轉場

UIViewAnimationOptionTransitionCurlDown //下卷轉場

UIViewAnimationOptionTransitionCrossDissolve //轉場交叉消失

UIViewAnimationOptionTransitionFlipFromTop //轉場從上翻轉

UIViewAnimationOptionTransitionFlipFromBottom //轉場從下翻轉

layer 層動畫

layer 層屬性 設置一些邊框 圓角等

layer 動畫 CABasicAnimation

// 一些常用的key

/* transform.scale 比例轉化 @(0.8)

transform.scale.x 寬的比例 @(0.8)

transform.scale.y 高的比例 @(0.8)

transform.rotation.x 圍繞x軸旋轉 @(M_PI)

transform.rotation.y 圍繞y軸旋轉 @(M_PI)

transform.rotation.z 圍繞z軸旋轉 @(M_PI)

cornerRadius 圓角的設置 @(50)

backgroundColor 背景顏色的變化 (id)[UIColor purpleColor].CGColor

bounds 大小,中心不變 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];

position 位置(中心點的改變) [NSValue valueWithCGPoint:CGPointMake(300, 300)];

contents 內容,比如UIImageView的圖片 imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;

opacity 透明度 @(0.7)

*/

/* 屬性 說明

duration 動畫的時長

repeatCount 重複的次數。不停重複設置為 HUGE_VALF

repeatDuration 設置動畫的時間。在該時間內動畫一直執行,不計次數。

beginTime 指定動畫開始的時間。從開始延遲幾秒的話,設置為【CACurrentMediaTime() + 秒數】 的方式

timingFunction 設置動畫的速度變化

autoreverses 動畫結束時是否執行逆動畫

fromValue 所改變屬性的起始值

toValue 所改變屬性的結束時的值

byValue 所改變屬性相同起始值的改變數

*/

//CABasicAnimation 最終不會修改其屬性 只是為了做動畫使用

// 設置需要修改的layer層屬性

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"];

//設置對應的控制項Layer層position.x 的起始值

basicAnimation.fromValue = @(-112);

// 設置最終值

basicAnimation.toValue = @(425);

// 設置時間

basicAnimation.duration = 4;

// 設置動畫重複的次數

basicAnimation.repeatCount = 1000000;

// 將動畫添加到對應視圖的layer層上

[view1.layer addAnimation:basicAnimation forKey:nil];

CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

transformAnima.fromValue = @(M_PI_2);

transformAnima.toValue = @(M_PI);

transformAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

transformAnima.autoreverses = YES;

transformAnima.repeatCount = HUGE_VALF;

transformAnima.beginTime = CACurrentMediaTime() + 1;

// 這兩個是在動畫結束之後使view 到最終狀態而不是原始狀態 因為layer 層動畫 其實view 本身frame 沒有改變的

transformAnima.removedOnCompletion = NO;

transformAnima.fillMode = kCAFillModeForwards;

// fillMode

/* 該屬性定義了你的動畫在開始和結束時的動作。默認值是 kCAFillModeRemoved。

取值的解釋

kCAFillModeRemoved 設置為該值,動畫將在設置的 beginTime 開始執行(如沒有設置beginTime屬性,則動畫立即執行),動畫執行完成後將會layer的改變恢復原狀。

kCAFillModeForwards 設置為該值,動畫即使之後layer的狀態將保持在動畫的最後一幀,而removedOnCompletion的默認屬性值是 YES,所以為了使動畫結束之後layer保持結束狀態,應將removedOnCompletion設置為NO。

kCAFillModeBackwards 設置為該值,將會立即執行動畫的第一幀,不論是否設置了 beginTime屬性。觀察發現,設置該值,剛開始視圖不見,還不知道應用在哪裡。

kCAFillModeBoth 該值是 kCAFillModeForwards 和 kCAFillModeBackwards的組合狀態

*/

// 添加動畫

[view.layer addAnimation:transformAnima forKey:@"A"];

CAKeyframeAnimation 關鍵幀動畫

// 關鍵幀動畫

// 指定動畫需要修改的屬性

CAKeyframeAnimation *keyFrameA = [CAKeyframeAnimation animationWithKeyPath:@"position"];

// 獲得起始的點

CGPoint point1 = view12.layer.position;

// 第二個點

CGPoint point2 = CGPointMake(375 / 2.0, -50);

// 第三個點

CGPoint point3 = CGPointMake(375 + 50, point1.y);

// 第四個點

CGPoint point4 = point1;

NSValue *pointV1 = [NSValue valueWithCGPoint:point1];

NSValue *pointV2 = [NSValue valueWithCGPoint:point2];

NSValue *pointV3 = [NSValue valueWithCGPoint:point3];

NSValue *pointV4 = [NSValue valueWithCGPoint:point4];

keyFrameA.values = @[pointV1,pointV2,pointV3,pointV4];

// 設置每幀動畫的起始和結束點

keyFrameA.duration = 5;

// 設置重複的次數

keyFrameA.repeatCount = 1000;

//將動畫添加到指定的控制項的layer上;

[view12.layer addAnimation:keyFrameA forKey:nil];

//繞矩形循環跑

CALayer * rectLayer = [[CALayer alloc] init];

rectLayer.frame = CGRectMake(15, 200, 30, 30);

rectLayer.cornerRadius = 15;

rectLayer.backgroundColor = [[UIColor blackColor] CGColor];

CAKeyframeAnimation *rectRunAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

//設定關鍵幀位置,必須含起始與終止位置

// CGMutablePathRef path = CGPathCreateMutable()

// CGPathMoveToPoint(path, NULL, rectLayer.position.x - 15, rectLayer.position.y - 15);

// CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y);

// CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y + 100);

// CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y + 100);

// CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y);

// rectRunAnimation.path = path;

// CGPathRelease(path);

//設定每個關鍵幀的時長,如果沒有顯式地設置,則默認每個幀的時間=總duration/(values.count - 1)

rectRunAnimation.keyTimes = @[[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.6],

[NSNumber numberWithFloat:0.7], [NSNumber numberWithFloat:0.8],

[NSNumber numberWithFloat:1]];

// 1 kCAMediaTimingFunctionLinear//線性

// 2 kCAMediaTimingFunctionEaseIn//淡入

// 3 kCAMediaTimingFunctionEaseOut//淡出

// 4 kCAMediaTimingFunctionEaseInEaseOut//淡入淡出

// 5 kCAMediaTimingFunctionDefault//默認

rectRunAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],

[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],

[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],

[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]];

rectRunAnimation.repeatCount = 1000;

rectRunAnimation.autoreverses = NO;

// 1 const kCAAnimationLinear//線性,默認

// 2 const kCAAnimationDiscrete//離散,無中間過程,但keyTimes設置的時間依舊生效,物體跳躍地出現在各個關鍵幀上

// 3 const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效

// 4 const kCAAnimationCubic//平均,同上

// 5 const kCAAnimationCubicPaced//平均,同上

rectRunAnimation.calculationMode = kCAAnimationLinear;

rectRunAnimation.duration = 4;

rectRunAnimation.removedOnCompletion = NO;

rectRunAnimation.fillMode = kCAFillModeForwards;

[rectLayer addAnimation:rectRunAnimation forKey:@"rectRunAnimation"];

self.rectLayer = rectLayer;

}

// 抖動示例

// 創建幀動畫對象

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

// 設置動畫屬性

anim.keyPath = @"transform.rotation";

anim.values = @[@(kAngleToRadian(-5)), @(kAngleToRadian(5))];

// 設置動畫執行次數

anim.repeatCount = HUGE_VALF;

// 設置動畫的執行時長

anim.duration = 0.1;

// 設置動畫的自動反轉效果

anim.autoreverses = YES;

anim.removedOnCompletion = NO;

anim.fillMode = kCAFillModeForwards;

/ 將動畫效果添加到lionImage的layer上

本來都有動圖的,現在都動不了,大家可以想像下 一個圖在左右抖動 , 上面的那個圖是 一個小球按著矩形 線路走一會快一會慢 !

其實關鍵幀動畫相對來說可能會作出比較複雜的效果,使用方法很簡單,只是複雜的動畫可能會使用到演算法,可能稍微需要思考。 當然很多動畫都不是單一的出現的,下面我們就看下動畫組合。

其實動畫組合無非就是集中動畫作用在一個view上面達到的效果

CATransition 轉場

kCATransitionFade //交叉淡化過渡

kCATransitionMoveIn //移動覆蓋原圖

kCATransitionPush //新視圖將舊視圖推出去

kCATransitionReveal //底部顯出來

kCATransitionFromRight;

kCATransitionFromLeft(默認值)

kCATransitionFromTop;

kCATransitionFromBottom

註:kCATransitionFade 不支持Subtype

CATransition *anima = [CATransition animation];

anima.type = kCATransitionFade;//設置動畫的類型

anima.subtype = kCATransitionFromRight; //設置動畫的方向

//anima.startProgress = 0.3;//設置動畫起點

//anima.endProgress = 0.8;//設置動畫終點

anima.duration = 1.0f;

[_demoView.layer addAnimation:anima forKey:@"fadeAnimation"];

動畫組合

// 動畫組合

CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.y"];

positionAnima.duration = 0.8;

positionAnima.fromValue = @(view.center.y);

positionAnima.toValue = @(view.center.y + 100);

positionAnima.timingFunction = [CAMediaTimingFunction

functionWithName:kCAMediaTimingFunctionLinear];

positionAnima.repeatCount = HUGE_VALF;

// positionAnima.repeatDuration = 2;

positionAnima.removedOnCompletion = NO;

positionAnima.fillMode = kCAFillModeForwards;

positionAnima.delegate = self;

positionAnima.autoreverses = YES; // 執行逆動畫

[view.layer addAnimation:positionAnima forKey:@"AnimationMoveY"];

/* 放大縮小 */

// 設定為縮放

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

// 動畫選項設定

animation.duration = 2.5; // 動畫持續時間

animation.repeatCount = HUGE_VALF; // 重複次數

animation.autoreverses = YES; // 動畫結束時執行逆動畫

// 縮放倍數

animation.fromValue = [NSNumber numberWithFloat:1.0]; // 開始時的倍率

animation.toValue = [NSNumber numberWithFloat:2.0]; // 結束時的倍率

// 添加動畫

animation.removedOnCompletion = NO;

animation.fillMode = kCAFillModeForwards;

[view.layer addAnimation:animation forKey:@"scale-layer"];

效果就是在移動的過程中放大縮小(沒圖想像下吧)

好了,至此都總結完畢,這些都是基礎的東西,好好利用這些再複雜的動畫也能做出來! 當然,還有粒子效果這裡因為沒有動圖就不先不總結了,好的,謝謝大家的捧場!

作者:陳雨塵

鏈接:http://www.jianshu.com/p/3b85d0669e08

來源:簡書

程序員大咖整理髮布,轉載請聯繫作者獲得授權


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 程序員大咖 的精彩文章:

Service詳細解析
如何精確度量 iOS App 的啟動時間
和離職程序員做工作交接
重磅!HTC手機將成回憶了?
iOS特效之仿Mac窗口最小化的神奇效果

TAG:程序員大咖 |