iOS Animation建立及使用

iOS 實現的基本動畫

1. 頭尾式動畫

// 開始動畫[UIView beginAnimations: nil  context :nil];// 設定動畫的時長[UIView setAnimationDuration :2];// 要執行的程式碼段self.imageView.center = centerPoint;// 提交動畫[UIView commitAnimations];

2.block動畫的方法

 一、
[UIView animateWithDuration:1.0 animations:^{        
    // 執行動畫的程式碼
    self.imageView.center = centerPoint;
   }];

二、
[UIView animateWithDuration:2 animations:^{    // 要執行動畫的程式碼
    } completion:^(BOOL finished) {    // 動畫執行完成後的回撥
   }];
   
三、
[UIView animateWithDuration:2 delay:2 options:UIViewAnimationOptionAllowAnimatedContent animations:^{      // 要執行的動畫的程式碼
    } completion:^(BOOL finished) {      // 執行動畫完畢之後的回撥
   }];

1. iOS顯示關鍵幀動畫

// 1. 建立關鍵幀動畫CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[keyAnimation setValue:[NSValue valueWithCGPoint:CGPointMake(50, 614) ]forKey:@"LayerPosition"];    
// 2. 設定貝塞爾曲線路徑CGMutablePathRef path = CGPathCreateMutable();// 設定易懂的起始點CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);// 繪製二次貝塞爾曲線// 可以新增路徑,CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 50, 400);CGPathAddCurveToPoint(path, NULL, 160, 500, -30, 600, 50, 614);// 給動畫新增路徑 設定路徑屬性keyAnimation.path = path;    
// 記得釋放路徑CGPathRelease(path);
  
keyAnimation.calculationMode = kCAAnimationCubic;    
// 設定動畫其他屬性keyAnimation.duration = 5.0;
keyAnimation.removedOnCompletion = NO;
keyAnimation.repeatCount = 1;
    
keyAnimation.delegate = self;    
// 給圖層新增動畫[_layer addAnimation:keyAnimation forKey:@"KCKeyAnimation_Positon"];

1. 關鍵幀動畫

#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong) CALayer *layer;@end@implementation ViewController- (void)viewDidLoad {
    [super viewDidLoad];    
    
    // 設定背景()
    UIImage *backImage = [UIImage imageNamed:@"haha1"];    self.view.backgroundColor = [UIColor colorWithPatternImage:backImage];    
    // 自定義一個圖層
    _layer = [[CALayer alloc] init];
    _layer.bounds = CGRectMake(50, 50, 10, 20);
    _layer.position = CGPointMake(50, 150);
    _layer.contents = (id)[UIImage imageNamed:@"hudie"].CGImage;
    [self.view.layer addSublayer:_layer];    
    // 建立動畫
    [self translationKeyAnimation];
}/**
 *  關鍵幀動畫, 關鍵幀動畫就是在動畫控制過程中開發者指定主要的動畫狀態, 至於各種狀態間動畫如何進行則由系統自動運算補充(每個兩個關鍵幀之間系統形成的動畫成為補間動畫), 這種動畫的好處就是開發者不用逐個每個動畫幀, 而只關心幾個關鍵幀的狀態即可
    
    關鍵幀動畫開發分為兩種形式, 一種是透過設定不同的屬性進行關鍵幀控制
    另一種是透過繪製路徑進行關鍵幀控制, 後者優先順序高於前者, 如果設定了路徑則屬性就不再起作用

 *//**
 *  關於關鍵幀動畫路徑
 
 *  如果路徑不是曲線的話, 
    矩形路徑是從矩形的左上角開始執行, 順時針執行一週回到最上角.
    橢圓路徑的話就是從橢圓的右側開始(0度)順時針一週回到右側.
 *//**
 *  keyTimes
 *      
    各個關鍵幀的時間控制。前面使用values設定了四個關鍵幀，預設情況下每兩幀之間的間隔為:8/(4-1)秒。如果想要控制動畫從第一幀到第二針佔用時間4秒，從第二幀到第三幀時間為2秒，而從第三幀到第四幀時間2秒的話，就可以透過keyTimes進行設定。keyTimes中儲存的是時間佔用比例點，此時可以設定keyTimes的值為0.0，0.5，0.75，1.0（當然必須轉換為NSNumber），也就是說1到2幀執行到總時間的50%，2到3幀執行到總時間的75%，3到4幀執行到8秒結束。
 

 *//**
 *  caculationMode
 *
 *  動畫計算模式。還拿上面keyValues動畫舉例，之所以1到2幀能形成連貫性動畫而不是直接從第1幀經過8/3秒到第2幀是因為動畫模式是連續的
    kCAAnimationLinear 這是計算模式的預設值
    kCAAnimationDiscrete離散的那麼你會看到動畫從第1幀經過8/3秒直接到第2幀，中間沒有任何過渡
    kCAAnimationPaced（均勻執行，會忽略keyTimes）、
    kCAAnimationCubic（平滑執行，對於位置變動關鍵幀動畫執行軌跡更平滑
    kCAAnimationCubicPaced（平滑均勻執行）
 */#pragma mark --- 關鍵幀動畫----> 設定關鍵幀的點座標執行動畫路徑- (void)translationAnimation
{    // 1. 建立關鍵幀動畫物件  初始化keyPath
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];    // 2.設定關鍵幀, 有4個關鍵幀
    // 對於關鍵幀動畫的初始值不能省略, 就是最少要有一個幀
    NSValue *key1 = [NSValue valueWithCGPoint:_layer.position];    NSValue *key2 = [NSValue valueWithCGPoint:CGPointMake(80, 220)];    NSValue *key3 = [NSValue valueWithCGPoint:CGPointMake(45, 300)];    NSValue *key4 = [NSValue valueWithCGPoint:CGPointMake(55, 400)];    
    // 通喲keyTimes陣列來設定關鍵幀的執行時間
    keyAnimation.keyTimes = @[@(0.1), @(0.2), @(0.3), @(1.0)];    
    NSArray *keys = @[key1, key2, key3, key4];    // 設定關鍵幀
    keyAnimation.values = keys;    // 3. 設定其他屬性
    keyAnimation.duration = 5.0;
    keyAnimation.repeatCount = HUGE_VALF;
    keyAnimation.removedOnCompletion = NO;    
    // 設定動畫的開始時間 延時兩秒執行
    keyAnimation.beginTime = CACurrentMediaTime() + 2;    
    // 4.給圖層新增動畫
    [_layer addAnimation:keyAnimation forKey:@"KCKeyframeAnimation_Position"];
    
}#pragma mark ---- 關鍵幀動畫 ----> 設定貝塞爾曲線作為動畫執行的路徑- (void)translationKeyAnimation
{    // 1. 建立關鍵幀動畫
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    [keyAnimation setValue:[NSValue valueWithCGPoint:CGPointMake(50, 614) ]forKey:@"LayerPosition"];    
    // 2. 設定貝塞爾曲線路徑
    CGMutablePathRef path = CGPathCreateMutable();    // 設定易懂的起始點
    CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);    
    // 繪製二次貝塞爾曲線
    // 可以新增路徑,
    CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 50, 400);    CGPathAddCurveToPoint(path, NULL, 160, 500, -30, 600, 50, 614);    // 給動畫新增路徑 設定路徑屬性
    keyAnimation.path = path;    
    CGPathRelease(path);
    
    
    keyAnimation.calculationMode = kCAAnimationCubic;    
    // 設定動畫其他屬性
    keyAnimation.duration = 5.0;
    keyAnimation.removedOnCompletion = NO;
    keyAnimation.repeatCount = 1;
    
    keyAnimation.delegate = self;    
    // 給圖層新增動畫
    [_layer addAnimation:keyAnimation forKey:@"KCKeyAnimation_Positon"];
}#pragma mark --- 動畫的代理方法- (void)animationDidStart:(CAAnimation *)anim
{
    
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{    //  開啟事務
    [CATransaction begin];    
    // 關閉隱式動畫屬性
    [CATransaction setDisableActions:YES];
    
    _layer.position = [[anim valueForKey:@"LayerPosition"] CGPointValue];
    
    [CATransaction commit];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

1. 動畫的建立和使用

第一種：UIView 程式碼塊呼叫

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
[UIView animateWithDuration:1.0f animations:^{
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
} completion:^(BOOL finished) {
_demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
}];

第二種：UIView [begin commit]模式

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
[UIView commitAnimations];

第三種：使用Core Animation中的類

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
anima.duration = 1.0f;
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

參考

作者：奮拓達
連結：
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。