概述

• 簡介

  • CAKeyframeAnimation又稱關鍵幀動畫
    
  • CAKeyframeAnimation是抽象類CAPRopertyAnimation的子類，可以直接使用
    
  • 通過values與path兩個屬性指定動畫屬性
    

• 注意事項

  • 若指定了path屬性，則values屬性將被忽略
    
  • CABasicAnimation相當于只有兩個關鍵幀的CAKeyframeAnimation

關鍵幀動畫的常用屬性

• values（NSArray *）

  • 存放關鍵幀的多個值
    
  • 類似于CABasicAnimation的fromValue與toValue值
    

• path（CGPathRef）

  • 動畫的執行路徑
    
  • 可以通過繪圖的方式繪制路徑
    

• keyTimes（NSArray *）

  • 每個關鍵幀的執行時間
    
  • 類型為NSNumber類型
    
  • 若不指定，則所有的關鍵幀平分動畫的duration時長
    

• timingFunctions（NSArray *）

  • 速度控制函數數組
    

• calculationMode（NSString *）

  • 指定關鍵幀的動畫屬性
    
  • 若指定該值，則keyTimes與timingFunctions屬性值將被忽略
    
  • 默認為：kCAAnimationLinear
    

• rotationMode（NSString *）

  • 指定旋轉模式，默認為nil

示例

• 效果圖

  

• 實現思路

  • 通過監聽執行動畫的UI控件的觸摸事件來繪制貝瑟爾曲線
    
  • 創建關鍵幀動畫，指定執行動畫的keyPath屬性
    
  • 將繪制的貝瑟爾曲線作為動畫的執行路徑
    
  • 將動畫添加到指定的圖層上
    

• 實現步驟（自定義UIView的子類）

  • 使用成員屬性保存貝瑟爾路徑

  @property (nonatomic, strong) UIBezierPath *path;

  • 監聽觸摸事件的狀態，繪制貝瑟爾曲線

    • 開始

    //確定起點- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{	//獲取當前觸摸點	UITouch *touch = [touches anyObject];	CGPoint curretnPoint = [touch locationInView:self];	//創建路徑	UIBezierPath *path = [UIBezierPath bezierPath];	[path moveToPoint:curretnPoint];	//保存路徑	self.path = path;}

    • 移動

    //添加線條- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{	//獲取當前觸摸點	UITouch *touch = [touches anyObject];	CGPoint currentPoint = [touch locationInView:self];	//添加線條	[self.path addLineToPoint:currentPoint];	//重繪，將曲線顯示到圖層上	[self setNeedsDisplay];}

    • 結束（創建動畫）

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{	//創建動畫	CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];	//指定執行動畫的屬性，	animation.keyPath = @"position";	//設置動畫的執行路徑	animation.path = self.path.CGPath;	//設置動畫的執行時間	animation.duration = 1;	//設置動畫的重復次數	animation.repeatCount = MAXFLOAT;	//將動畫添加到對應的圖層上	[[[self.subviews firstObject] layer] addAnimation:animation forKey:nil];}

  • 將路徑顯示到圖層上

  //繪制路徑- (void)drawRect:(CGRect)rect{	[self.path stroke];}