How to create iPhone/iPad’s “Slide to Unlock” animation ?

This is how Apple implemented “Slider to Unlock” or “Slide to Power off” animation.

In .h file

UISlider *slider;

BOOL touchIsDown;

CALayer *textLayer;

 

 

– (void)viewDidLoad

{

self.view.layer.backgroundColor = [[UIColor grayColor] CGColor];

UIImageView *sliderBackView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@”SliderBack1.png”]];

sliderBackView.frame = CGRectMake(20, 20, 260, 50);

sliderBackView.userInteractionEnabled = YES;

[self.view addSubview:sliderBackView];

 

slider = [[UISlider alloc] initWithFrame:CGRectMake(5, 12, 250, 27)];

[slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];

[slider addTarget:self action:@selector(sliderUp:) forControlEvents:UIControlEventTouchUpInside];

[slider addTarget:self action:@selector(sliderDown:) forControlEvents:UIControlEventTouchDown];

slider.minimumValue = 0;

slider.maximumValue = 100;

slider.value = 0;

slider.continuous = YES;

slider.backgroundColor = [UIColor clearColor];

[slider setMinimumTrackImage:[UIImage imageNamed: @”transSlider.png”] forState:UIControlStateNormal];

[slider setMaximumTrackImage:[UIImage imageNamed: @”transSlider.png”] forState:UIControlStateNormal];

[slider setThumbImage:[UIImage imageNamed:@”SliderThumb.png”] forState:UIControlStateNormal];

[sliderBackView addSubview:slider];

 

NSString *labelText = @”Slide to Unlock”;

UIFont *labelFont = [UIFont systemFontOfSize:18];

CGSize labelSize = [labelText sizeWithFont:labelFont];

 

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20.0, 0.0, labelSize.width, labelSize.height)];

label.textColor = [UIColor whiteColor];

label.textAlignment = UITextAlignmentCenter;

label.backgroundColor = [UIColor clearColor];

label.font = labelFont;

label.text = labelText;

 

UIGraphicsBeginImageContext(label.bounds.size);

[label.layer renderInContext:UIGraphicsGetCurrentContext()];

CGImageRef viewImage = [UIGraphicsGetImageFromCurrentImageContext() CGImage];

UIGraphicsEndImageContext();

 

UIImage *textImage = [UIImage imageWithCGImage:viewImage];

 

CGFloat textWidth = textImage.size.width;

CGFloat textHeight = textImage.size.height;

 

textLayer = [CALayer layer];

textLayer.contents = (id)[textImage CGImage];

textLayer.frame = CGRectMake(78.0f, 15.0f, textWidth, textHeight);  //set frame here

 

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:0.0f green:0.0f blue:0.0f alpha:0.15f] CGColor];

maskLayer.contents = (id)[[UIImage imageNamed:@”Mask.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(-textWidth, 0.0f, textWidth * 2, textHeight);

 

// Animate the mask layer’s horizontal position

CABasicAnimation *maskAnim = [CABasicAnimation animationWithKeyPath:@”position.x”];

maskAnim.byValue = [NSNumber numberWithFloat:textWidth];

maskAnim.repeatCount = 1e100f;

maskAnim.duration = 1.5f;

[maskLayer addAnimation:maskAnim forKey:@”slideAnim”];

 

textLayer.mask = maskLayer;

[sliderBackView.layer addSublayer:textLayer];

 

 

[super viewDidLoad];

}

 

– (IBAction) sliderAction : (id) sender

{

NSLog(@”%f”, slider.value);

textLayer.opacity = MAX(0.0, 1.0 – (slider.value * 3.5));

 

if(slider.value >= 45)

{

//slider.value = slider.maximumValue;

 

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationDuration:0.3];

slider.value = slider.maximumValue;

[UIView commitAnimations];

 

textLayer.opacity = MAX(0.0, 1.0 – (slider.value * 3.5));

 

}

else

{

if(slider.value >= 5)

{

textLayer.opacity = textLayer.opacity-0.05;

}

}

 

}

 

– (void) sliderUp: (UISlider *) sender

{

if (touchIsDown)

{

touchIsDown = NO;

 

if(slider.value < 45)

{

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationDuration:0.3];

slider.value = slider.minimumValue;

[UIView commitAnimations];

 

textLayer.opacity = 1.0;

}

}

}

 

– (void) sliderDown: (UISlider *) sender

{

touchIsDown = YES;

 

}

This is complete code for Lazy People..


Need more help?

Hi there, was your problem or query resolved? If not & need more assistance, please do reach out to us at info@nanostuffs.com, we'll be more than delighted to help. Nanostuffs has 7+ years of extensive Salesforce & iOS/Android experience.
Holler Box