Timering

Purp

UITextField Animation 1: fade in & out, background (opacity) CABasicAnimation

In this Xcode 6.1 and IOS 8.1 UITextField Animation tutorial, we create a fade in & out animation, and with 2 UITextField we create dimming and lighting CABasicAnimation when the Textfield become FirstResponder, and when the user end editing. It could be very useful, if you would like to create a nice interface animation for a basic form.

Steps:

  1. Create ViewController, create 2 TextField and add UITexField delegate codes
  2. Add SecondView to self.view, and add TextFields to new UIView subviews
  3. Add CABasicAnimations: dimming and lighting
  4. Add the code which handles the animation
  5. Test the code

Part of the series:

Coming soon.

Video tutorial:

1. Create ViewController, create 2 TextField and add UITexField delegate codes

1.1. Set the ViewController Simulated Metrics Size attribute from Inferred to one of iPhone size.

SpotlessiCode | IOS Tutorial | UITextField Animation 1_1

1.2. Add 2 TextField to your ViewController

In Assistant editor ctrl+drag, so create IBOutlet with names: TextField1, TextField2

SpotlessiCode | IOS Tutorial | UITextField Animation 1_2

1.3. in ViewController.h file add UITexFieldDelegate protocol

SpotlessiCode | IOS Tutorial | UITextField Animation 1_3_1

Probably you will find these line there:

Attention! You need to delegate the TextFields!
If you forgot this step, your TextField would not call the DidBeginEditing and other codes. At the Storyboard you can click on Connection inspector and Ctrl-drag from Outlets delegate to the viewController:

SpotlessiCode | IOS Tutorial | UITextField Animation 1_3_2

1.4. in ViewController.m :

Synthesize UITexFields and add placeholders…
then add these codes:

  • - (void)textFieldDidBeginEditing:(UITextField *)textField // When start to edit the placeholder will disappear
  • - (void)textFieldDidEndEditing:(UITextField *)textField //When end editing - which text show in the TexField placeholder
  • -(BOOL)textFieldShouldReturn:(UITextField *)textField{ //Keyboard Return button - end editing, dismiss keyboard
  • -(void) touchesBegan :(NSSet *) touches withEvent:(UIEvent *)event // If you touch outside of TextField your editing will stop and keyboard dismiss

2. Add SecondView to self.view, and add TextFields to new UIView subviews

2.1. Create 3 new UIView in ViewController.h and synthesize in ViewController.m

  • secondView will be the self.view’s subview
  • textView1 will be the UIView of TextField1
  • textView2 will be the UIView of TextField2

SpotlessiCode | IOS Tutorial | UITextField Animation 2_1_1

SpotlessiCode | IOS Tutorial | UITextField Animation 2_1_2

2.2. set the new views frame and create subviews hierarchy

In ViewController.m viewDidLoad set the new views frame and create subviews hierarchy with this code:

Probably you will find these line there:

3. Add CABasicAnimations: dimming and lighting

3.1. Add Animation properties as CAAnimation

In ViewController.h add dimmingAnimation and lightingAnimation property as CAAnimation, after that you can synthesize in ViewController.m file.

SpotlessiCode | IOS Tutorial | UITextField Animation 3_1

3.2. Change the background from white to gray

In ViewController.m file create CABasicAnimation which changes the background from white to gray and vice versa:

You can use this simple fromValue toValue animation to change the background. But you need the secondView to do this and manage which TextField’s UIView should bring to Front.

So you need a handle when starting the dimmingAnimation and when starting the lightingAnimation.

4. Add the code which handles the animation

4.1. Create animViewIn handle code, and this will happen when start editing:

4.2. Create animViewOut handle code, and this will happen when stopping editing:

4.3. Call animViewIn and animViewOut

Call animViewIn when textFieldDidBeginEditing:, and call animViewOut when textFieldDidEndEditing:

SpotlessiCode | IOS Tutorial | UITextField CABasicAnimation tutorial Screenshot 4_3

Probably you will find these line there:

5. Test

(Clear the text in the TextFields on the storyboard, and your placeholders will show in the simulator)
Play in Simulator and enjoy it :)

6. Download from Git

You can download the test app from this git!

Share & Follow

If you would like to be notified of my new solutions, please subscribe to my Newsletter or my youtube channel and/ or follow me on Facebook or Twitter! Check Footer section for these opportunities!