How to Create an Animated Button in iOS

[Treehouse™ presents] 0:00 [Quick Tips: How to Create an Animated Button in IOS with Amit Bijlani] 0:03 Hi, I'm Amit and in this Treehouse QuickTip, we will learn how to create an animated button. 0:05 This animated button will have a glowing effect. 0:12 This effect is just a series of images that is animated over a duration. 0:16 So you can add any kind of effect you like such as scale, transform, warp, whatever your heart desires 0:22 or more likely what should designer approves of. 0:29 The main ingredients for an animated button are images. 0:34 The images must me be names such that you have the final name 0:37 and the numerical sequence is a suffix to the filename. 0:40 As you can see it says button glow and then followed by the numerical sequence. 0:45 And the secret to a smooth animation is of course more images. 0:51 If you are familiar with the term frames per second, then you should be familiar 0:56 with the fact that if you have 24 frames or images displayed in a second 1:01 then you can achieve a smooth animation. 1:06 You can generate these images using any kind of graphical software. 1:09 I will use the animation feature in Photoshop. 1:13 The first order of business is to add our images to the project. 1:16 Now, I've already created a single view application with a 200x200 button right in the center 1:21 and what we'll going to do is add our images to the project. 1:29 We'll select add files. I'm just going to go ahead and add all the images. 1:35 Here are all our images. 1:42 The next thing we need to do is make sure that we have an IB outlet for our button. 1:46 We don't have one yet so let's go ahead and create one. 1:52 I'm going to hide the project navigator and then show the assistant editor 1:57 and using the control key, I'm going to create a IB outlet. 2:03 I'll simply call this "button." 2:08 Going back to the standard editor and showing the navigator. 2:12 Let's go into our viewController.m. 2:17 Now in the viewDidLoad method, we will refer to our IB outlet button. 2:21 Let me just copy some code here. 2:28 We will use set background image which is a normal method for the button 2:31 where you can set the background image. 2:36 Now what's interesting here is that when I create the UI image, 2:39 I'm not using the method image name. 2:43 I'm using the method animated image name and I'm providing it with the filename 2:46 without the numerical sequence and then provide it with a duration. 2:51 Here I'm stating the duration to be four and the control state normal. 2:58 So, if I run this application now, you will see this glowing button. 3:05 It's basically glowing in and out, and I'll just keep repeating this animated sequence. 3:09 Now for bonus points, I will make the button shrink when you tap it. 3:17 I have already added the images necessary for this. 3:21 All I need to do is add some code. 3:25 So going back-- 3:30 There are few things different in this line of code. 3:34 I have of course a different filename because the button press animation is different. 3:38 The duration is one second and the four state is highlighted. 3:43 So let's run our application once again. 3:48 And now when I tap over the button, you will notice that the button shrinks. 3:51 With this quick tip, I have to stay with great power comes great responsibility. 3:58 Use animated buttons wisely and have fun. 4:05 [Treehouse™] 4:10 If you'd like to see more advance videos and tutorials like this one, 4:11 go to teamtreehouse.com and start learning for free. 4:15 [Treehouse™] 4:18

You need to sign up for Treehouse in order to set up Workspace

Sign up