16

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.

iOS 7.1 Lock Screen Text Animation

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?

Logan
  • 52,262
  • 20
  • 99
  • 128
  • Maybe an opaque foreground with transparent cutouts for the letters? You could make the oval shape move across in the background, on top of a heavier opacity. – Blue Ice Mar 11 '14 at 21:00
  • @BlueIce That could work, but what I'm really curious about is how they achieved it over a transparent background the way it is here. – Logan Mar 11 '14 at 21:01
  • It could be done as I suggested, just by only using variable weights of opacity as the differentiating characteristic instead of color. The "glimmer" could be achieved by a very opaque or a very white tint. – Blue Ice Mar 11 '14 at 21:04
  • But wouldn't the opaque view block whatever's underneath it, for instance on this, I can still see my lockscreen background around the letters. The method you're suggesting sounds like the letters would be transparent, but the space around them would be opaque. Am I misunderstanding? – Logan Mar 11 '14 at 21:35
  • I was thinking that it would be semi-opaque, not fully opaque. So a blend of opaque and transparent. – Blue Ice Mar 11 '14 at 21:38
  • I'll see if that works. I think I might try a combination of the new 'snapshotViewAfterScreenUpdates:' api and use this view as the opaque cutout. Thanks for the suggestions. – Logan Mar 11 '14 at 21:47
  • 1
    I think what you need is more layers. I've done something similar with a loupe that required opaqueness and transparency of different layers. You want the transparent cutouts, as described, so that a layer below the cutout is seen through it. Encapsulate both of these in another layer whose transparency is the reverse. This way the glimmer is visible through the cutout of the letters but is opaque relative to what is under it. – Victor Engel Mar 11 '14 at 22:12
  • On second thought, I don't think more layers are needed. Just make the foreground color be a UIColor initiated with +colorWithPatternImage or -initWithPatternImage using an animated image and setting the background color to transparent. I've not tried this, but I don't see why it shouldn't work. – Victor Engel Mar 12 '14 at 17:23
  • We think very much alike! I'm currently trying to implement this with some of the new screenshot api's to cast what looks like normal background, but what is actually a bitmap as colorWithPattern with a hole in it. Have you had any luck, or are you just theorizing. – Logan Mar 12 '14 at 17:35

8 Answers8

8

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;
Asbjørn Ulsberg
  • 8,721
  • 3
  • 45
  • 61
Hitesh Vaghela
  • 1,635
  • 1
  • 11
  • 11
4

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.

Taum
  • 2,511
  • 18
  • 18
1

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.

Victor Engel
  • 2,037
  • 2
  • 25
  • 46
  • Can you use an animated image as colorWithPattern? – Logan Mar 12 '14 at 17:36
  • I think so. Unfortunately, I can't test it out right now, because I upgraded to iOS7.1, which requires the new Xcode, which will take at least an hour to download. :( If you can't use an animated png, you can use a set of images, I believe. I've done this with UIViews, but not for UILabels, which are just UIView subclasses. Edit - never mind. I was thinking of UIImageView where you can set up an array of images for animation. – Victor Engel Mar 12 '14 at 17:46
  • If the animation doesn't work, do a search for initWithPatternImage animation for several solutions, including this one: http://stackoverflow.com/questions/16461469/animating-uiimageview-with-colorwithpatternimage – Victor Engel Mar 12 '14 at 17:56
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

jhurray
  • 81
  • 4
1

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.

Ian Rahman
  • 315
  • 3
  • 7
0

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

Blue Ice
  • 7,888
  • 6
  • 32
  • 52
0

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.

Victor Engel
  • 2,037
  • 2
  • 25
  • 46
  • I'm having trouble getting past step 1, can you show me what I'm doing wrong there? -- edits to question – Logan Mar 11 '14 at 23:42
  • You may also want to take a look at this question, which is similar and has sample code. http://stackoverflow.com/questions/17817378/ios-uiview-subclass-draw-see-through-text-to-background – Victor Engel Mar 12 '14 at 00:04
  • Yea, that's what I've been going off of, I was trying to get it to work another way, I haven't been able to get that implementation just right. Thanks – Logan Mar 12 '14 at 01:30
0

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.

blackmoon
  • 362
  • 1
  • 11