iOS Development with Swift 2 - Animations

Advertisements

Previous Page
Next Page  

Animation is an important part of any Application as it draws user attention to the application. Animation is just a collection of images that repeat at a fast rate. It also makes your application stand different from others.

Making an Animation Project − Kitty Animation

This will be a simple project, wherein we will run an animation when a button is clicked. We will use multiple images to create a GIF, so download any GIF and convert it to images, which will give you multiple frames of that GIF.

In this section, we will use the following images.

Animation

These images, when played together, create an animation. Therefore, we will make a single view application. We will then drag an image view option, a label and a button inside the main view controller. Once this is done, we will connect the image view and the button to our swift file.

(If you do not want to use these images, search for any gif and convert it to image online by using some gif to image converter.)

Inside the button action, we will insert the following command to show the image when a button is pressed.

imageView.image = UIImage(named: "frame_0_delay-0.1s.gif") 
// frame_0_delay-0.1s.gif, is the name of image

This is how we programmatically assign image to an Image View. The view should now look as follows −

Assign Image

The first view will appear when we run the application. When we click on the Animate Button, the image will appear.

Animate Button

This is not an animation, but just an image. We will create the animation now −

Add a variable below the image outlet: var counter = 1.

See that our images have a common name and only one character is different. Change your animate button’s code as shown below −

@IBAction func animatePressed(_ sender: Any) { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-0.1s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

Now, when you press the animate button, the image changes every time. The next step is to create the following −

  • Create a variable − isAnimating and assign False to it.

  • Create a timer variable and assign a Timer() function to it.

Once the above two steps are done, then create a function animate and paste the following code.

func animate() { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

Where, counter is our counter variable we made in the previous file. Now, inside the animate button function, add the following code −

if isAnimating { 
   timer.invalidate() 
   isAnimating = false 
} else { 
   timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: 
   #selector(ViewController.animate), userInfo: nil, repeats: true) 
   isAnimating = true 
}

Try to run the application and we will see that an animation is being run on your device.

Challenge − Add a stop button that will stop the animation.

Advertisements