貓貓學IOS（四十）UI之核心動畫_抖動效果_CAKeyframeAnimation

標籤：ui   效果   抖動   created   c   

貓貓分享，必須精品

原創文章，歡迎轉載。轉載請註明：翟乃玉的部落格
地址：http://blog.csdn.net/u013357243?viewmode=contents

效果：

效果一：

效果二：

代碼：

////  NYViewController.m//  圖片抖動////  Created by apple on 15-5-8.//  Copyright (c) 2015年 znycat. All rights reserved.//#import "NYViewController.h"@interface NYViewController ()@property (nonatomic, weak) UIImageView *iconView;@end@implementation NYViewController-(UIImageView *)iconView{    if (_iconView == nil) {        UIImageView *iconView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"cat"]];        iconView.center = CGPointMake(100, 230);        [self.view addSubview:iconView];        _iconView = iconView;        return _iconView;    }    return _iconView;}- (void)viewDidLoad{    [super viewDidLoad];    [self iconView];}//開始抖動-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    [self position];    [self rotation];}//主要畫面格動畫移動- (void)position {    // 1.建立核心動畫    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];    // 1.1告訴系統執行什麼動畫    keyAnima.keyPath = @"position";    //    NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 100)];    NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(250, 100)];    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(250, 300)];    NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];    NSValue *v5 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];    keyAnima.values = @[v1, v2, v3, v4, v5];    //    keyAnima.keyTimes = @[@(0.5) ,@(0.5), @(0.5)];    keyAnima.timingFunction =  [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    // 1.2儲存執行完之後的狀態    // 1.2.1執行完之後不刪除動畫    keyAnima.removedOnCompletion = NO;    // 1.2.2執行完之後儲存最新的狀態    keyAnima.fillMode = kCAFillModeForwards;    // 1.3設定動畫時間    keyAnima.duration = 2;    // 2.觀察動畫什麼時候開始執行, 以及什麼時候執行完畢    keyAnima.delegate = self;    // 2.添加核心動畫    [self.iconView.layer addAnimation:keyAnima forKey:nil];}//動畫抖動效果rotation- (void)rotation {    //1,建立核心動畫    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];    //2,告訴系統執行什麼動畫。    keyAnima.keyPath = @"transform.rotation";    //              (-M_PI_4 /90.0 * 5)表示-5度 。    keyAnima.values = @[@(-M_PI_4 /90.0 * 5),@(M_PI_4 /90.0 * 5),@(-M_PI_4 /90.0 * 5)];    // 1.2.1執行完之後不刪除動畫    keyAnima.removedOnCompletion = NO;    // 1.2.2執行完之後儲存最新的狀態    keyAnima.fillMode = kCAFillModeForwards;    //動畫執行時間    keyAnima.duration = 0.2;    //設定重複次數。    keyAnima.repeatCount = MAXFLOAT;    // 2.添加核心動畫    [self.iconView.layer addAnimation:keyAnima forKey:nil];}@end

CAKeyframeAnimation幀動畫介紹

CApropertyAnimation的子類，跟CABasicAnimation的區別是：CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue)，而CAKeyframeAnimation會使用一個NSArray儲存這些數值

屬性解析：

values：就是上述的NSArray對象。裡面的元素稱為”主要畫面格”(keyframe)。動畫對象會在指定的時間(duration)內，依次顯示values數組中的每一個主要畫面格
path：可以設定一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設定了path，那麼values將被忽略
keyTimes：可以為對應的主要畫面格指定對應的時間點,其取值範圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀.當keyTimes沒有設定的時候,各個主要畫面格的時間是平分的
CABasicAnimation可看做是最多隻有2個主要畫面格的CAKeyframeAnimation

用法步驟：

1.建立核心動畫

    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];

1.1告訴系統執行什麼動畫

 keyAnima.keyPath = @"position";    NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(250, 100)];    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(250, 300)];    NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];    NSValue *v5 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];    keyAnima.values = @[v1, v2, v3, v4, v5];    keyAnima.timingFunction =  [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

1.2儲存執行完之後的狀態
1.2.1執行完之後不刪除動畫

keyAnima.removedOnCompletion = NO;

1.2.2執行完之後儲存最新的狀態

  keyAnima.fillMode = kCAFillModeForwards;

1.3設定動畫時間

 keyAnima.duration = 2;

2.觀察動畫什麼時候開始執行, 以及什麼時候執行完畢

 keyAnima.delegate = self;

2.添加核心動畫到CALayer

[self.iconView.layer addAnimation:keyAnima forKey:nil];

貓貓學IOS（四十）UI之核心動畫_抖動效果_CAKeyframeAnimation