ios - 动画 CALayer 边框变化

Question

我正在以这种方式为 UIView 子类设置 border 宽度和颜色:

- (void) setViewBorder
{
    self.layer.borderColor = [UIColor greenColor].CGColor;
    self.layer.borderWidth = 3.0f;
}

我的问题是:我如何制作动画？谢谢。

Answer 1

borderColor 和 borderWidth 都是可动画的属性，但是由于您是在 UIView 动画 block 之外的 View 子类中执行此操作，因此隐式动画(当您更改值)被禁用。

如果你想为这些属性设置动画，那么你可以使用 CABasicAnimation 进行显式动画。由于您在同一层上对两个属性进行动画处理，因此您可以将它们都添加到一个动画组中，并且只配置一次持续时间、时间等。请注意，显式动画是纯粹视觉的，添加它们时模型值(实际属性)不会改变。这就是您同时配置动画和设置模型值的原因。

CABasicAnimation *color = [CABasicAnimation animationWithKeyPath:@"borderColor"];
// animate from red to blue border ...
color.fromValue = (id)[UIColor redColor].CGColor;
color.toValue   = (id)[UIColor blueColor].CGColor;
// ... and change the model value
self.layer.borderColor = [UIColor blueColor].CGColor;

CABasicAnimation *width = [CABasicAnimation animationWithKeyPath:@"borderWidth"];
// animate from 2pt to 4pt wide border ...
width.fromValue = @2;
width.toValue   = @4;
// ... and change the model value
self.layer.borderWidth = 4;

CAAnimationGroup *both = [CAAnimationGroup animation];
// animate both as a group with the duration of 0.5 seconds
both.duration   = 0.5;
both.animations = @[color, width];
// optionally add other configuration (that applies to both animations)
both.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

[self.layer addAnimation:both forKey:@"color and width"];

如果你看the documentation for CABasicAnimation在“设置插值值”部分下，您会看到没有必要像我一样同时指定 toValue 和 fromValue，因此代码可以稍微短一些。但是，为了清晰和可读性(尤其是当您开始使用 Core Animation 时)，更明确可以帮助您(和您的同事)理解代码。