iOS 核心動畫 -基礎動畫

  核心動畫:

       iOS中核心動畫分爲幾類:基礎動畫(CABasicAnimation)、關鍵幀動畫(CAKeyframeAnimation)、動畫組(CAAnimationGroup)、轉場動畫(CATransition)


相關知識點以及概念:

CAAnimation: 核心動畫的基礎類,不能直接使用,負責動畫運行時間、速度的控制,本身實現了CAMediaTiming協議。

 

 

 CAPropertyAnimation:屬性動畫也是基類(通過屬性進行動畫設置,注意是動畫屬性),不能直接使用。

 CABasicAnimation:基礎動畫,通過屬性修改進行動畫參數控制,只有初始狀態和結束狀態。

 CAKeyframeAnimation:關鍵幀動畫,同樣是通過屬性進行動畫參數控制,但是同基礎動畫不同的是它可以有多個狀態控制。

 CAAnimationGroup:動畫組,動畫組是一種組合模式設計,可以通過動畫組來進行所有動畫行爲的統一控制,組中所有動畫效果可以併發執行。

 CATransition:轉場動畫,主要通過濾鏡進行動畫效果設置。

 

 

 

 基礎動畫、關鍵幀動畫都屬於屬性動畫,就是通過修改屬性值產生動畫效果,開發人員只需要設置初始值和結束值,中間的過程動畫(又叫補間動畫)由系統自動計算產生。和基礎動畫不同的是關鍵幀動畫可以設置多個屬性值,每兩個屬性中間的補間動畫由系統自動完成,因此從這個角度而言基礎動畫又可以看成是有兩個關鍵幀的關鍵幀動畫


 

 創建基礎動畫  需要通過fromValue   toValue  屬性來指定一個開始值和結束值   當添加基礎動畫到圖層中的時候  它纔會開始變化


 autoreverses: 當設定這個屬性爲 YES 時,在它到達目的地之後,會以動畫的方式返回到開始的值

 

 duration   設定開始值到結束值花費的時間  期間會被速度得屬性影響

 

 speed 默認的值爲 1.0.這意味着動畫播放按照默認的速度。如果你改變這個值爲 2.0,動畫會用 2 倍的速度播放。 這樣的影響就是使持續時間減半。如果你指定的持續時間爲 6 ,速度爲 2.0,動畫就會播放 3 秒鐘---一半的 持續時間

 把速度設置成0 就可以暫停動畫

 

 

 repeatCount 默認的是 0,意味着動畫只會播放一次  這個不應該和 repeatDration 屬性一塊使用。(負數不是無限循環)

 

 repeatDuration 這個屬性指定了動畫應該被重複多久。動畫會一直重複,直到設定的時間流逝完。它不應該和 repeatCount 一起使用

 

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

 timingFunction 屬性值:

 kCAMediaTimingFunctionLinear(線性):勻速,給你一個相對靜態的感覺

 kCAMediaTimingFunctionEaseIn(漸進):動畫緩慢進入,然後加速離開

 kCAMediaTimingFunctionEaseOut(漸出):動畫全速進入,然後減速的到達目的地

 kCAMediaTimingFunctionEaseInEaseOut(漸進漸出):動畫緩慢的進入,中間加速,然後減速的到達目的地。這個是默認的動畫行爲。

 

 

 removedOnCompletion 默認爲YES,代表動畫執行完畢後就從圖層上移除,圖形會恢復到動畫執行前的狀態。如果想讓圖層保持顯示動畫執行後的狀態,那就設置爲NO⭐️⭐️⭐️⭐️⭐️不過還要設置fillModekCAFillModeForwards

 

 fillMode  設置當前對象在非活動時間段的行爲 比如動畫開始之前或者動畫結束之後

 fillMode屬性值(上面提到過 要想fillMode有效,需要設置removedOnCompletion = NO

 

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

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

 kCAFillModeBackwards 在動畫開始前,只需要將動畫加入了一個layerlayer便立即進入動畫的初始狀態並等待動畫開始。

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

 

 CAPropertyAnimation

 可以通過改變animationWithKeyPath來改變動畫的屬性:

 transform.scale = 比例轉換

 

 transform.scale.x

 

 transform.scale.y

 

 transform.rotation.z

 

 opacity = 透明度

 

 zPosition

 

 backgroundColor 背景顏色

 

 cornerRadius 圓角

 

 borderWidth

 

 bounds

 

 contents

 

 contentsRect

 

 cornerRadius

 

 frame

 

 hidden

 

 mask

 

 masksToBounds

 

 opacity

 

 position

 

 shadowColor

 

 shadowOffset

 

 shadowOpacity

 

 shadowRadius



相關舉例代碼:

     改變position位置

-(void)animiation1

{


CABasicAnimation    屬於屬性動畫   需要告訴它  咱們要改變的屬性是哪個 (把 屬性 當做 字符串傳遞)


    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];

    

   toValue 設置動畫 要到哪個位置

    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(400, showLayer.position.y)];

    animation.duration = 3;

    

 animation.autoreverses = YES;  //以動畫的形式回到當前位置

    

    

 animation.fillMode = kCAFillModeBoth;//⭐️⭐️⭐️⭐️⭐️如果使用這個 必須要把removedOnCompletion設置爲NO

  animation.removedOnCompletion = NO;

  

    

    

    

    

//    設置動畫慢進慢出

    /*

     CA_EXTERN NSString * const kCAMediaTimingFunctionLinear

     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

     CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn

     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

     CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut

     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

     CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut

     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

     CA_EXTERN NSString * const kCAMediaTimingFunctionDefault

     __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_3_0);

     */

    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    

    

  添加動畫到圖層layer上

    [showLayer addAnimation:animation forKey:@"標誌"];

 

}




改變bounds

-(void)animiation2

{

 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];


    

⭐️⭐️⭐️⭐️⭐️ valueWithCGRect  改變什麼屬性 就要有相對應的設置

    UIImage *image = [UIImage imageNamed:@"2345"];

    

    animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, image.size.width/3, image.size.height/3)];

    animation.duration = 0.5;

    animation.autoreverses = YES;

    animation.repeatCount = HUGE;  //HUGE 無窮大

//    ⭐️⭐️⭐️⭐️⭐️ repeatCount = -1   在這兒不是無限循環

    

    

    [showLayer addAnimation:animation forKey:@"標誌"];

    

    

}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

    

    [self animation3];

}



抖動

-(void)animation3

{


    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@“transform.rotation.z"];


    showLayer.anchorPoint = CGPointMake(1, 1);

    animation.fromValue = @(-0.1);

    animation.toValue = @(0.1);

    animation.duration = 0.05;

    animation.repeatCount = 2;

    

//    是否允許它以動畫的效果回去

    animation.autoreverses = YES;

    

    [showLayer addAnimation:animation forKey:@"抖動"];


}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章