CODEWITHSUNDEEP
objective-ciosuitextfielduicolor
foho
foho

Reputation: 779

UITextField border animation

I'm trying to animate UITextField border color (fade in). Here is what I try

tmp.layer.borderColor= [UIColor colorWithRed:255.0 green:0.0 blue:0.0 alpha:0.0].CGColor;
tmp.layer.borderWidth = 1.0f;

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:2];
tmp.layer.borderColor= [UIColor colorWithRed:255.0 green:0.0 blue:0.0 alpha:1.0].CGColor;
[UIView commitAnimations];

The code above adds red border to the textFields but with no animation.

Upvotes: 3

Views: 2304

Answers (2)

SirKaiserKai
SirKaiserKai

Reputation: 1515

I ran into trouble regarding animating the borders of a UITextField so I'd like to provide my solution. I was able to accomplish my task using CABasicAnimation to perform the UITextField animations.

Below is the code block:

textField.layer.borderWidth = 1.0f;

[CATransaction begin]; {
    [CATransaction setCompletionBlock:^{
        // How the textField should look at the end of the animation.
        textField.layer.borderColor = [UIColor colorWithRed:255.0 green:0.0 blue:0.0 alpha:1.0].CGColor;

    }];

    // The keyPath specifies which attribute to modify. In this case it's the layer's borderColor.
    CABasicAnimation *colorAnimation = [CABasicAnimation animationWithKeyPath:@"borderColor"];

    // fromValue provides the beginning state of the animation.
    colorAnimation.fromValue = (__bridge id)[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.0].CGColor;

    // The to value is the final state of the animation. NOTE: That upon completion of the animation is removed.
    colorAnimation.toValue   = (__bridge id)[UIColor colorWithRed:255.0 green:0.0 blue:0.0 alpha:1.0].CGColor ;
    color.duration = 2.0;

    // Finally you add the animation to the textField's layer.
    [textField.layer addAnimation:colorAnimation forKey:@"color"];

} [CATransaction commit];

Now the animation is merely a layer imposed temporarily over the existing one. So in order to make the end result of the animation permanent there are two methods:

  1. You can set the final result to the UITextField layer in the CATransaction completion block. As seen in the above code.

  2. By setting the animation's receiver as visible in it's final state and preventing the removal of the animation. As seen below:

        // Prevents the removal of the final animation state from visibility. 
    // Add these before you add the animation to the textField's layer.
    colorAnimation.fillMode = kCAFillModeForwards;
    colorAnimation.removedOnCompletion = false;

Upvotes: 2

Ariel
Ariel

Reputation: 2440

Those properties are not animatable. Yu'll need to remove your text field borders and create some other UIView with the borders you want in back of your text field. Also set it's alpha property to 0.0 and animate it to 1.0 when you need. (alpha property is animatable, so this will do the work for you).

EDIT.

tmp.layer.borderColor= [UIColor redColor].CGColor;
tmp.layer.borderWidth = 1.0f;
tmp.alpha = 0.0;
//somewhere here should be the [someView addSubview:tmp];
//and after that should go the [someView addSubview:yourTextFieldView];

//somewhere later in your code, when you need the animation to happen
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:2];
tmp.alpha = 1.0;
[UIView commitAnimations];

Also you may use the so-called one-stage animation like so:

[UIView animateWithDuration:2.0 animations:^{
    tmp.alpha = 1.0;
}];

Upvotes: 0

Related Questions