IOS開發-屬性動畫和關鍵幀動畫的使用

 CAMediaTiming是一個協議(protocol)，CAAnimation是所有動畫類的父類，但是它不能直接使用，應該使用它的子類。

繼承關系：

       CoreAnmiation 核心動畫 簡寫CA                                                                                                         CoreAnimation 中文翻譯為核心動畫，它是一組非常強大的動畫處理API，使用它能做出非常炫麗的動畫效果，而且往往是事半功倍。也就是說，使用少量的代碼就可以實現非常強大的功能

我們之前使用過的UIView動畫，其實本質上也是CoreAnimation實現的，只是對他里面的動畫進行了封裝

 視圖(UIView)支持動畫的屬性有 frame  bounds center alpha transform 以及動畫延遲  動畫曲線( 淡入淡出 動畫過渡) 重復次數

方法： 

**********************************************************************

 + (void)setAnimationDelegate:(id)delegate;代理

 + (void)setAnimationWillStartSelector:(SEL)selector   當動畫即將開始時，執行delegate對象的selector，並且把beginAnimations:context:中傳入的參數傳進selector

 + (void)setAnimationDidStopSelector:(SEL)selector  當動畫結束時，執行delegate對象的selector，並且把beginAnimations:context:中傳入的參數傳進selector

 + (void)setAnimationDuration:(NSTimeInterval)duration   動畫的持續時間，秒為單位

 + (void)setAnimationDelay:(NSTimeInterval)delay  動畫延遲delay秒后再開始

 + (void)setAnimationStartDate:(NSDate *)startDate   動畫的開始時間，默認為now

 + (void)setAnimationCurve:(UIViewAnimationCurve)curve  動畫的節奏控制

 + (void)setAnimationRepeatCount:(float)repeatCount  動畫的重復次數

 + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses  如果設置為YES,代表動畫每次重復執行的效果會跟上一次相反

 + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache  設置視圖view的過渡效果, transition指定過渡類型, cache設置YES代表使用視圖緩存，性能較好 */

**********************************************************************

 但CAAnimation是所有動畫類的父類，但是它不能直接使用，應該使用它的子類。CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup（CAPropertyAnimation也不能直接使用，需要使用它的兩個子類）

說明以上所有的方法和它的屬性，子類都可以使用。

使用案例：

-(void)viewanimation1{  2 
   /**  4  * 動畫方向  5  *  6  UIViewAnimationTransitionNone,  7  UIViewAnimationTransitionFlipFromLeft,從左翻轉  8  UIViewAnimationTransitionFlipFromRight,從右面翻轉  9  UIViewAnimationTransitionCurlUp,向上翻頁 10  UIViewAnimationTransitionCurlDown,向下翻頁 11      */

 /** 14  * 過渡狀態 15  * 16  UIViewAnimationCurveEaseInOut,慢進慢出 // slow at beginning and end 17  UIViewAnimationCurveEaseIn,慢進 // slow at beginning 18  UIViewAnimationCurveEaseOut, 慢出 // slow at end 19  UIViewAnimationCurveLinear 勻速 20      */
//********************************************************************* 22 // 注意： 執行一個動畫 必須有一個開始動畫 和提交動畫 才能運行一個動畫 23     
// UIView的過渡動畫······· 25 // 開始動畫
    [UIView beginAnimations:@"jk" context:nil]; 27 
// 設置動畫的方向
 [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:imageView cache:YES]; 30 
// 設置動畫持續時間
    [UIView setAnimationDuration:5]; 33 
// 設置動畫效果過渡的狀態
 [UIView setAnimationCurve:UIViewAnimationCurveEaseIn]; 36     
// 提交動畫
 [UIView commitAnimations]; 39 
// 檢測 動畫結束
 [UIView setAnimationDelegate:self]; 42 
// 動畫快要結束時，調用另一個方法
 [UIView setAnimationDidStopSelector:@selector(finishanimation)]; 45 }

 

CAPropertyAnimation屬性動畫                                                                                                 、

       CALayer和UIView的關系

•  在UIView中有一個layer屬性作為圖層，根圖層沒有隱式動畫 根圖層上可以放其他子圖層，在UIView中所有能夠看到的內容都包含在layer中
• Core Animation是直接作用在CALayer上的，並非UIView。
•  CAlayer負責視圖中顯示的內容和動畫
•  UIView負責監聽和響應事件
•  由於CALayer在設計之初就考慮它的動畫操作功能，CALayer很多屬性在修改時都能形成動畫效果，這種屬性稱為“隱式動畫屬性”。

           CALayer在修改他的屬性時都能形成動畫效果  這種動畫效果  叫做隱式動畫。

/**

     *    屬性                 說明                是否支持隱式動畫   

     anchorPoint       錨點、定位點  錨點的描述是相對於 *自己* x、y位置比例而言的 默認在圖像中心點(0.5,0.5)的位置  決定圖層的哪一個點 顯示在中心點的位置         是  

     backgroundColor    圖層背景顏色              是

     borderColor     邊框顏色         是 

     borderWidth         邊框寬度     是        

     bounds         圖層大小           是

     contents         圖層顯示內容，例如可以將圖片作為圖層內容顯示   是

     contentsRect       圖層顯示內容的大小和位置           是

     cornerRadius        圓角半徑                  是

     doubleSided        圖層背面是否顯示，默認為YES              否

     frame           圖層大小和位置，不支持隱式動畫，所以CALayer中很少使用frame，通常使用bounds和position代替                     否

     hidden     是否隱藏                     是

     mask     圖層蒙版                   是

     maskToBounds          子圖層是否剪切圖層邊界，默認為NO             是

     opacity            透明度 ，類似於UIView的alpha             是

     position         決定圖層在父視圖的位置 圖層位於 *父視圖* 中心點位置，類似於UIView的center   是

     shadowColor         陰影顏色                   是

     shadowOffset       陰影偏移量               是

     shadowOpacity     陰影透明度，注意默認為0，如果設置陰影必須設置此屬性 是

     shadowPath          陰影的形狀                           是

     shadowRadius       陰影模糊半徑               是

     sublayers             子圖層  是                                 

     sublayerTransform         子圖層形變         是

     transform  圖層形變                  是

     *  @  以上支持隱式動畫的屬性 本質是這些屬性的變動默認隱含了CABasicAnimation動畫實現

1.CABasicAnimation的使用：                                                                                    

#pragma mark-------------------改變position--------------------
-(void)animation1{  3     
// ***************初始化*****************  5 // 注意：CABasicAnimation 使用屬性動畫 需告訴它 我們要改變的屬性 是哪個（把屬性當做字符串傳遞）這里很重要，字符串不 能有錯
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];  7     
// ***************初始化*****************  9 // NSValue 有可以把結構體轉為id類型 10 // 設置動畫要到那一個位置
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(400, showlayer.position.y)]; 12     animation.duration = 3; 13 
// 以動畫效果出發 以動畫效果出發回到初始位置
    animation.autoreverses = YES; 16 //
// 如果要使用 fillMode 必須要把removedOnCompletion禁用
    animation.removedOnCompletion = NO; 19     
// 以動畫效果出發 不會以動畫效果出發回到初始位置
    animation.fillMode = kCAFillModeRemoved; 22 //**************************** 23 // kCAFillModeForwards 不會回來了 24 // kCAFillModeBackwards 會返回來 25 // kCAFillModeBoth 不會回來了 26 // kCAFillModeRemoved 會返回來 27 //**************************** 28     
// 設置 慢進慢出
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; 31 // 添加一個動畫到圖層
    [showlayer addAnimation:animation forKey:@"move ke bu xie"]; 33     
} 35 
#pragma mark-------------------改變transform的z的旋轉--------------------
-(void)animation3{ 38     
// 基礎動畫師繼承於屬性動畫的 通過屬性名當作一個key來確定圍繞那個屬性 進行動畫
    CABasicAnimation *antimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; 41     antimation.fromValue = @(-0.1);//從這位置出發
    antimation.toValue = @(0.1);//到這位置結束
    antimation.duration = 0.05;//持續時間
    antimation.repeatCount = 2;//重復次數 45 // 是否以動畫的效果方式返回
    antimation.autoreverses = YES; 47 // 給圖層添加動畫
    [showlayer addAnimation:antimation forKey:@"shake"]; 49   }

 

2.CAKeyframeAnimation（關鍵幀動畫）的使用：                                                         

•   關鍵幀動畫 可以讓我們精准的控制動畫效果 它的原理是把動畫序列里面比較關鍵的幀提取出來，設置它的動畫效果
•  關鍵幀：  1. path屬性 執行動畫軌跡的路徑  2.value屬性 執行動畫軌跡的路徑

#import "ViewController.h"

@interface ViewController ()  4 {  5     CALayer *petalayer;  6 }  7 @end

@implementation ViewController 10 
- (void)viewDidLoad { 12  [super viewDidLoad]; 13 // 背景圖
    UIImageView *iamgeView = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds]; 15     iamgeView.image = [UIImage imageNamed:@"11"]; 16  [self.view addSubview:iamgeView]; 17  [self addflower]; 18 } 19 
-(void)addflower 21 { 22     UIImage *petal = [UIImage imageNamed:@"22"]; 23     petalayer = [[CALayer alloc]init]; 24     petalayer.bounds = CGRectMake(0, 0,petal.size.width , petal.size.height); 25     petalayer.position = CGPointMake(100, 250); 26     petalayer.contents = (id)petal.CGImage; 27  [self.view.layer addSublayer:petalayer]; 28     
} 30 
-(void)dropAanimation{ 32 //初始化
    CAKeyframeAnimation *drop = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 34     drop.duration = 5; 35     
// 1.****************************************************************** 37 // 放入改變position的幾個點
    drop.values = @[[NSValue valueWithCGPoint:CGPointMake(50, 100)],[self getPointWithX:20 andY:200],[self getPointWithX:-20 andY:200],[self getPointWithX:100 andY:300]]; 39 //********************************************************************* 40     
//2.*****************也可以采用路徑的方式也可以達到效果********************** 42 // 創建路徑
    CGMutablePathRef path = CGPathCreateMutable(); 44 // 給路徑添加一個起始點
 CGPathMoveToPoint(path, NULL, petalayer.position.x, petalayer.position.y); 46 // 有起始點 可以通過起始點 到另外一個點 畫一條線
    CGPathAddLineToPoint(path, NULL, petalayer.position.x + 100, petalayer.position.y + 100); 48      CGPathAddLineToPoint(path, NULL, petalayer.position.x - 100, petalayer.position.y - 30); 49     // 關閉路徑
 CGPathCloseSubpath(path); 51      drop.path = path; 52 
    // 釋放路徑
    path = nil; 55 // ********************************************************************
    
    drop.removedOnCompletion = NO; 58     drop.fillMode = kCAFillModeBoth;//不返回
    [petalayer addAnimation:drop forKey:@"djg"]; 60     
} 62 
- (NSValue *)getPointWithX:(CGFloat)x andY:(CGFloat)y{ 64     
    return [NSValue valueWithCGPoint:CGPointMake(x+petalayer.position.x , y+petalayer.position.y)]; 66 } 67 

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 70  [self dropAanimation]; 71 } 72 
@end