Core Animation 三（移动对象）

最新推荐文章于 2024-04-01 09:05:00 发布

原创最新推荐文章于 2024-04-01 09:05:00 发布 · 745 阅读

0 ·

CC 4.0 BY-SA版权

Core Animation 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了Core Animation的基本原理及高级技巧，包括图层动画、显式与隐式动画的区别，以及如何解决动画中的常见问题。

通过之前的知识，可以在图层中绘图之后，再想一想如何使用图层来创建动画？

图层默认就是可以实现动画的。事实上，你需要通过少量工作阻止动画执行。参考一下的代码

-(void)viewDidLoad
{
    [super viewDidLoad];
    CALayer *squareLayer = [CALayer layer];
    squareLayer.backgroundColor = [[UIColor redColor] CGColor];
    squareLayer.frame = CGRectMake(100, 100, 20, 20);
    [self.view.layer addSublayer:squareLayer];
    
    UIView *squareView = [UIView new];
    squareView.backgroundColor = [UIColor blueColor];
    squareView.frame = CGRectMake(200, 100, 20, 20);
    [self.view addSubview:squareView];
    
    [self.view addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(drop:)]];
}

-(void)drop:(UIGestureRecognizer *)recognizer
{
    NSArray *layers = self.view.layer.sublayers;
    CALayer *layer = [layers objectAtIndex:0];
    layer setPosition:CGPointMake(200, 250);
    
    NSArray *views = self.view.subviews;
    UIView *view = [views objectAtIndex:0];
    view setCenter:CGPointMake(100, 250);
}

这段代码绘制了一个小型的红色子图层合一个小型的蓝色子图层。点击视图时，他们都会移动，视图会立刻蹦到新的位置上。图层动画持续稍大于1/4秒。很快，不过不像视图那样迅速。

CALayer隐式为所有支持动画的属性添加动画。你可以通过禁用动作（action）来阻止动画：[CATransaction setDisableActions:YES];

隐式动画

通过上面的知识，你已经了解了所有动画的基础知识了。只需要设置图层属性，图层就会以默认方式执行动画。不过，要是你不喜欢默认设定，那么首先你需要理解事务（transaction）。

通常在更改图层属性时，你回想要他们具有动画效果。如果下一个属性的更改会影响当前属性的更改，你不会想要花费过多的渲染时间来计算后者更改时的动画。比方说，opacity和backgroundColor是相互影响的属性，它们都能决定最终显示的像素颜色，因此渲染器需要再计算中间值时了解两个动画。

CoreAnimation 把属性的更改绑定到了原子事务（CATransaction）。当你首次在一个包含运行循环的线程上修改一个图层时，系统会为你创建一个隐式CATransaction在运行循环中，所有的图层修改都被收集起来，当运行循环结束时，所有的修改都提交给图层树（layer tree）

如果想要更改动画属性，需要对当前事务进行更改。以下代码将当前事务的持续时间从0.25变成了2秒

[CATransaction setAnimationDuration:2.0];

也可以使用

[CATransaction setCompletionBlock:]

设置一个完成代码块（completion block），在当前事务完成动画后运行。可以使用这种方式链接多个动画。

虽然运行循环会自动创建一个事务，但你还是可以通过[CATransaction begin]和[CATransaction commit]创建自己的显式事务。这样，你便可为动画的不同部分指定不同的持续时间或者禁用事务循环中某一部分的动画。

显式动画

隐式动画确实非常强大，而且也方便，不过有时你需要更多的控制。这久需要用到CAAnimation了，使用CAAnimation，可以管理重复动画、准确控制时间和步调，并能设置图层过渡。隐式动画式通过CAAnimation实现的，因此所有可以在隐式动画中做到的事情都能再显式动画里做到。

最基本的动画是CABasicAnimation，它添加了一个使用时间函数的属性，如以下代码

 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    anim.fromValue = [NSNumber numberWithDouble:1.0];
    anim.toValue = [NSNumber numberWithDouble:0.0];
    anim.autoreverses = YES;
    anim.repeatCount = INFINITY;
    anim.duration = 2.0;
    [self.view.layer addAnimation:anim forKey:@"anim"];

它会一直每隔两秒重复绘制一次图层，将透明度从1一直该到0.如果你想停止这个动画，请讲它移除[self.view.layer removeAnimationForKey:@"anim"];

动画有它的key（关键帧）、fromValue(起始值)、toValue（目标值）、timingFunction（时间函数）、duration（持续时间）以及其他一些配置选项。它的工作原理是创建图层的多个副本，发送setValue：forKey：消息到副本，然后显式。它会捕捉生成的contents并将其显示出来。

如果图层中又自定义的属性，你可能会注意到它们在动画运行中没有被正确设置。这是因为图层被复制了。如果你希望它们在动画运行过程中可用，则必须覆盖initWithLayer：方法来复制你自定义的属性。

顾名思义，CABaseAnimation就是一个基本的动画。虽然很容易设置和使用，但不是很灵活，如果你想更多多的控制动画，可以使用CAKeyframeAnimation。主要的区别在于不是给出fromValue和toValue，而是可以利用路径或点序列实现动画，并为每个动画片段单独计时。

模型和表示

动画中一个常见问题就是麻烦的“闪回”（jump back）。错误如下

CABasicAnimation *fade;
    fade = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fade.duration = 1;
    fade.fromValue = [NSNumber numberWithDouble:1.0];
    fade.toValue = [NSNumber numberWithDouble:0.0];
    [circleLayer addAnimation:fade forKey:@"fade"];

这段代码会让圆圈淡出大约1秒钟，之后突然出现。要了解突然出现的愿意，需要明了模型层与表示层的区别。模型层是由“真正”CALayer对象的属性定义的。前面的代码没有任何地方修改circleLayer本身。相反，CAAnimation创建了circleLayer的副本对其进行修改，使其变成表示层。它们大致表示会再屏幕上显示什么内容。从技术上讲还存在一个渲染层，真正表示屏幕上要显示的内容，不过它是CoreAnimation内部的功能，你很少会用到它。

那么上面的代码中发生了什么？CAAnimation修改了表示层，表示层将被绘制到屏幕，绘制完成后，所有的更发idouhui丢失并由模型层决定新状态，模型层没有改变，因此会恢复一开始的状态。解决方法是设置模型层，如下所示

    circleLayer.opacity = 0;
    CABasicAnimation *fade;
    fade = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fade.duration = 1;
    fade.fromValue = [NSNumber numberWithDouble:1.0];
    fade.toValue = [NSNumber numberWithDouble:0.0];
    [circleLayer addAnimation:fade forKey:@"fade"];
    //有时它能正常工作，但有时setOpacity：中的隐式动画会于AanimationWithKeyPath：的显示动画冲突。最好的解决办法是执行显示动画时关闭隐式动画：
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    circleLayer.opacity = 0;
    CABasicAnimation *fade;
    fade = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fade.duration = 1;
    fade.fromValue = [NSNumber numberWithDouble:1.0];
    fade.toValue = [NSNumber numberWithDouble:0.0];
    [circleLayer addAnimation:fade forKey:@"fade"];
    [CATransaction commit];

有人推荐设置removedOnCompletion为NO、fillMode为KCAFillModeBoth。这并不是好的解决办法。它本质上会让动画一直运行，这意味着模型层永远不会更新。如果你想要获取属性的值，得到的只会是模型的值，而不是真正绘制在屏幕上的内容。如果之后试着对属性应用隐式动画，它不会正常工作，因为CAAnimation仍然在运行。如果你通过其他名称相同的动画进行交替来一出动画，那么调用removeAnimationForKey：或removeAllAnimations后就会获取旧值。而且，这样设置会浪费内存。

那么事情就有点棘手了。因此，可能需要给CALayer建立一个Category，他进行了全面的分装，支持设置持续时间和延时。一般情况下我仍建议使用隐式动画，不过这里使用显示动画会简单一些：

-(void)setValue:(id)value forKeyPath:(NSString *)keyPath duration:(CFTimeInterval)duration delay:(CFTimeInterval)delay
{
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    [self setValue:value forKeyPath:keyPath];
    
    CABasicAnimation *anim;
    anim = [CABasicAnimation animationWithKeyPath:keyPath];
    anim.duration = duration;
    anim.beginTime = CACurrentMediaTime() + delay;
    anim.fillMode = kCAFillModeBoth;
    anim.fromValue = [[self presentationLayer] valueForKey:keyPath];
    anim.toValue = value;
    [self addAnimation:anim forKey:keyPath];
    
    [CATransaction commit];
}

关于定时

跟我们生活的宇宙一样，Core Animation中的时间也是相对的。一秒时间不一定就是一秒钟。与坐标一样，时间是可以缩放的。

CAAnimation遵循CAMediaTiming协议，可以设置其speed属性来缩放它的时间跨度。因此，若要计算图层之间的时间，需要对他们进行转换，就像转换不同视图或图层中的点一样。

localPoint = [self convertPoint:remotePoint fromLayer:otherLayer];

localTime = [self convertTime:remote time fromLayer:otherLayer];

这种情况并不常见，但在协调动画时会出现。你可能会使用其他图层的特定动画，在该动画要结束时你便开始你自己的动画

CAAnimation *otherAnim = [layer animationForKey:@"anim"];
CFTimeInterval finish = otherAnim.beginTime + otherAnim.duration;
myAnim.beginTime = [self convertTime:finish fromLayer:layer];

像这样设置beginTime是链接动画的不错方法，即使是硬编码时间而不询问其他图层。如果想要引用“当前时间”，可以使用CACurremtediaTime()

这又会引发另一个问题。你的属性值现在是多少，动画什么时候开始？可以假设会fromValue（起始值），但实际上并非如此。因为动画还没有开始，所以它是当前模型的值。一般来说，这个值是toValue（目标值）。来看下面的动画

 [CATransaction begin];
    CABasicAnimation *anim;
    anim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    anim.duration = 5.0;
    anim.fromValue = [NSNumber numberWithDouble:1.0];
    anim.toValue = [NSNumber numberWithDouble:0.5];
    anim.beginTime = CACurrentMediaTime() + 3.0;
    [layer addAnimation:anim forKey:@"fade"];
    layer.opacity = 0.5;
    [CATransaction commit];

前三秒动画不懂。在这段时间内，默认属性的不透明（opacity）会从1.0渐变成0.5。然后动画开始，设计不透明从它的起始值逐渐变成目标值。因此图层会再0.25秒时间内从1.0变成0.5，3秒之后，它就会跳回1.0并在5秒内渐变为0.5.几乎可以肯定，这并不是你想要的结果。可以通过fillMode解决这个问题。默认的KCAFillModeRemoved意味着动画在执行前后不会对值有什么影响。在动画执行前后可以通过设置填充模式为KCAFillModeBackwards，KCAFillModeForwardss或KCAFillModeBoth来更改为“恒定”值。

大部分情况下，应该设置fillMode为KCAFillModeBackwards或KCAFillModeBoth