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..
