iOS 動畫基礎總結篇

?

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

分類.png

UIView 動畫

屬性動畫

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

????[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的屬性動畫

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

?????[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]; ????if?(view.center.x?>?[UIScreen?mainScreen].bounds.size.width)?{ ????????view.center?=?CGPointMake(0,?view.center.y); ????}else{ ????????view.center?=?CGPointMake(view.center.x?+?10,?view.center.y); ????} ????? ????? ????? }?completion:^(BOOL?finished)?{ ????? }];

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

屬性動畫效果如下，有助于理解不同參數的效果

UIview 屬性動畫.gif

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

圖好了

轉場.gif

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

??[UIView?transitionWithView:self.view3?duration:1?options:UIViewAnimationOptionTransitionFlipFromTop?animations:^{ ????????self.view1.hidden?=?NO; ????????self.view2.hidden?=?YES; ????}?completion:^(BOOL?finished)?{ ????????? ????}]; ??參數?? ?//轉場動畫相關的 ??UIViewAnimationOptionTransitionNone????????????//無轉場動畫 ??UIViewAnimationOptionTransitionFlipFromLeft????//轉場從左翻轉 ??UIViewAnimationOptionTransitionFlipFromRight???//轉場從右翻轉 ??UIViewAnimationOptionTransitionCurlUp??????????//上卷轉場 ??UIViewAnimationOptionTransitionCurlDown????????//下卷轉場 ??UIViewAnimationOptionTransitionCrossDissolve???//轉場交叉消失 ??UIViewAnimationOptionTransitionFlipFromTop?????//轉場從上翻轉 ??UIViewAnimationOptionTransitionFlipFromBottom??//轉場從下翻轉

layer 層動畫

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

1 2 3 4 5

view.layer.borderWidth?=?6; view.layer.borderColor?=?[UIColor?redColor].CGColor; view.layer.cornerRadius?=?10; CGPoint?archP?=?view.layer.anchorPoint; CGPoint?postion?=?view.layer.position;

layer 動畫 CABasicAnimation

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

???//?一些常用的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) ?contentsRect.size.width????橫向拉伸縮放??@(0.4)最好是0~1之間的 ?*/ ???/*??屬性???說明 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 關鍵幀動畫

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

//?關鍵幀動畫 //?指定動畫需要修改的屬性 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]; [self.view.layer?addSublayer:rectLayer]; CAKeyframeAnimation?*rectRunAnimation?=?[CAKeyframeAnimation?animationWithKeyPath:@"position"]; //設定關鍵幀位置，必須含起始與終止位置 rectRunAnimation.values?=?@[[NSValue?valueWithCGPoint:rectLayer.frame.origin], ????????????????????????????[NSValue?valueWithCGPoint:CGPointMake([UIScreen?mainScreen].bounds.size.width?-?15, ??????????????????????????????????????????????????????????????????rectLayer.frame.origin.y)], ????????????????????????????[NSValue?valueWithCGPoint:CGPointMake([UIScreen?mainScreen].bounds.size.width?-?15, ??????????????????????????????????????????????????????????????????rectLayer.frame.origin.y?+?100)], ????????????????????????????[NSValue?valueWithCGPoint:CGPointMake(15,?rectLayer.frame.origin.y?+?100)], ????????????????????????????[NSValue?valueWithCGPoint:rectLayer.frame.origin]]; ?//????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上 [self.imagev.layer?addAnimation:anim?forKey:nil];

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

圖來了

CAKeyframeAnimation.gif

其實關鍵幀動畫相對來說可能會作出比較復雜的效果，使用方法很簡單，只是復雜的動畫會使用到算法，可能稍微需要思考。

CATransition 轉場

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

?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"];

當然很多動畫都不是單一的出現的，下面我們就看下動畫組合。

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

例如

組合動畫.gif

動畫組合

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

??//?動畫組合 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"]; 效果就是在移動的過程中放大縮小

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

轉載于:https://www.cnblogs.com/shenlaiyaoshi/p/8496140.html

總結

以上是生活随笔為你收集整理的iOS 动画基础总结篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。