NSScreencast

Episode Links

• CALayer Class Reference
• CABasicAnimation Class Reference

Adding the shine layer

We'll start by adding a CALayer on top of our imageView. The contents of the layer will be the highlighted image.

    CGFloat width = self.image.size.width;
    CGFloat height = self.image.size.height;
    
    CALayer *shineLayer = [CALayer layer];
    UIImage *shineImage = [UIImage imageNamed:@"logo-highlighted.png"];
    shineLayer.contents = (id)[shineImage CGImage];
    shineLayer.frame = CGRectMake(0, 1, width, height);

Adding the mask

Next we need to create another layer to mask the shine layer. This layer will be smaller, and positioned off the left side of the shine layer.

    CALayer *mask = [CALayer layer];
    mask.backgroundColor = [[UIColor clearColor] CGColor];
    UIImage *maskImage = [UIImage imageNamed:@"logo-mask.png"];
    mask.contents = (id)[maskImage CGImage];
    mask.contentsGravity = kCAGravityCenter;
    mask.frame = CGRectMake(-width, 0, width * 1.25, height);

Note that you might want to play around with the frame. Here we're creating a frame that is wider than the image we're masking so that the mask won't be initially visible.

Animating the mask

The last step is to animate the mask across the image. This is easily done with a CABasicAnimation.

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position.x"];
    anim.byValue = @(width * 2);
    anim.repeatCount = HUGE_VALF;
    anim.duration = 3.0f;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

Wrapping up

The last thing we need to do is add the layers, mask the shine layer, and set the mask layer's animation.

    [self.layer addSublayer:shineLayer];
    shineLayer.mask = mask;
    
    [mask addAnimation:anim forKey:@"shine"];

And that's it! Pretty easy to accomplish for a neat little effect.