Core Animation之CABasicAnimation,cabasicanimation

來源:互聯網
上載者:User

Core Animation之CABasicAnimation,cabasicanimation

在iOS中,圖形可分為以下幾個層次:

越上層,封裝程度越高,動畫實現越簡潔越簡單,但是自由度越低;反之亦然。本文著重介紹Core Animation層的基本動畫實現方案。

在iOS中,展示動畫可以類比於顯示生活中的“拍電影”。拍電影有三大要素:演員+劇本+開拍,概念類比如下:

演員--->CALayer,規定電影的主角是誰劇本--->CAAnimation,規定電影該怎麼演,怎麼走,怎麼變換開拍--->AddAnimation,開始執行

一、概念介紹

1.1CALayer是什麼呢?

CALayer是個與UIView很類似的概念,同樣有layer,sublayer...,同樣有backgroundColor、frame等相似的屬性,我們可以將UIView看做一種特殊的CALayer,只不過UIView可以響應事件而已。一般來說,layer可以有兩種用途,二者不互相衝突:一是對view相關屬性的設定,包括圓角、陰影、邊框等參數,更詳細的參數請點擊這裡;二是實現對view的動畫操控。因此對一個view進行core animation動畫,本質上是對該view的.layer進行動畫操縱。

1.2CAAnimation是什麼呢?

CAAnimation可分為四種:

  • 1.CABasicAnimation
  • 通過設定起始點,終點,時間,動畫會沿著你這設定點進行移動。可以看做特殊的CAKeyFrameAnimation
  • 2.CAKeyframeAnimation
  • Keyframe顧名思義就是關鍵點的frame,你可以通過設定CALayer的始點、中間關鍵點、終點的frame,時間,動畫會沿你設定的軌跡進行移動
  • 3.CAAnimationGroup
  • Group也就是組合的意思,就是把對這個Layer的所有動畫都組合起來。PS:一個layer設定了很多動畫,他們都會同時執行,如何按順序執行我到時候再講。
  • 4.CATransition
  • 這個就是蘋果幫開發人員封裝好的一些動畫

二、動手幹活

實踐出真知,看個例子就知道:

比如我們想實現一個類似心跳的縮放動畫可以這麼做,分為演員初始化、設定劇本、電影開拍三個步驟:

 
- (void)initScaleLayer{    //演員初始化    CALayer *scaleLayer = [[CALayer alloc] init];    scaleLayer.backgroundColor = [UIColor blueColor].CGColor;    scaleLayer.frame = CGRectMake(60, 20 + kYOffset, 50, 50);    scaleLayer.cornerRadius = 10;    [self.view.layer addSublayer:scaleLayer];    [scaleLayer release];        //設定劇本    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];    scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];    scaleAnimation.autoreverses = YES;    scaleAnimation.fillMode = kCAFillModeForwards;    scaleAnimation.repeatCount = MAXFLOAT;    scaleAnimation.duration = 0.8;        //開演    [scaleLayer addAnimation:scaleAnimation forKey:@"scaleAnimation"];}

 

- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view from its nib.    [self initScaleLayer];}

  

效果請參考附圖中的綠色方塊(我不懂在mac下怎麼錄製gif圖,先借用kk的圖)。其他效果可以依葫蘆畫瓢輕鬆實現。想要實現不同的效果,最關鍵的地方在於CABasicAnimation對象的初始化方式中keyPath的設定。在iOS中有以下幾種不同的keyPath,代表著不同的效果:

此外,我們還可以利用GroupAnimation實現多種動畫的組合,在GroupAnimation中的各個動畫類型是同時進行的。

 - (void)initGroupLayer {     //演員初始化     CALayer *groupLayer = [[CALayer alloc] init];     groupLayer.frame = CGRectMake(60, 340+100 + kYOffset, 50, 50);     groupLayer.cornerRadius = 10;     groupLayer.backgroundColor = [[UIColor purpleColor] CGColor];     [self.view.layer addSublayer:groupLayer];     [groupLayer release];        //設定劇本     CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];     scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];     scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];     scaleAnimation.autoreverses = YES;     scaleAnimation.repeatCount = MAXFLOAT;     scaleAnimation.duration = 0.8;          CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];     moveAnimation.fromValue = [NSValue valueWithCGPoint:groupLayer.position];     moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80,                                                                   groupLayer.position.y)];     moveAnimation.autoreverses = YES;     moveAnimation.repeatCount = MAXFLOAT;     moveAnimation.duration = 2;          CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];     rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];     rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];     rotateAnimation.autoreverses = YES;     rotateAnimation.repeatCount = MAXFLOAT;     rotateAnimation.duration = 2;          CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];     groupAnnimation.duration = 2;     groupAnnimation.autoreverses = YES;     groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];     groupAnnimation.repeatCount = MAXFLOAT;     //開演     [groupLayer addAnimation:groupAnnimation forKey:@"groupAnnimation"]; }

  

- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view from its nib.    [self initGroupLayer];} 

 完整的demo工程點CAAnimationDemo.zip下載 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.