Animations provide fluid visual transitions between different states of your user interface. In iOS, animations are used extensively to reposition views, change their size, remove them from view hierarchies, and hide them. You might use animations to convey feedback to the user or to implement interesting visual effects.
In iOS creating the sophisticated animations doesn't require to write any drawing code.All the animation's techniques use the built in support of core animation . Both UIKit and Core animation provide support for animation .
The following UIView properties can be animated:
1) frame
2) bounds
3) backgroundColor
4) center
5) transform
6) alpha
7) contentStretch
Changing the value of these properties merely update the properties without any animation. To animate such a change we must change the value of these properties from animation block.
To understand any concept properly , example is the best way to demonstrate, so here is a simple example:
Assuming we have a single View application , that contains the login form:
userName -- UITextFiled
password -- UITextField
LogIn -- UIButton
In starting set the initial position of the view to outside the screen
In iOS creating the sophisticated animations doesn't require to write any drawing code.All the animation's techniques use the built in support of core animation . Both UIKit and Core animation provide support for animation .
The following UIView properties can be animated:
1) frame
2) bounds
3) backgroundColor
4) center
5) transform
6) alpha
7) contentStretch
Changing the value of these properties merely update the properties without any animation. To animate such a change we must change the value of these properties from animation block.
To understand any concept properly , example is the best way to demonstrate, so here is a simple example:
Assuming we have a single View application , that contains the login form:
userName -- UITextFiled
password -- UITextField
LogIn -- UIButton
In starting set the initial position of the view to outside the screen
-(void)viewWillAppear:(BOOL)animated{
super.viewWillAppear(animated)
username.center.x -= view.bounds.width;
password.center.x -= view.bounds.width;
}
In ViewDidAppear add the following code:
-(void)viewDidAppear:(BOOL)animated{
UIView.animateWithDuration(0.5, animations: {
// self.password.center.x += self.view.bounds.width;
self.username.center.x += self.view.bounds.width;
})
To animate the field in we call the UIView class method animateWithDuration(_:animations:).The animation starts immediately and animates over half a second; you set the duration via the first method parameter in the code.
We can also delay the animation:
UIView.animateWithDuration(0.5, delay: 0.6, options: nil, animations: {
self.username.center.x += self.view.bounds.width;
}, completion: nil)
The class method you use this time looks familiar, but it has a few more parameters to let you customize your animation:
- duration: The duration of the animation.
- delay :The amount of seconds UIKit will wait before it starts the animation.
- options: A bitmask value that allows you to customize a number of aspects about your animation. You’ll learn more about this parameter later on, but for now you can pass nil to mean “no options.”
- animations :The closure expression to provide your animations.
- completion: A code closure to execute when the animation completes; this parameter often comes in handy when you want to perform some final cleanup tasks or chain animations one after the other.
Animation Options:
options allow to customize the animation:
Repeating :
- .Repeat: Enable this option to makes your animation loop forever.
- .Autoreverse: Enable this option only in conjunction with .Repeat; this option repeatedly plays your animation in forward then in reverse.
UIView.animateWithDuration(2.5, delay: 0.9, options: .Repeat | .Autoreverse , animations: {
self.password.center.x += self.view.bounds.width
}, completion: nil)
}
Animation Easing:
To make animation more realistic, we use easing options:
You can choose from four different easing options:
- .Linear: This option applies no acceleration or deceleration to the animation.
- .CurveEaseIn : This option applies acceleration to the start of your animation.
- CurveEaseOut:This option applies deceleration to the end of your animation.
- .CurveEaseInOut:This option applies acceleration to the start of your animation and applies deceleration to the end of your animation.
UIView.animateWithDuration(2.5, delay: 0.9, options: .Repeat | .Autoreverse | .CurveEaseIn , animations: {
self.password.center.x += self.view.bounds.width
}, completion: nil)
}
References: https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/AnimatingViews/AnimatingViews.html
