iOS gradient fill in text animation

Question

In iOS Objective C, I need the text fill animation with gradient, the animation will fill the gradient from bottom to top (Vertically). I am not good in core graphics or animation things in iOS. Has anyone did this kind of task before.

Any help would be really appreciated.

Answer 1

Here is an idea. Use two labels and animate the second one in. This has its limits, to go further you need to either use the labels' layers or to convert it to UIImage's and then animate that in. This animates from the center out which is not entirely what you are looking for, but just an idea for now.

The storyboard contains just one button which you need to wire up to kick off the animation.

EDIT

Previously it animated from the center outwards but I've changed it to animate from the bottom to the top.

- ( void ) viewDidLoad
{
    [super viewDidLoad];

    // Start label
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake ( 10, 50, 100, 20 )];
    
    // Configure
    label.text = @"Label";
    label.textColor = UIColor.redColor;
    label.sizeToFit;
    [self.view addSubview:label];

    // The label we animate in
    UILabel * label1 = [[UILabel alloc] initWithFrame:CGRectMake ( 10, 50, 100, 20 )];
    
    // Configure
    label1.text = @"Label";
    label1.textColor = UIColor.blueColor;
    label1.clipsToBounds = YES;
    label1.contentMode = UIViewContentModeBottom;
    label1.sizeToFit;

    // We keep a weak reference to it
    [self.view addSubview:label1];
    self.label1 = label1;
}

- ( IBAction ) buttonAction:( id ) sender
{
    CGRect f = self.label1.frame;
    CGRect b = self.label1.bounds;

    // Need to animate both the bounds and the frame's position
    self.label1.frame = CGRectMake( f.origin.x, f.origin.y + f.size.height / 2, f.size.width, f.size.height );
    self.label1.layer.bounds = CGRectMake( 0, 0, b.size.width, 0 );

    [UIView animateWithDuration:2
             animations:^{

        self.label1.frame = f;
        self.label1.layer.bounds = b;

    }];

}

Note that you need to add a weak property to the view controller, e.g.

@property (nonatomic,weak) UILabel * label1;

as you need this later to be able to animate.