动画制作图层边界更改

Question

我通过以下方式为UIView子类设置边界宽度和颜色：

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

我的问题是：如何设置动画？谢谢

Answer 1

borderColor和borderWidth都是可设置动画的属性，但由于您是在UIView动画块之外的视图子类中执行此操作，因此会禁用隐式动画(更改值时自动发生的动画)。

如果要设置这些特性的动画，则可以使用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"];

如果您查看"设置插值"一节下的CABasicAnimation文档，您会发现没有必要像我那样同时指定toValue和fromValue，因此代码可以稍微短一些。然而，为了清晰易读(尤其是当你刚开始使用核心动画时)，更明确可以帮助你(和你的同事)理解代码。

Answer 2

以下是@David答案的快速解决方案：

let colorAnimation = CABasicAnimation(keyPath: "borderColor")
colorAnimation.fromValue = UIColor.red.cgColor
colorAnimation.toValue = UIColor.blue.cgColor
view.layer.borderColor = UIColor.blue.cgColor
let widthAnimation = CABasicAnimation(keyPath: "borderWidth")
widthAnimation.fromValue = 2
widthAnimation.toValue = 4
widthAnimation.duration = 4
view.layer.borderWidth = 4
let bothAnimations = CAAnimationGroup()
bothAnimations.duration = 0.5
bothAnimations.animations = [colorAnimation, widthAnimation]
bothAnimations.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
view.layer.add(bothAnimations, forKey: "color and width")

Answer 3

如果你只想在边界中淡入，你也可以这样做：

UIView.transition(with: self, duration: 0.3, options: .transitionCrossDissolve, animations: {
self.layer.borderColor = UIColor.green.cgColor
self.layer.borderWidth = 3
}, completion: nil)

Answer 4

您可以创建一个关键帧动画，并将其添加到视图中。

//Create animation
CAKeyframeAnimation *colorsAnimation = [CAKeyframeAnimation animationWithKeyPath:@"borderColor"];
colorsAnimation.values = [NSArray arrayWithObjects: (id)[UIColor greenColor].CGColor,
(id)[UIColor yellowColor].CGColor, nil];
colorsAnimation.keyTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.25],[NSNumber numberWithFloat:1.0], nil];
colorsAnimation.calculationMode = kCAAnimationLinear;
colorsAnimation.removedOnCompletion = NO;
colorsAnimation.fillMode = kCAFillModeForwards;
colorsAnimation.duration = 3.0f;
//Create animation
CAKeyframeAnimation *sizeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"borderWidth"];
sizeAnimation.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:5.0], nil];
sizeAnimation.keyTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],[NSNumber numberWithFloat:3.0], nil];
sizeAnimation.calculationMode = kCAAnimationLinear;
sizeAnimation.removedOnCompletion = NO;
sizeAnimation.fillMode = kCAFillModeForwards;
sizeAnimation.duration = 3.0f;
//Add animation
[yoursubview.layer   addAnimation:colorsAnimation forKey:nil];
[yoursubview.layer   addAnimation:sizeAnimation forKey:nil];