Fading UILabel in from left to right - ios

Question

I want to animate a UILabel to fade text in from left to right. My code below fades the entire UILabel in at once, but I would like to go letter by letter or word by word. Also, words can be added to this text, and when that happens I only want to fade in the new words, not the entire UILabel again.
__weak ViewController *weakSelf = self;
weakSelf.label.alpha = 0;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn
animations:^{ weakSelf.label.alpha = 1;}
completion:nil];

Answer 1

I have done this once before with decent results. You will probably have to tweak it to your preference.
First step is to create a gradient image to match the way you want the text to fade in. 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;
}
That code creates an black image that should fade from left to right.
Next, when you create you label, you need to set its text color based from a pattern made from the image we just generated.
self.label.alpha = 0;
self.label.textColor = [UIColor colorWithPatternImage:[self labelTextGradientImage]];
Assuming that works, the last step is to animate the label into view and change its text color while that happens.
[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 funky because the UILabel's textColor property doesn't seem to be animatable with a UIViewAnimation.

Answer 2

Well, I know how I would do it. I would make a mask containing a gradient, and animate the mask across the front of the label.
Here's the result when I do that (don't know whether it's exactly what you have in mind, but perhaps it's a start):

Answer 3

I managed to achieve this and created a function within a UIView extension:
#discardableResult public func addSlidingGradientLayer(withDuration duration: Double = 3.0, animationDelegate delegate: CAAnimationDelegate? = nil) -> CAGradientLayer {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [UIColor.white.cgColor, UIColor.clear.cgColor, UIColor.clear.cgColor]
gradientLayer.startPoint = CGPoint(x: -1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
let gradientAnimation = CABasicAnimation(keyPath: "startPoint")
gradientAnimation.fromValue = gradientLayer.startPoint
gradientAnimation.toValue = gradientLayer.endPoint
gradientAnimation.duration = duration
gradientAnimation.delegate = delegate
gradientLayer.add(gradientAnimation, forKey: "startPoint")
layer.mask = gradientLayer
return gradientLayer
}
To begin with we create a CAGradientLayer instance that we use as a mask for a view (in this case a UILabel).
We then create a CABasicAnimation instance, which we use to animate the startPoint of the CAGradientLayer. This has the effect of sliding the startPoint from left to right with some supplied duration value.
Finally, we an also the delegate of the CABasicAnimation. Then, if we adhere to the CAAnimationDelegate protocol, we can execute some code after the animation completes.
This is how you might use this extension:
class ViewController: UIViewController {
#IBOutlet weak var someLabel: UILabel!
private func configureSomeLabel() {
someLabel.text = "Sliding into existence!"
someLabel.sizeToFit()
someLabel.addSlidingGradientLayer(withDuration: 3.0, animationDelegate: self)
}
override func viewDidLoad() {
super.viewDidLoad()
configureSomeLabel()
}
}
Where someLabel has been hooked up to your storyboard. And as we've assigned this view controller as the animation delegate we need to add:
extension ViewController: CAAnimationDelegate {
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
someLabel.layer.mask = nil
}
}
where I have chosen to remove the masking layer.
Hope this helps someone!