Question

I’m trying to get my view to do a nice shining animation to catch the user’s eyes. Any ideas how to implement this?

Here’s what I have so far:

[UIView beginAnimations:@"viewShine" context:self.view];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationRepeatCount:0];
[UIView setAnimationDuration:2];
[UIView setAnimationDelegate:self];
//Do nice shining animation here
[UIView commitAnimations];

By shine I mean something like what happens to the “slide to unlock” text when you open the iPhone, or anything that’s easy to do and looks nice.

Answer 1

Figured it out.

Here’s my code in case you want to do something similar:

UIView *whiteView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[whiteView setBackgroundColor:[UIColor whiteColor]];
[whiteView setUserInteractionEnabled:NO];
[self.view addSubview:whiteView];

CALayer *maskLayer = [CALayer layer];

// Mask image ends with 0.15 opacity on both sides. Set the background color of the layer
// to the same value so the layer can extend the mask image.
maskLayer.backgroundColor = [[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.0f] CGColor];
maskLayer.contents = (id)[[UIImage imageNamed:@"ShineMask.png"] CGImage];

// Center the mask image on twice the width of the text layer, so it starts to the left
// of the text layer and moves to its right when we translate it by width.
maskLayer.contentsGravity = kCAGravityCenter;
maskLayer.frame = CGRectMake(-whiteView.frame.size.width, 
                             0.0f, 
                             whiteView.frame.size.width * 2, 
                             whiteView.frame.size.height);

// Animate the mask layer's horizontal position
CABasicAnimation *maskAnim = [CABasicAnimation animationWithKeyPath:@"position.x"];
maskAnim.byValue = [NSNumber numberWithFloat:self.view.frame.size.width * 9];
maskAnim.repeatCount = HUGE_VALF;
maskAnim.duration = 3.0f;
[maskLayer addAnimation:maskAnim forKey:@"shineAnim"];

whiteView.layer.mask = maskLayer;

Using this image: