iOS 7.1 Slide To Unlock Text Animation

Question

I'm not sure if this has been asked before, but I'm having a hard time finding it. Perhaps I'm not using the right search terms, so if an answer already exists, if someone could point me in the right direction, it'd be most appreciated!

I just noticed that the glimmer animation on the "slide to unlock" text of the lockscreen has changed with the iOS 7.1 update. The spotlight now has an ovular / diamond shape that cascades across the letters without appearing on the view behind it.

In the past, I've replicated this type of feature by changing the color of individual letters sequentially, but for this, the animation goes through the middle of the letters. Without affecting the background.

How can I replicate this?

Answer 1

You can animate label text and use custom slider for it, I hope it helps you:

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(myLabel.frame.size.width * -1, 0.0f,   myLabel.frame.size.width * 2, myLabel.frame.size.height);
// Animate the mask layer's horizontal position
CABasicAnimation *maskAnim = [CABasicAnimation animationWithKeyPath:@"position.x"];
maskAnim.byValue = [NSNumber numberWithFloat:myLabel.frame.size.width];
maskAnim.repeatCount = 1e100f;
maskAnim.duration = 1.5f;
[maskLayer addAnimation:maskAnim forKey:@"slideAnim"];
myLabel.layer.mask = maskLayer;

Answer 2

You should be able to use the mask property of CALayer to create a cutout of the contents of another layer.

Set the mask to contain your text (maybe a CATextLayer can work here). This is what Shimmer says it uses.

Answer 3

Make the foreground color of your label be a UIColor initiated with

+colorWithPatternImage or

-initWithPatternImage

using an animated image and setting the background color of the label to transparent. I've not tried this, but I don't see why it wouldn't work.

Answer 4

The best way to do this is with a multi layer object.

• Top: UILabel with opaque background and clear text

  • Clear text is rendered in drawRect: func through complicated masking process

• Middle: Worker View that is performing a repeating animation moving an image behind the top label

• Bottom: a UIView that you add the middle and top subview to in that order. Can be whatever color you want the text to be

An example can be seen here https://github.com/jhurray/AnimatedLabelExample

Answer 5

The most effective way I've found to recreate the glimmering text effect is to use the Shimmer Cocoapod created by Facebook. Below is the example image from the Shimmer GitHub repo, which is located at the following URL: https://github.com/facebook/Shimmer

Shimmer example

There are full instructions to install and use Shimmer on the repo, but the gist is that after installing the Cocoapod you'll add a special subview or layer into which will go the contents you wish to have glimmer/shimmer, then set the effect to start.

Answer 6

Try to have a semi-transparent foreground with transparent cutouts for the letters. The "glimmer" can be moved across behind the cutouts.

Answer 7

Make a layer on top that has cutout layers with an animated PNG or something as the background.

Under this layer, have another layer with exactly the reverse transparency (letters are opaque and space between letters is transparent.

This way, the user sees through the letters to the animation, and between the letters to whatever the letters are over.

Just make sure you have code to keep the layers in the right order.

Answer 8

I think that it's a semi transparent view, but it's a special view in which the drawrect is overridden to color each pixel of the letters with the same color (but stronger to make it visible) of the pixel in the view beneath it. Imagine this like the magnifying view. it displays a magnified version of the the view beneath it.