CODEWITHSUNDEEP
iosanimation
Pinch
Pinch

Reputation: 2888

iOS7 "Slide to unlock" animation on a UILabel

How to make an animation similar to "Slide to unlock" text on a UILabel? (The text gradient is animated left->right) and then the text color adapts to the background.

enter image description here

Upvotes: 1

Views: 2321

Answers (1)

Tommy
Tommy

Reputation: 100632

I think the key to performing this effect is CALayer mask. You can attach a second CALayer to any existing layer as its mask. Then:

The [mask] layer’s alpha channel determines how much of the [parent] layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

So the text is going to be the mask and the moving colour is going to be the parent.

The easiest way to deal with the text will be to use a CATextLayer. The easiest way to make the colour gradient will be CAGradientLayer.

To animate the gradient you can use Core Animation, since all properties are animatable. I guess locations is likely to be the best way to achieve the sliding animation.

For convenience you'll probably want to wrap all of that up into a UIView, but you can add layers directly if you prefer.

Upvotes: 6

Related Questions