iOS關於CoreAnimation動畫知識總結

一：UIKit動畫

在介紹CoreAnimation動畫前先簡單介紹一下UIKit動畫，大部分簡單的動畫均可以使用UIKit動畫實現，若是想實現更復雜的效果，則須要使用Core Animation了；UIKit動畫有兩種寫法；它不只能夠針對視圖還能夠針對其它控件；

1：第一種寫法是利用屬性，結合beginAnimations、commitAnimations

-(void)animationOfUIKit  
{  
    UIView *redView=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];  
    redView.backgroundColor=[UIColor redColor];  
      
    [self.view addSubview:redView];  
    //開始動畫  
    [UIView beginAnimations:@"test" context:nil];  
    //動畫時長  
    [UIView setAnimationDuration:1];  
    /*  
     *要進行動畫設置的地方  
     */  
      
    redView.backgroundColor=[UIColor blueColor];  
    redView.frame=CGRectMake(50, 50, 200, 200);  
    redView.alpha=0.5;  
      
    //動畫結束  
    [UIView commitAnimations];  
} 

2：第二種寫法也是比較常見的，已經對它進行的封裝

-(void)animationOfBlock
{
    //初始化一個View，用來顯示動畫
    UIView *redView=[[UIView alloc]initWithFrame:CGRectMake(10, 80, 100, 100)];
    redView.backgroundColor=[UIColor redColor];
    
    [self.view addSubview:redView];
    
    [UIView animateWithDuration:1 //時長
                          delay:0 //延遲時間
                        options:UIViewAnimationOptionTransitionFlipFromLeft//動畫效果
                     animations:^{
                         //動畫設置區域
                         redView.backgroundColor=[UIColor blueColor];
                         redView.frame=CGRectMake(50, 100, 200, 200);
                         redView.alpha=0.5;
                         
                     } completion:^(BOOL finish){
                         //動畫結束時調用
                         NSLog(@"我結束了");
                     }];
}

注意：關於動畫效果的枚舉以下：

 

a.常規動畫屬性設置（能夠同時選擇多個進行設置）

UIViewAnimationOptionLayoutSubviews：動畫過程當中保證子視圖跟隨運動。

UIViewAnimationOptionAllowUserInteraction：動畫過程當中容許用戶交互。

UIViewAnimationOptionBeginFromCurrentState：全部視圖從當前狀態開始運行。

UIViewAnimationOptionRepeat：重複運行動畫。

UIViewAnimationOptionAutoreverse ：動畫運行到結束點後仍然以動畫方式回到初始點。

UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套動畫時間設置。

UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套動畫速度設置。

UIViewAnimationOptionAllowAnimatedContent：動畫過程當中重繪視圖（注意僅僅適用於轉場動畫）。  

UIViewAnimationOptionShowHideTransitionViews：視圖切換時直接隱藏舊視圖、顯示新視圖，而不是將舊視圖從父視圖移除（僅僅適用於轉場動畫）

UIViewAnimationOptionOverrideInheritedOptions ：不繼承父動畫設置或動畫類型。

 

b.動畫速度控制（可從其中選擇一個設置）

UIViewAnimationOptionCurveEaseInOut：動畫先緩慢，而後逐漸加速。

UIViewAnimationOptionCurveEaseIn ：動畫逐漸變慢。

UIViewAnimationOptionCurveEaseOut：動畫逐漸加速。

UIViewAnimationOptionCurveLinear ：動畫勻速執行，默認值。

 

c.轉場類型（僅適用於轉場動畫設置，能夠從中選擇一個進行設置，基本動畫、關鍵幀動畫不須要設置）

UIViewAnimationOptionTransitionNone：沒有轉場動畫效果。

UIViewAnimationOptionTransitionFlipFromLeft ：從左側翻轉效果。

UIViewAnimationOptionTransitionFlipFromRight：從右側翻轉效果。

UIViewAnimationOptionTransitionCurlUp：向後翻頁的動畫過渡效果。    

UIViewAnimationOptionTransitionCurlDown ：向前翻頁的動畫過渡效果。    

UIViewAnimationOptionTransitionCrossDissolve：舊視圖溶解消失顯示下一個新視圖的效果。    

UIViewAnimationOptionTransitionFlipFromTop ：從上方翻轉效果。    

UIViewAnimationOptionTransitionFlipFromBottom：從底部翻轉效果。

二：CoreAnimation理論知識

1:Core Animation是直接做用在CALayer上的(並不是UIView上)很是強大的跨Mac OS X和iOS平臺的動畫處理API，Core Animation的動畫執行過程都是在後臺操做的，不會阻塞主線程。CABasicAnimation(基本動畫)、CAKeyframeAnimation(關鍵幀動畫)、CAAnimationGroup(動畫組)、CATransition(轉場動畫)

 

使用步驟以下(#import <QuartzCore/QuartzCore.h> )：

a:首先得有CALayer（由於CoreAnimation是做用在CALayer上的）

b:初始化一個CAAnimation對象，並設置一些動畫相關屬性

c:經過調用CALayer的addAnimation:forKey:方法，增長CAAnimation對象到CALayer中，這樣就能開始執行動畫了

d:經過調用CALayer的removeAnimationForKey:方法能夠中止CALayer中的動畫

 

2:CAAnimation中的一些屬性：

duration：動畫的持續時間

repeatCount：重複次數，無限循環能夠設置HUGE_VALF或者MAXFLOAT

repeatDuration：重複時間

removedOnCompletion：默認爲YES，表明動畫執行完畢後就從圖層上移除，圖形會恢復到動畫執行前的狀態。若是想讓圖層保持顯示動畫執行後的狀態，那就設置爲NO，不過*還要設置fillMode爲kCAFillModeForwards*

beginTime：能夠用來設置動畫延遲執行時間，若想延遲2s，就設置爲CACurrentMediaTime()+2，CACurrentMediaTime()爲圖層的當前時間

timingFunction：速度控制函數，控制動畫運行的節奏

 

delegate：動畫代理

fillMode決定當前對象在非active時間段的行爲。（要想fillMode有效，最好設置removedOnCompletion = NO）

kCAFillModeRemoved 這個是默認值，也就是說當動畫開始前和動畫結束後，動畫對layer都沒有影響，動畫結束後，layer會恢復到以前的狀態

 

kCAFillModeForwards 當動畫結束後，layer會一直保持着動畫最後的狀態

kCAFillModeBackwards 在動畫開始前，只須要將動畫加入了一個layer，layer便當即進入動畫的初始狀態並等待動畫開始。

 

kCAFillModeBoth 這個其實就是上面兩個的合成.動畫加入後開始以前，layer便處於動畫初始狀態，動畫結束後layer保持動畫最後的狀態

 

CAMediaTimingFunction:速度控制函數

kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態的感受

kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，而後加速離開

kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，而後減速的到達目的地

kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，而後減速的到達目的地。這個是默認的動畫行爲。

 

3:CAAnimation代理方法CAAnimationDelegate

CAAnimation在分類中定義了代理方法。是給NSObject添加的分類，因此任何對象，成爲CAAnimation的代理，均可以。

動畫開始的時候調用

- (void)animationDidStart:(CAAnimation *)anim;

動畫中止的時候調用

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

 

三:CoreAnimation動畫實例

1:CABasicAnimation(基本動畫)

屬性說明:

keyPath ：要改變的屬性名稱（傳字符串）

fromValue：keyPath相應屬性的初始值

toValue：keyPath相應屬性的結束值

 

動畫過程說明：

隨着動畫的進行，在長度爲duration的持續時間內，keyPath相應屬性的值從fromValue漸漸地變爲toValue

keyPath內容是CALayer的動畫Animatable屬性

animationWithKeyPath的值：

- #define angle2Radian(angle) ((angle)/180.0*M_PI)

transform.rotation.x 圍繞x軸翻轉 參數：角度 angle2Radian(4)

transform.rotation.y 圍繞y軸翻轉 參數：同上

transform.rotation.z 圍繞z軸翻轉 參數：同上

transform.rotation 默認圍繞z軸

transform.scale.x x方向縮放 參數：縮放比例 1.5

transform.scale.y y方向縮放 參數：同上

transform.scale.z z方向縮放 參數：同上

transform.scale 全部方向縮放 參數：同上

transform.translation.x x方向移動 參數：x軸上的座標 100

transform.translation.y x方向移動 參數：y軸上的座標

transform.translation.z x方向移動 參數：z軸上的座標

transform.translation 移動 參數：移動到的點 （100，100）

opacity 透明度 參數：透明度 0.5

backgroundColor 背景顏色 參數：顏色 (id)[[UIColor redColor] CGColor]

cornerRadius 圓角 參數：圓角半徑 5

borderWidth 邊框寬度 參數：邊框寬度 5

bounds 大小 參數：CGRect

contents 內容 參數：CGImage

contentsRect 可視內容 參數：CGRect 值是0～1之間的小數

hidden 是否隱藏

position

shadowColor

shadowOffset

shadowOpacity

shadowRadius

 

實例1：下面分別爲四個動畫，縮放變化、大小變化還有背景色的變化及y軸移動；其它能夠參照上面的屬性值進行；其中toValue跟fromValue要根據相應的屬性進行變化

//縮放變化
-(void)animationMyView
{
    if (self.ui_View==nil) {
        self.ui_View=[[UIView alloc]initWithFrame:CGRectMake(250, 200, 50, 50)];
        self.ui_View.backgroundColor=[UIColor blackColor];
        [self.view addSubview:self.ui_View];
    }
    
    CABasicAnimation *pulse = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    pulse.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    pulse.duration = 0.5 + (rand() % 10) * 0.05;
    pulse.repeatCount = 1;
    pulse.autoreverses = YES;
    pulse.fromValue = [NSNumber numberWithFloat:.8];
    pulse.toValue = [NSNumber numberWithFloat:1.2];
    [self.ui_View.layer addAnimation:pulse forKey:nil];
}

//大小變化
-(void)animatioBoundView
{
    
    if (self.bound_View==nil) {
        self.bound_View=[[UIView alloc]initWithFrame:CGRectMake(330,200,50,50)];
        self.bound_View.backgroundColor=[UIColor blackColor];
        [self.view addSubview:self.bound_View];
    }
    
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];
    anim.duration = 1.f;
    anim.fromValue=[NSValue valueWithCGRect:CGRectMake(300,200,50,50)];
    anim.toValue = [NSValue valueWithCGRect:CGRectMake(10,10,200,200)];
    anim.byValue  = [NSValue valueWithCGRect:self. bound_View.bounds];
    
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.repeatCount = 1;
    anim.autoreverses = YES;
    
    [self.bound_View.layer addAnimation:anim forKey:nil];
}

//背景色變化
-(void)animationBgColorView
{
    if (self.bgColor_View==nil) {
        self.bgColor_View=[[UIView alloc]initWithFrame:CGRectMake(10,300,50,50)];
        self.bgColor_View.backgroundColor=[UIColor grayColor];
        [self.view addSubview:self.bgColor_View];
    }
    
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    anim.duration = 3.f;
    anim.toValue = (id)[UIColor redColor].CGColor;
    anim.fromValue =  (id)[UIColor greenColor].CGColor;
    
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.repeatCount = CGFLOAT_MAX;
    
    [self.bgColor_View.layer addAnimation:anim forKey:nil];
}

//y軸移動
-(void)animationYView
{
    if (self.y_View==nil) {
        self.y_View=[[UIView alloc]initWithFrame:CGRectMake(100,300,50,50)];
        self.y_View.backgroundColor=[UIColor greenColor];
        [self.view addSubview:self.y_View];
    }
    
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
    animation.toValue=@50;
    animation.duration=5;
    animation.removedOnCompletion=NO;
    animation.fillMode=kCAFillModeForwards;
    [self.y_View.layer addAnimation:animation forKey:nil];
}

2：CAKeyframeAnimation(關鍵幀動畫)

 CABasicAnimation只能從一個數值（fromValue）變到另外一個數值（toValue），而CAKeyframeAnimation會使用一個NSArray保存這些數值

 

屬性說明：

values：上述的NSArray對象。裏面的元素稱爲「關鍵幀」(keyframe)。動畫對象會在指定的時間（duration）內，依次顯示values數組中的每個關鍵幀

path：能夠設置一個CGPathRef、CGMutablePathRef，讓圖層按照路徑軌跡移動。path只對CALayer的anchorPoint和position起做用。若是設置了path，那麼values將被忽略

keyTimes：能夠爲對應的關鍵幀指定對應的時間點，其取值範圍爲0到1.0，keyTimes中的每個時間值都對應values中的每一幀。若是沒有設置keyTimes，各個關鍵幀的時間是平分的，CABasicAnimation可看作是隻有2個關鍵幀的CAKeyframeAnimation

實例1：分別使用屬性values及path兩種的效果；圍繞的點視圖塊進行轉動效果；

//values方式
-(void)animationValues
{
    if (self.my_View==nil) {
        self.my_View=[[UIView alloc]initWithFrame:CGRectMake(120,350,50,50)];
        self.my_View.backgroundColor=[UIColor redColor];
        [self.view addSubview:self.my_View];
    }
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position";
    
    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    animation.values=@[value1,value2,value3,value4,value5];
    animation.repeatCount=MAXFLOAT;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 4.0f;
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.delegate=self;
    [self.my_View.layer addAnimation:animation forKey:nil];
}


//path方式
-(void)animationPath
{
    if (self.my_pathView==nil) {
        self.my_pathView=[[UIView alloc]initWithFrame:CGRectMake(120,350,50,50)];
        self.my_pathView.backgroundColor=[UIColor blueColor];
        [self.view addSubview:self.my_pathView];
    }
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position";
    CGMutablePathRef path=CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    animation.path=path;
    CGPathRelease(path);
    animation.repeatCount=MAXFLOAT;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 4.0f;
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.delegate=self;
    [self.my_pathView.layer addAnimation:animation forKey:nil];
}

3：CAAnimationGroup(動畫組)

動畫組，是CAAnimation的子類，能夠保存一組動畫對象，將CAAnimationGroup對象加入層後，組中全部動畫對象能夠同時併發運行

屬性說明：

animations：用來保存一組動畫對象的NSArray

默認狀況下，一組動畫對象是同時運行的，也能夠經過設置動畫對象的beginTime屬性來更改動畫的開始時間

實例1：建立一組動畫效果，多個動畫一塊兒

-(void)animationGroup
{
    if (self.my_GroupView==nil) {
        self.my_GroupView=[[UIView alloc]initWithFrame:CGRectMake(120,350,50,50)];
        self.my_GroupView.backgroundColor=[UIColor yellowColor];
        [self.view addSubview:self.my_GroupView];
    }
    
    //貝塞爾曲線路徑
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:CGPointMake(10.0, 10.0)];
    [movePath addQuadCurveToPoint:CGPointMake(100, 300) controlPoint:CGPointMake(300, 100)];
    
    //關鍵幀動畫（位置）
    CAKeyframeAnimation * posAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    posAnim.path = movePath.CGPath;
    posAnim.removedOnCompletion = YES;
    
    //縮放動畫
    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
    scaleAnim.removedOnCompletion = YES;
    
    //透明動畫
    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
    opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
    opacityAnim.removedOnCompletion = YES;
    
    //動畫組
    CAAnimationGroup *animGroup = [CAAnimationGroup animation];
    animGroup.animations = [NSArray arrayWithObjects:posAnim, scaleAnim, opacityAnim, nil];
    animGroup.duration = 5;
    
    [self.my_GroupView.layer addAnimation:animGroup forKey:nil];
}

4：CATransition(轉場動畫)

 

動畫屬性:

type：動畫過渡類型

subtype：動畫過渡方向

startProgress：動畫起點(在總體動畫的百分比)

endProgress：動畫終點(在總體動畫的百分比)

 

subtype：動畫過渡方向(默認爲nil,若是指定了filter，那麼該屬性無效,kCATransitionFromRight,kCATransitionFromLeft,kCATransitionFromTop,kCATransitionFromBottom;分別表示：過渡從右邊、左邊、頂部、底部 開始)

 

轉場動畫的類型（NSString *type),還有不少私有API類型

fade : 交叉淡化過渡

push : 新視圖把舊視圖推出去

moveIn: 新視圖移到舊視圖上面

reveal: 將舊視圖移開,顯示下面的新視圖

cube : 立方體翻滾效果

oglFlip : 上下左右翻轉效果

suckEffect : 收縮效果，如一塊布被抽走

rippleEffect: 水滴效果

pageCurl : 向上翻頁效果

pageUnCurl : 向下翻頁效果

cameraIrisHollowOpen : 相機鏡頭打開效果

cameraIrisHollowClos : 相機鏡頭關閉效果

 

實例1：兩個動畫效果，一個向上運動，一個向下運動的效果

//從下往上運動
-(void)animationTransition
{
    //y點就是當要運動後到的Y值
    if (self.my_transition==nil) {
        self.my_transition=[[UIView alloc]initWithFrame:CGRectMake(0,[UIScreen mainScreen].bounds.size.height-250,[UIScreen mainScreen].bounds.size.width,250)];
        self.my_transition.backgroundColor=[UIColor redColor];
        [self.view addSubview:self.my_transition];
    }
    
    CATransition *animation = [CATransition animation];
    animation.duration = 1;
    animation.timingFunction = UIViewAnimationCurveEaseInOut;
    animation.fillMode = kCAFillModeForwards;
    animation.type = kCATransitionMoveIn;
    animation.subtype = kCATransitionFromTop;
    //添加動畫
    [self.my_transition.layer addAnimation:animation forKey:nil];
}


//從上往下運動
-(void)animationPushTransition
{
    //y點就是當要運動後到的Y值
    if (self.my_pushTranstion==nil) {
        self.my_pushTranstion=[[UIView alloc]initWithFrame:CGRectMake(0,[UIScreen mainScreen].bounds.size.height,[UIScreen mainScreen].bounds.size.width,250)];
        self.my_pushTranstion.backgroundColor=[UIColor blueColor];
        [self.view addSubview:self.my_pushTranstion];
    }
    
    CATransition *animation = [CATransition animation];
    animation.duration = 0.4f;
    animation.timingFunction = UIViewAnimationCurveEaseInOut;
    animation.fillMode = kCAFillModeForwards;
    animation.type = kCATransitionPush;
    animation.subtype = kCATransitionFromBottom;
    
    //添加動畫
    [self.my_pushTranstion.layer addAnimation:animation forKey:nil];
}

 

源代碼已經上傳到gitHub地址:https://github.com/wujunyang/facebookPopTest

 

 

最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，天天都會更新一些深度內容，在這裏若是你感興趣也能夠關注一下(嘿對美女跟知識感興趣)，固然能夠關注後輸入：github 會有個人微信號，若是有問題你也能夠在那找到我；固然不感興趣無視此信息；