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 c

Answer 1

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 2

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 3

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 4

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

Answer 5

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.

Answer 6

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.