CAAnimation 核心動畫

概念

  • Core Animation可以用在 Mac OS X 和 iOS平臺. Core Animation的動畫執(zhí)行過程是在后臺操作的.不會阻塞主線程. 要注意的是, Core Animation是直接作用在CALayer上的.并非UIView。

  • 使用步驟：
    1、創(chuàng)建一個CAAnimation對象
    2、設置一些動畫的相關屬性
    3、給CALayer添加動畫（addAnimation:forKey: 方法）
    4、停止CALayer動畫（removeAnimationForKey: 方法）

  • 注意: 如果當動畫正在執(zhí)行的時候, 將程序退出到后臺, 那么當程序再次進入前臺的時候就不執(zhí)行了。
    原因: 因為再次進入前臺后動畫已經(jīng)被刪除了。
    解決: anim.removedOnCompletion = NO;

CAAnimation繼承結構

一、 CAAnimation

CAAnimation類是所有動畫對象的父類，負責控制動畫的持續(xù)時間和速度等，是個抽象類，不能直接使用，應該使用它具體的子類

屬性：
  1. duration：動畫的持續(xù)時間，默認為0.25秒
  2. repeatCount：動畫的重復次數(shù)
  3. repeatDuration：動畫的重復時間
  4. removedOnCompletion：默認為YES，代表動畫執(zhí)行完畢后就從圖層上移除，圖形會恢復到動畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài)，那就設置為NO，不過還要設置fillMode屬性為kCAFillModeForwards
  5. fillMode：決定當前對象在非active時間段的行為.比如動畫開始之前,動畫結束之后
  6. beginTime：可以用來設置動畫延遲執(zhí)行時間，若想延遲2s，就設置為CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的當前時間
  7. timingFunction：速度控制函數(shù)，控制動畫運行的節(jié)奏

枚舉參數(shù)：
（1）kCAMediaTimingFunctionLinear 時間曲線函數(shù)，勻速
（2）kCAMediaTimingFunctionEaseIn 時間曲線函數(shù)，由慢到特別快
（3）kCAMediaTimingFunctionEaseOut 時間曲線函數(shù)，由快到慢
（4）kCAMediaTimingFunctionEaseInEaseOut 時間曲線函數(shù)，由慢到快
（5）kCAMediaTimingFunctionDefault 系統(tǒng)默認

  1. delegate：動畫代理，一般設置隱式代理，該代理是NSObject的分類，不需要遵守協(xié)議
    anim.delegate = self;
    （1）- (void)animationDidStart:(CAAnimation *)anim;核心動畫開始時執(zhí)行
    （2）- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;核心動畫執(zhí)行結束后調用

二、 CAPropertyAnimation

是CAAnimation的子類，也是個抽象類，要想創(chuàng)建動畫對象，應該使用它的兩個子類：CABasicAnimation和CAKeyframeAnimation

屬性：@property(nullable, copy) NSString *keyPath;
類方法：+ (instancetype)animationWithKeyPath:(nullableNSString *)path;

keyPath參數(shù)：通過指定CALayer的一個屬性名做為keyPath里的參數(shù)(NSString類型)，并且對CALayer的這個屬性的值進行修改，達到相應的動畫效果。比如，指定@”position”為keyPath，就修改CALayer的position屬性的值，以達到平移的動畫效果。
例子：

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

可修改的keyPath參數(shù)：


keyPath參數(shù)

三、CABasicAnimation（基本動畫）CAPropertyAnimation的子類

屬性：
  1. fromValue : keyPath相應屬性的初始值
  2. toValue : keyPath相應屬性的結束值，到某個固定的值（類似transform的make含義）
    注意：隨著動畫的進行,在長度為duration的持續(xù)時間內,keyPath相應屬性的值從fromValue漸漸地變?yōu)閠oValue.
    如果fillMode = kCAFillModeForwards和removedOnComletion = NO;那么在動畫執(zhí)行完畢后,圖層會保持顯示動畫執(zhí)行后的狀態(tài),但實質上,圖層的屬性值還是動畫執(zhí)行前的初始值,并沒有真正被改變.比如: CALayer的postion初始值為(0,0),CABasicAnimation的fromValue為(10,10),toValue為 (100,100),雖然動畫執(zhí)行完畢后圖層保持在(100,100) 這個位置,實質上圖層的position還是為(0,0);
  3. byValue：不斷進行累加的數(shù)值（類似transform非make方法的含義）
    例子：
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.byValue = @(M_PI * 2);

四、 CAKeyframeAnimation（關鍵幀動畫）CAPropertyAnimation的子類

和CABasicAnimation的區(qū)別：CABasicAnimation只能從一個數(shù)值(fromValue)變到另一個數(shù)值(toValue)，而CAKeyframeAnimation會使用一個NSArray（values）保存這些數(shù)值，實現(xiàn)多個點間的動畫效果，CABasicAnimation可看做是最多只有2個關鍵幀的CAKeyframeAnimation

屬性：
  1. values：NSArray對象，里面的元素稱為”關鍵幀”（NSValue類型），動畫對象會在指定的時間(duration)內，依次顯示values數(shù)組中的每一個關鍵幀（ NSValue）
    例子：
//設置動畫屬性
NSValue *p1 = [NSValue valueWithCGPoint:CGPointMake(50, 150)];
NSValue *p2 = [NSValue valueWithCGPoint:CGPointMake(250, 150)];
NSValue *p3 = [NSValue valueWithCGPoint:CGPointMake(50, 550)];
NSValue *p4 = [NSValue valueWithCGPoint:CGPointMake(250, 550)];
animKey.values = @[p1, p2, p3, p4];
  1. path：可以設置一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動，path只對CALayer的anchorPoint和position起作用，如果設置了path，那么values將被忽略。
    例子：
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 100)];
animKey.path = path.CGPath;
  1. keyTimes：可以為對應的關鍵幀指定對應的時間點,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀，當keyTimes沒有設置的時候,各個關鍵幀的時間是平分的
  2. rotationMode：旋轉模式
    （1）如果為nil或不設置效果為
    旋轉模式效果1

    （2）設置為kCAAnimationRotateAuto 或 kCAAnimationRotateAutoReverse 會隨著旋轉的角度做 ”自轉“
    animKey.rotationMode = kCAAnimationRotateAuto; 效果為：
    旋轉模式效果2

五、 CAAnimationGroup（組動畫）CAAnimation的子類

可以保存一組動畫對象，將CAAnimationGroup對象加入層后，組中所有動畫對象可以同時并發(fā)運行

屬性：

animations：動畫組，用來保存一組動畫對象的NSArray
默認情況下，一組動畫對象是同時運行的，也可以通過設置動畫對象的beginTime屬性來更改動畫的開始時間
例子：

// 2. 向組動畫中添加各種子動畫
// 2.1 旋轉
CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
// anim1.toValue = @(M_PI * 2 * 500);
anim1.byValue = @(M_PI * 2 * 1000);
// 2.2 縮放
CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
anim2.toValue = @(0.1);
// 2.3 改變位置, 修改position
CAKeyframeAnimation *anim3 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anim3.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 100)].CGPath;

// 把子動畫添加到組動畫中
anim.animations = @[anim1, anim2, anim3];

六、CATransition（轉場動畫）CAAnimation的子類

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

屬性：
  1. type：設置動畫過渡的類型

枚舉：
kCATransitionFade 交叉淡化過渡
kCATransitionMoveIn 新視圖移到舊視圖上面
kCATransitionPush 新視圖把舊視圖推出去
kCATransitionReveal 將舊視圖移開,顯示下面的新視圖
下面類型包裝成字符串賦值

轉場動畫過渡效果
  1. subtype：設置動畫過渡方向

枚舉：
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom

  1. startProgress：動畫起點(在整體動畫的百分比)
  2. endProgress：動畫終點(在整體動畫的百分比)
    例子：
- (IBAction)didRecognizeSwipeGesture:(UISwipeGestureRecognizer *)sender {
    // 1. 創(chuàng)建一個轉場動畫對象
    CATransition *anim = [[CATransition alloc] init];
    // 設置轉場動畫的類型
    anim.type = @"suckEffect";
    // 設置轉場動畫時間
    anim.duration = 1.5;
    anim.delegate = self;

    // 判斷方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
        // 設置轉場動畫的子類型
        anim.subtype = kCATransitionFromRight;
        // NSLog(@"left");
        self.index++;
    } else {
        // 設置轉場動畫的子類型
        anim.subtype = kCATransitionFromLeft;
        // NSLog(@"right");
        self.index--;
    }
    // 判斷是否越界
    if (self.index > 4) {
        self.index = 0;
    }
    if (self.index < 0) {
        self.index = 4;
    }

    // 拼接圖片名稱
    NSString *imgName = [NSString stringWithFormat:@"%d", self.index + 1];
    // 切換圖片
    self.imgViewIcon.image = [UIImage imageNamed:imgName];
    // 把轉場動畫添加到對應的控件上
     [self.imgViewIcon.layer addAnimation:anim forKey:@"anim1"];
}

七、UIView的類方法實現(xiàn)轉場動畫

單視圖：

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

雙視圖：

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

參數(shù)解析：
duration：動畫的持續(xù)時間
view：需要進行轉場動畫的視圖
options：轉場動畫的類型、效果，枚舉類型
animations：將改變視圖屬性的代碼放在這個block中
completion：動畫結束后，會自動調用這個block

例子：

// 識別到了輕掃手勢
- (IBAction)didRecognizeSwipeGesture:(UISwipeGestureRecognizer *)sender {
    // 判斷方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
        self.index++;
    } else {
        self.index--;
    }
    // 判斷是否越界
    if (self.index > 4) {
        self.index = 0;
    }
    if (self.index < 0) {
        self.index = 4;
    }
    // 拼接圖片名稱
    NSString *imgName = [NSString stringWithFormat:@"%d", self.index + 1];
    // 切換圖片
    self.imgViewIcon.image = [UIImage imageNamed:imgName];
    // 通過UIView來添加轉場動畫
    [UIView transitionWithView:self.imgViewIcon duration:0.5 options:UIViewAnimationOptionLayoutSubviews animations:^{
        [UIView animateWithDuration:0.5 animations:^{
            self.imgViewIcon.alpha = 0.4;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.5 animations:^{
                self.imgViewIcon.alpha = 1.0;
            }];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"動畫完成!");
    }];
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 概念 Core Animation可以用在 Mac OS X 和 iOS平臺. Core Animation的動畫...
    就算我心狂野閱讀 809評論 0贊 0
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種：UIView動畫，核心動畫，幀動畫，自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,142評論 1贊 23
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現(xiàn)這些動畫的過程并不復雜，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現(xiàn)這些動畫的過程并不復雜，今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5贊 13
  • 一只鳥的追憶 尊貴的人類： 你們好！ 嘰嘰嘰，我是一只鳥兒。 中國的每...
    小紅帽0914閱讀 247評論 0贊 1