記錄一下學(xué)習(xí)的筆記

核心動畫

• 核心動畫基本概念
• 基本動畫
• 關(guān)鍵幀動畫
• 動畫組
• 轉(zhuǎn)場動畫

Core Animation簡介

• Core Animation，中文翻譯譯為核心動畫，它是一組非常強大動畫處理API院溺，使用它能做出非常炫麗的動畫效果，而且往往是事半功倍纲爸。也就是說覆醇，使用少量的代碼就可以實現(xiàn)非常強大的功能。
• Core Animation也可以用在Mac OS X和iOS平臺锌俱。
• Core Animation的動畫執(zhí)行過程都是在后臺操作的晤郑，不會阻塞主線程。
• 要注意的是贸宏，Core Animation是直接作用在CALayer上的造寝，并非UIView。

核心動畫繼承結(jié)構(gòu)

Snip20160324_13.png

基本動畫

一吭练、位移動畫

效果圖: 注意诫龙，這里動畫執(zhí)行完畢后,狀態(tài)是會還原到開始動畫的位置，我們可以繼續(xù)點擊屏幕线脚，再次執(zhí)行動畫赐稽。可以使用removedOnCompletion和fillMode控制動畫執(zhí)行完畢后的狀態(tài),詳情繼續(xù)往下看浑侥。

1.gif

• 1姊舵、創(chuàng)建一個藍(lán)色的View
  

  Snip20160324_5.png

• 2、點擊觸發(fā)位移動畫

 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 1寓落、初始化動畫對象
    CABasicAnimation *anim = [CABasicAnimation animation];
    
    // 2括丁、設(shè)置屬性值
    anim.keyPath = @"transform.translation.x";
    anim.toValue = @100;
  
    // 一個layer里面可能有多個動畫，forKey可以方便管理
    [self.blueView.layer addAnimation: anim forKey: nil];
}

• 3伶选、基本屬性詳解

  • a史飞、keyPath: 告訴系統(tǒng)要執(zhí)行什么樣的動畫，可以在Xcode Documentation中查詢可以使用的keyPath的值仰税。
    

    Snip20160324_6.png

  • b构资、toValue: 通過動畫，要把layer移動到哪兒陨簇。

  • c吐绵、removedOnCompletion和fillMode配合使用, 可以讓動畫執(zhí)行完畢后，圖層會保持顯示動畫執(zhí)行后的狀態(tài)。但在實質(zhì)上己单，圖層的屬性值還是動畫執(zhí)行前的初始值唉窃，并沒有真正被改變.

看以下的代碼，分別在動畫開始前打印了layer的position的值纹笼，動畫執(zhí)行完畢后也打印了layer的position的值纹份，不過要設(shè)置一下動畫的代理。

     - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:      (UIEvent *)event
{
        NSLog(@"開始時position的值:%@", NSStringFromCGPoint(self.blueView.layer.position));
        // 1廷痘、初始化動畫對象
        CABasicAnimation *anim = [CABasicAnimation animation];
    
        // 2蔓涧、設(shè)置屬性值
        anim.keyPath = @"transform.translation.x";
        anim.toValue = @100;
    
        // 3、動畫完成后是否刪除動畫
        anim.removedOnCompletion = NO;
        anim.fillMode = kCAFillModeForwards;
        anim.delegate = self;
        //  anim.fillMode = @"forwards";    // 也是支持字符串的
        //  anim.fillMode = @"backwards";   // 默認(rèn)的
  
    
        // 一個layer里面可能有多個動畫牍疏，forKey可以方便管理
        [self.blueView.layer addAnimation: anim forKey: nil];
}

- (void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"開始動畫");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    NSLog(@"執(zhí)行后position的值:%@", NSStringFromCGPoint(self.blueView.layer.position));
}

效果圖:
點擊屏幕蠢笋，layer停留在動畫結(jié)束的那一位置。

1.gif

實際的position的值并沒有改變

Snip20160324_7.png

二鳞陨、心跳動畫

效果圖:

1.gif

• 1昨寞、創(chuàng)建一個UIImageView并設(shè)置心跳圖片
  

  Snip20160324_8.png

• 2、點擊屏幕觸發(fā)動畫, 主要學(xué)習(xí)一下duration厦滤、repeatCount與autoreverses屬性援岩。

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 創(chuàng)建動畫對象
    CABasicAnimation *anim = [CABasicAnimation animation];

    anim.keyPath = @"transform.scale";  // transform.scale 表示長和寬都縮放
    anim.toValue = @0;                  // @0 縮放到最小
    
    anim.duration = 0.5;                // 設(shè)置動畫執(zhí)行時間
    anim.repeatCount = MAXFLOAT;        // MAXFLOAT 表示動畫執(zhí)行次數(shù)為無限次
    
    anim.autoreverses = YES;            // 控制動畫反轉(zhuǎn) 默認(rèn)情況下動畫從尺寸1到0的過程中是有動畫的，但是從0到1的過程中是沒有動畫的掏导，設(shè)置autoreverses屬性可以讓尺寸0到1也是有過程的
    
    [self.imageView.layer addAnimation: anim forKey: nil];
}

楨動畫

是CApropertyAnimation的子類享怀，跟CABasicAnimation的區(qū)別是：CABasicAnimation只能從一個數(shù)值(fromValue)變到另一個數(shù)值(toValue)，而CAKeyframeAnimation會使用一個NSArray保存這些數(shù)值, 也可以使用UIBezierPath來繪制動畫路徑趟咆。

屬性解析:

• values：就是上述的NSArray對象添瓷。里面的元素稱為”關(guān)鍵幀”(keyframe)。動畫對象會在指定的時間(duration)內(nèi)值纱，依次顯示values數(shù)組中的每一個關(guān)鍵幀鳞贷。
• path：可以設(shè)置一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用虐唠。如果你設(shè)置了path搀愧，那么values將被忽略。
• keyTimes：可以為對應(yīng)的關(guān)鍵幀指定對應(yīng)的時間點,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應(yīng)values中的每一幀.當(dāng)keyTimes沒有設(shè)置的時候,各個關(guān)鍵幀的時間是平分的疆偿。

說明：CABasicAnimation可看做是最多只有2個關(guān)鍵幀的CAKeyframeAnimation咱筛。

一、抖動效果

效果圖:

1.gif

• 1杆故、創(chuàng)建一個UIImageView
  

  Snip20160324_9.png

• 2迅箩、點擊屏幕觸發(fā)抖動效果

#define angle2Radio(angle) ((angle) * M_PI / 180.0)     // 旋轉(zhuǎn)角度的宏
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    anim.keyPath = @"transform.rotation";  // rotation.x、rotation.y與rotation.z 默認(rèn)是z
    anim.values = @[@(angle2Radio(-5)), @(angle2Radio(5)), @(angle2Radio(-5))]; // 把度數(shù)轉(zhuǎn)換為弧度  度數(shù)/180*M_PI
    
    anim.repeatCount = MAXFLOAT;    // 動畫執(zhí)行次數(shù)無限次
    
    [self.imageView.layer addAnimation: anim forKey: nil];
}

轉(zhuǎn)場動畫

CAAnimation的子類处铛，用于做轉(zhuǎn)場動畫沙热，能夠為層提供移出屏幕和移入屏幕的動畫效果叉钥。iOS比Mac OS X的轉(zhuǎn)場動畫效果少一點
UINavigationController就是通過CATransition實現(xiàn)了將控制器的視圖推入屏幕的動畫效果

屬性解析:

• type：動畫過渡類型
• subtype：動畫過渡方向
• startProgress：動畫起點(在整體動畫的百分比)
• endProgress：動畫終點(在整體動畫的百分比)

效果圖:

1.gif

• 1罢缸、創(chuàng)建一個UIImageView
  

  Snip20160324_11.png

• 2篙贸、點擊屏幕觸發(fā)轉(zhuǎn)場效果

static int _i = 1;
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{

    // 0、切換圖片
    _i++;
    if (_i > 3) {
        _i = 1;
    }
    self.imageView.image = [UIImage imageNamed: [NSString stringWithFormat: @"%d", _i]];
    
    // 1枫疆、創(chuàng)建轉(zhuǎn)場動畫
    CATransition *trans = [CATransition animation];
    trans.duration = 1;
    
    // 2爵川、設(shè)置轉(zhuǎn)場類型
    trans.type = @"cude";
    
    [self.imageView.layer addAnimation: trans forKey: nil];
}

• 3、type類型的值

動畫組

動畫組,是CAAnimation的子類，可以保存一組動畫對象值依，將CAAnimationGroup對象加入層后圃泡，組中所有動畫對象可以同時并發(fā)運行。

屬性說明:

• animations：用來保存一組動畫對象的NSArray
• 默認(rèn)情況下愿险，一組動畫對象是同時運行的颇蜡，也可以通過設(shè)置動畫對象的beginTime屬性來更改動畫的開始時間

一、移動辆亏、縮小同時進(jìn)行的動畫

效果圖:

1.gif

• 1风秤、創(chuàng)建一個藍(lán)色的UIView

Snip20160324_14.png

• 2、第一種方法,創(chuàng)建兩個基本動畫扮叨，缺點有些屬性需要重復(fù)設(shè)置

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CABasicAnimation *anim1 = [CABasicAnimation animation];

    anim1.keyPath = @"transform.translation.y";
    anim1.toValue = @100;
    anim1.duration = 2;
    anim1.removedOnCompletion = NO;
    anim1.fillMode = kCAFillModeForwards;
    
    

    CABasicAnimation *anim2 = [CABasicAnimation animation];
    
    anim2.keyPath = @"transform.scale";
    anim2.toValue = @0.5;
    anim2.duration = 2;
    anim2.removedOnCompletion = NO;
    anim2.fillMode = kCAFillModeForwards;
    
    [self.blueView.layer addAnimation: anim1 forKey: nil];
    [self.blueView.layer addAnimation: anim2 forKey: nil];
}

• 3缤弦、第二種方法,組動畫, 可以設(shè)置公共屬性

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CAAnimationGroup *groupAnim = [CAAnimationGroup animation];
    groupAnim.duration = 2;
    groupAnim.removedOnCompletion = NO;
    groupAnim.fillMode = kCAFillModeForwards;
    
    CABasicAnimation *anim1 = [CABasicAnimation animation];
    anim1.keyPath = @"transform.translation.y";
    anim1.toValue = @100;

    CABasicAnimation *anim2 = [CABasicAnimation animation];
    anim2.keyPath = @"transform.scale";
    anim2.toValue = @0.5;
    
    groupAnim.animations = @[anim1, anim2];
    [self.blueView.layer addAnimation: groupAnim forKey: nil];
}

UIView動畫和核心動畫的區(qū)別和選擇

區(qū)別:

• 1、核心動畫只作用于Layer彻磁。
• 2碍沐、核心動畫看到的一切都是假像，真實值并沒有被修改（詳情查看基本動畫第一個例子）衷蜓。

選擇:

• 1累提、什么時候使用UIView動畫: 當(dāng)與用戶交互的時候，使用UIView恍箭，不需要與用戶進(jìn)行交互時刻恭，使用兩個都可以。
• 2扯夭、什么時候使用核心動畫：當(dāng)做幀動畫鳍贾，轉(zhuǎn)場動畫的時候使用