ios - Animar el cambio de borde CALayer

objective-c

Question

Estoy configurando un ancho de borde y color para una subclase UIView esta manera:

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

Mi pregunta es: ¿Cómo puedo animar esto? Gracias.

Answer 1

Aquí hay una solución rápida para la respuesta de @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 2

Puede crear una animación de fotogramas clave y agregarla a su vista.

//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];

Answer 3

Si solo desea fundirse en el borde también puede hacer esto:

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

Answer 4

Tanto borderColor como borderWidth son propiedades que se pueden animar, pero como está haciendo esto en una subclase de vista fuera de un bloque de animación UIView, las animaciones implícitas (aquellas que ocurren automáticamente cuando cambia un valor) están deshabilitadas.

Si desea animar estas propiedades, puede hacer una animación explícita con CABasicAnimation . Ya que está animando dos propiedades en la misma capa, puede agregarlas a un grupo de animación y configurar solo la duración, el tiempo, etc. una vez. Tenga en cuenta que las animaciones explícitas son puramente visuales, el valor del modelo (la propiedad real) no cambia cuando las agrega. Es por eso que ambos configuran la animación y establecen el valor del modelo.

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"];

Si consulta la documentación de CABasicAnimation en la sección "Configuración de valores de interpolación", verá que no es necesario especificar tanto toValue como fromValue como lo hice yo, por lo que el código podría ser un poco más corto. Sin embargo, por claridad y legibilidad (especialmente cuando está comenzando con Core Animation), ser más explícito puede ayudarlo (y a su compañero de trabajo) a entender el código.