iPhone shine animation - iphone

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

I wrote a method that can be called on any UIView to give it the shine you are looking for without needing to include an image:
-(void)AddShineAnimationToView:(UIView*)aView
{
CAGradientLayer *gradient = [CAGradientLayer layer];
[gradient setStartPoint:CGPointMake(0, 0)];
[gradient setEndPoint:CGPointMake(1, 0)];
gradient.frame = CGRectMake(0, 0, aView.bounds.size.width*3, aView.bounds.size.height);
float lowerAlpha = 0.78;
gradient.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
(id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
(id)[[UIColor colorWithWhite:1 alpha:1.0] CGColor],
(id)[[UIColor colorWithWhite:1 alpha:1.0] CGColor],
(id)[[UIColor colorWithWhite:1 alpha:1.0] CGColor],
(id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
(id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
nil];
gradient.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.4],
[NSNumber numberWithFloat:0.45],
[NSNumber numberWithFloat:0.5],
[NSNumber numberWithFloat:0.55],
[NSNumber numberWithFloat:0.6],
[NSNumber numberWithFloat:1.0],
nil];
CABasicAnimation *theAnimation;
theAnimation=[CABasicAnimation animationWithKeyPath:#"transform.translation.x"];
theAnimation.duration = 2;
theAnimation.repeatCount = INFINITY;
theAnimation.autoreverses = NO;
theAnimation.removedOnCompletion = NO;
theAnimation.fillMode = kCAFillModeForwards;
theAnimation.fromValue=[NSNumber numberWithFloat:-aView.frame.size.width*2];
theAnimation.toValue=[NSNumber numberWithFloat:0];
[gradient addAnimation:theAnimation forKey:#"animateLayer"];
aView.layer.mask = gradient;
}

Answer 2

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:

Answer 3

Here is the swift code for the shine effect
class Animate {
/// Add a persistent shimmer animation. Usage: `Animate.shimmer(myView)`
static func shimmer(view: UIView) {
let gradient = CAGradientLayer()
gradient.startPoint = CGPointMake(0, 0)
gradient.endPoint = CGPointMake(1, -0.02)
gradient.frame = CGRectMake(0, 0, view.bounds.size.width*3, view.bounds.size.height)
let lowerAlpha: CGFloat = 0.7
let solid = UIColor(white: 1, alpha: 1).CGColor
let clear = UIColor(white: 1, alpha: lowerAlpha).CGColor
gradient.colors = [ solid, solid, clear, clear, solid, solid ]
gradient.locations = [ 0, 0.3, 0.45, 0.55, 0.7, 1 ]
let theAnimation : CABasicAnimation = CABasicAnimation(keyPath: "transform.translation.x")
theAnimation.duration = 4
theAnimation.repeatCount = Float.infinity
theAnimation.autoreverses = false
theAnimation.removedOnCompletion = false
theAnimation.fillMode = kCAFillModeForwards
theAnimation.fromValue = -view.frame.size.width * 2
theAnimation.toValue = 0
gradient.addAnimation(theAnimation, forKey: "animateLayer")
view.layer.mask = gradient
}
}
Swift 3.0
func shimmer(view: UIView) {
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: -0.02)
gradient.frame = CGRect(x: 0, y: 0, width: view.bounds.size.width*3, height: view.bounds.size.height)
let lowerAlpha: CGFloat = 0.7
let solid = UIColor(white: 1, alpha: 1).cgColor
let clear = UIColor(white: 1, alpha: lowerAlpha).cgColor
gradient.colors = [ solid, solid, clear, clear, solid, solid ]
gradient.locations = [ 0, 0.3, 0.45, 0.55, 0.7, 1 ]
let theAnimation : CABasicAnimation = CABasicAnimation(keyPath: "transform.translation.x")
theAnimation.duration = 2
theAnimation.repeatCount = Float.infinity
theAnimation.autoreverses = false
theAnimation.isRemovedOnCompletion = false
theAnimation.fillMode = kCAFillModeForwards
theAnimation.fromValue = -view.frame.size.width * 2
theAnimation.toValue = 0
gradient.add(theAnimation, forKey: "animateLayer")
view.layer.mask = gradient
}

Answer 4

It might be worth to mention: in case of shining progress label, like in facebook paper app, or iOS lock screen, you might consider using https://github.com/facebook/Shimmer.

Answer 5

Swift 5.0
func shimmer(){
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: -0.02)
gradient.frame = CGRect(x: 0, y: 0, width: self.bounds.size.width*3, height: self.bounds.size.height)
let lowerAlpha: CGFloat = 0.8
let solid = UIColor(white: 1, alpha: 1).cgColor
//let verdeVXM = UIColor(red:0.77, green:0.84, blue:0.00, alpha:1.0)
let clear = UIColor(white: 1, alpha: lowerAlpha).cgColor
gradient.colors = [ solid, solid, clear, clear, solid, solid ]
gradient.locations = [ 0, 0.3, 0.45, 0.55, 0.7, 1 ]
let theAnimation : CABasicAnimation = CABasicAnimation(keyPath: "transform.translation.x")
theAnimation.duration = 2
theAnimation.repeatCount = Float.infinity
theAnimation.autoreverses = false
theAnimation.isRemovedOnCompletion = false
theAnimation.fillMode = CAMediaTimingFillMode.forwards
theAnimation.fromValue = -self.frame.size.width * 2
theAnimation.toValue = 0
gradient.add(theAnimation, forKey: "animateLayer")
self.layer.mask = gradient
}