How do you infinitely loop all property modifications within UIView animation blocks

Question

I'm having an issue with making a glowing animation for UIView elements infinitely increase the size and opacity of the object shadow that I'm using to create the glow.

I've tried using different animation options, but none result in the shadow properties changing infinitely, only the animation that increases the size of the buttons infinitely loops.

- (void)addGlow:(UIView *)element withColor:(UIColor *)color
{
    element.layer.shadowColor = color.CGColor;
    element.layer.shadowOpacity = 0;
    element.layer.shadowOffset = CGSizeZero;
    element.layer.shadowRadius = 0;

    [UIView animateWithDuration:0.6 delay:0 options: UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse | UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionBeginFromCurrentState
     animations:^
     {
         element.transform = CGAffineTransformMakeScale(1.02, 1.02);
         element.layer.shadowOpacity = 0.5;
         element.layer.shadowRadius = 5;
     }
     completion:NULL];
}

I basically just want the shadowOpacity and shadowRadius to also increase and decrease infinitely, alongside the UIView object's pulsing effect (due to the transform).

Answer 1

I'd use CoreAnimation's CABasicAnimation + CAAnimationGroup, here's an example or what I think you're attempting:

@interface ViewController ()
@property (strong, nullable) IBOutlet UIButton *buttonToGlow;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.buttonToGlow.backgroundColor = [UIColor lightGrayColor];
    self.buttonToGlow.layer.cornerRadius = 10.0f;
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [self addGlow:self.buttonToGlow withColor:[UIColor redColor]];
}

- (void)addGlow:(UIView *)element withColor:(UIColor *)color {
    [element.layer removeAnimationForKey:@"glowAnimation"];
    element.layer.shadowColor = color.CGColor;
    element.layer.shadowOffset = CGSizeZero;
    CABasicAnimation *shadowOpacityAnimation = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];
    shadowOpacityAnimation.fromValue = @(0);
    shadowOpacityAnimation.toValue = @(0.5);
    CABasicAnimation *shadowRadiusAnimation = [CABasicAnimation animationWithKeyPath:@"shadowRadius"];
    shadowRadiusAnimation.fromValue = @(0);
    shadowRadiusAnimation.toValue = @(5);
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = @(1.0);
    scaleAnimation.toValue = @(1.02);
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.autoreverses = YES;
    animationGroup.repeatCount = CGFLOAT_MAX;
    animationGroup.duration = 0.6f;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animationGroup.animations = @[shadowOpacityAnimation, shadowRadiusAnimation, scaleAnimation];
    [element.layer addAnimation:animationGroup forKey:@"glowAnimation"];
}

@end

Here's the result:

References:

CoreAnimation programming guide: https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html?language=objc#//apple_ref/doc/uid/TP40004514

CABasicAnimation: https://developer.apple.com/documentation/quartzcore/cabasicanimation?language=objc

CAAnimationGroup: https://developer.apple.com/documentation/quartzcore/caanimationgroup?language=objc