How to make a UIButton come alive?
Swift Programmers: Also check out my recent post- “How programming in Swift is different from that in Objective C? (Animated Buttons Example)” which explains how a UIButton can be animated using Swift.
The Problem:
We all have used buttons in developing iOS applications but when it comes to creating buttons for Games just dragging an instance of UIButton from from objects library does not suffice. In such cases, of course, we would like to create a custom button in which we would like to assign an image of our choice. Custom buttons created in this way provide all the functionality of a typical UIButton. From the user’s perspective, if she touches this button, it becomes slightly darker in shade (this happens automatically because adjustsImageWhenHighlighted is true by default). However, in certain situations we may want the button to show an animation, a sort of eye-candy or a reward to the user when she touches it, and then stop the animation when the user removes her touch. For example, you are developing a game on Diwali (the biggest festival in India also called as the Indian Festival of Lights) and would like to show sparkling animation of fireworks when user touches any button.
(Those who have worked on Flash and ActionScript know that this is actually very easy to achieve in AS. In fact all one has to do is place the animation MovieClip in the “over” state of the button and the button is ready to use. However it can also be done when programming for iPhone/iPad with a little effort, and at the same time it also gives you the control of the animation playing, which is not easy to achieve in AS)
The Approach:
We know that UIButton is essentially a subclass of UIView and we can always add a subview to a view. UIImageView is a class that helps us to not only display a single image but also animate a series of images (an array of UIImage objects). Additionally, it also provides control over the behavior of the animation viz: starting the animation, stopping the animation and adjusting the frame rate or the speed of animation. We create an instance of an array of UIImages and assign it to the animationImages property of the UIImageView. After which we are ready to add it as a subview of the button. Rest is taken care of by the methods of the UIImageView class.
An Example:
In this example (you can download the zip for XCode here) we create a custom button of a heart and would like it to show animated stars over the heart when the user touches the button. When the touch is removed the button ceases to display the star animation and shows the normal image.
Normal State
Animation on Button – Representative Graphic
In the code snippet given below, two methods startAnimatingButton and stopAnimatingButton (please read the code given below) are invoked by the touchDown and touchUpInside button handlers. Please note that the UIImageView and its corresponding animation is created on the fly when the user touches the button and is removed instantaneously when the touch is removed. This approach helps when the user is not expected to use a button very often; for example, when we implement a Purchase/Restore Button for In-App Purchase or a Restart Button one the Game-end Screen. If we expect the user to press the button frequently (for example, if a button is part of gameplay, which is pressed quite often) then we would like to store the UIImageView as an instance and would like to just add or remove it from the button without destroying it. I leave that to your judgement. Here are the two methods which are the meat of the implementation.
//===============================================================
//Creates and play the animation sequence inside the button
//===============================================================
-(void) startAnimatingButton{
//Create an image view of the size of image used for the button's normal state
iv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"heart.png"]];
//Assign an array of images which will be used in the animation sequence
iv.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:@"heart1.png"],
[UIImage imageNamed:@"heart2.png"],
[UIImage imageNamed:@"heart3.png"],
[UIImage imageNamed:@"heart4.png"],
nil];
//Set the frame rate (speed) of the animation sequence
iv.animationDuration = 0.5;
//We have to explicitly start (and also stop) the animation in a UIImageView
[iv startAnimating];
//Add the Image View as subview of the button
[button addSubview:iv];
//Release the Image View
[iv release];
}
//===============================================================
//Stops the animation and removes the Image View from the button
//===============================================================
-(void) stopAnimatingButton{
//Stop the animation playing inside the button
[iv stopAnimating];
//Remove the ImageView from the Button hierarchy (as it is no longer required)
[iv removeFromSuperview];
//Set the ImageView pointer to nil
iv = nil;
//Restore the normal image of the button
[button setImage:[UIImage imageNamed:@"heart.png"] forState:UIControlStateNormal];
}
-(IBAction) onTouchDownOfButton:(id) sender{
//Start the process of creating and playing the animation
[self startAnimatingButton];
}
-(IBAction) onTouchUpInsideOfButton:(id) sender{
//Stop Button Animation
[self stopAnimatingButton];
}
For those who would like run this example in XCode here is the project zip to download.
For Swift Programmers: In case you are using Swift as your primary programming language, “How programming in Swift is different from that in Objective C? (Animated Buttons Example)“, illustrates the same project of animating buttons in Swift.
— §§§ —
iOS app development trainings in Noida Gurgaon Delhi NCR | Indian iOS Games and apps developers | games and apps developer & producer india | iOS games and applications development Delhi NCR Noida Gurgaon India | iPhone & iPad games for eLearning | ios application development in swift objective C India | iPhone iPad games & apps development in Delhi NCR Noida Gurgaon | iPhone & iPad Application development in India | iOS apps and games development courses & trainings in Delhi NCR Noida Gurgaon India | iOS trainings courses workshops in swift programming in India at Delhi NCR Noida Gurgaon | Xcode iOS trainings and courses in swift for corporates & companies | iPhone iPad based game development in Gurgaon Noida Delhi NCR India | iPhone development trainings & classes in swift & objective C | Apple development training courses Delhi NCR Gurgaon Noida | iPhone app and game development courses workshops in swift | iOS trainings for corporates & companies india | mobile apps development india
C-ing it Objective-ly & Swift-ly 