Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone shine animation

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.

like image 814
Rob Avatar asked Jul 03 '11 18:07

Rob


4 Answers

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;
}
like image 187
user3072402 Avatar answered Nov 03 '22 01:11

user3072402


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:

enter image description here

like image 23
Rob Avatar answered Nov 03 '22 02:11

Rob


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
    }
like image 2
Rocky Perera Avatar answered Nov 03 '22 01:11

Rocky Perera


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.

like image 1
Fishman Avatar answered Nov 03 '22 02:11

Fishman