IOS動畫（3）主要畫面格動畫

標籤：style   blog   color   io   os   ar   使用   for   strong   

主要畫面格動畫中的時間系統，模型樹和呈現樹與基礎動畫一致，這裡主要介紹主要畫面格動畫的用法

CAKeyframeAnimation

- (void)viewDidLoad{    [super viewDidLoad];    CALayer *layer = [CALayer layer];    layer.bounds = CGRectMake(0, 0, 120, 120);    layer.position = CGPointMake(100, 300);    layer.cornerRadius = 60;    layer.masksToBounds = YES;    layer.contents = (id)[UIImage imageNamed:@"5.png"].CGImage;    [self.view.layer addSublayer:layer];}- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {    CALayer *layer = [self.view.layer.sublayers lastObject];    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];    //設定主要畫面格    //與基礎動畫不同，主要畫面格動畫必須指明動畫初始值    NSValue *value1 = [NSValue valueWithCGPoint:layer.position];    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(50, 300)];    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(50, 100)];            animation.duration = 2;    animation.values = @[value1,value2,value3];    animation.autoreverses = YES;        [layer addAnimation:animation forKey:nil];}

 這是主要畫面格動畫的第一種寫法，就是設定幾個關鍵節點，然後CoreAnimation自動補齊關鍵節點中的動畫

主要畫面格的另一種寫法是設定動畫的path，然後layer可以繞著畫好的path移動，這種方式可以方便的實現曲線運動的動畫效果

- (void)viewDidLoad{    [super viewDidLoad];    CALayer *layer = [CALayer layer];    layer.bounds = CGRectMake(0, 0, 120, 120);    layer.position = CGPointMake(100, 300);    layer.cornerRadius = 60;    layer.masksToBounds = YES;    layer.contents = (id)[UIImage imageNamed:@"5.png"].CGImage;    [self.view.layer addSublayer:layer];}- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {        CALayer *layer = [self.view.layer.sublayers lastObject];    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];        //設定主要畫面格    //與基礎動畫不同，主要畫面格動畫必須指明動畫初始值    CGPathRef path = CGPathCreateMutable();        CGPathMoveToPoint(path, NULL, layer.position.x, layer.position.y);//移動到起始點    CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 55, 400);//繪製二次方貝茲曲線        CGPathRelease(path);        animation.path = path;        animation.duration = 2;    animation.autoreverses = YES;        [layer addAnimation:animation forKey:nil];}

 

UIView封裝主要畫面格動畫

- (void)viewDidLoad{    [super viewDidLoad];    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 120, 120)];    imageView.image = [UIImage imageNamed:@"5.png"];    [self.view addSubview:imageView];}- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {    UIImageView *image = [self.view.subviews lastObject];    [UIView animateKeyframesWithDuration:5 delay:0 options:UIViewKeyframeAnimationOptionRepeat|UIViewKeyframeAnimationOptionAutoreverse animations:^{        //添加主要畫面格        //第一個主要畫面格為開始位置，無需添加                //第二個主要畫面格:從0秒開始持續50%的時間，也就是5.0*0.5=2.5秒        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{            image.center = CGPointMake(50, 50);        }];                //第三個主要畫面格，從0.5*5.0秒開始，持續5.0*0.25=1.25秒        [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{            image.center = CGPointMake(150, 50);        }];                //第四個主要畫面格：從0.75*5.0秒開始，持所需5.0*0.25=1.25秒        [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{            image.center = CGPointMake(150, 350);        }];    } completion:nil];    }

 

 

對於主要畫面格動畫也有一些動畫參數設定options，UIViewKeyframeAnimationOptions類型，和上面基本動畫參數設定有些差別，主要畫面格動畫設定參數分為兩類，可以組合使用：

1.常規動畫屬性設定（可以同時選擇多個進行設定）

UIViewAnimationOptionLayoutSubviews：動畫過程中保證子視圖跟隨運動。

UIViewAnimationOptionAllowUserInteraction：動畫過程中允許使用者互動。

UIViewAnimationOptionBeginFromCurrentState：所有視圖從目前狀態開始運行。

UIViewAnimationOptionRepeat：重複運行動畫。

UIViewAnimationOptionAutoreverse ：動畫運行到結束點後仍然以動畫方式回到初始點。

UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套動畫時間設定。
UIViewAnimationOptionOverrideInheritedOptions ：不繼承父動畫設定或動畫類型。

2.動畫模式設定（同前面主要畫面格動畫動畫模式一一對應，可以從其中選擇一個進行設定）

UIViewKeyframeAnimationOptionCalculationModeLinear：連續運算模式。

UIViewKeyframeAnimationOptionCalculationModeDiscrete ：離散運算模式。

UIViewKeyframeAnimationOptionCalculationModePaced：均勻執行運算模式。

UIViewKeyframeAnimationOptionCalculationModeCubic：平滑運算模式。

UIViewKeyframeAnimationOptionCalculationModeCubicPaced：平滑均勻運算模式。

注意：前面說過主要畫面格動畫有兩種形式，上面示範的是屬性值主要畫面格動畫，路徑主要畫面格動畫目前UIView還不支援。

IOS動畫（3）主要畫面格動畫