Fading UILabel from left to right

I want to animate the UILabel to wipe the text from left to right. My code below immediately disappears in the whole UILabel, but I would like to go literally or in word. Also, words can be added to this text, and when that happens, I want to disappear again in new words, not in the whole UILabel.

__weak ViewController *weakSelf = self;
weakSelf.label.alpha = 0;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn
                 animations:^{ weakSelf.label.alpha = 1;}
                 completion:nil];

      

+3


source to share


2 answers


Well, I know how I will do it. I would make a mask containing the gradient and animate the mask on the front of the label.

Here is the output when I do it (I don't know if you mean it exactly, but maybe this is the beginning):



enter image description here

+4


source


I've done this once before with decent results. You may have to customize it as you see fit.

The first step is to create a gradient image according to how you want the text to fade. If your text color is black, you can try this.

- (UIImage *)labelTextGradientImage
{
    CAGradientLayer *l = [CAGradientLayer layer];
    l.frame = self.label.bounds;
    l.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0] CGColor], (id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:1] CGColor], nil];
    l.endPoint = CGPointMake(0.0, 0.0f);
    l.startPoint = CGPointMake(1.0f, 0.0f);

    UIGraphicsBeginImageContext(self.label.frame.size);
    [l renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *textGradientImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return textGradientImage;
}

      

This code creates a black image that should fade from left to right.

Then when you create a label, you need to set its text color based on a template made from the image you just created.



self.label.alpha = 0;
self.label.textColor = [UIColor colorWithPatternImage:[self labelTextGradientImage]];

      

Assuming this works, the final step is to animate the shortcut in the view and change its text color when it does.

[UIView transitionWithView:self.label duration:0.2 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    self.label.textColor = [UIColor blackColor];
    self.label.alpha = 1;
} completion:^(BOOL finished) {
}];

      

The animation code is a little scary because the UILabel's textColor property doesn't look like animating with a UIViewAnimation.

+3


source







All Articles