iOS Development - Animations

iOS Development with Swift - Animations

Animations are a key aspect of modern user interfaces, enhancing user experience by providing visual feedback and guiding attention. In iOS, animations can range from simple view property changes to complex, interactive sequences. One basic way to create frame-by-frame animation is by rapidly displaying a sequence of images.

Creating a Frame Animation Project – “Sprite Animation”

This project demonstrates a simple frame animation. We’ll display a sequence of images in a UIImageView when a button is tapped, simulating an animated character or effect. You’ll need a set of images that form an animation sequence (frames of a GIF, or a sprite sheet). For this example, assume you have images named frame_0.png, frame_1.png, …, frame_8.png.

To get these images, you can search for a sprite sheet (e.g., ‘walking animation sprite sheet’) or a GIF, then split it into individual frames using an online converter or image editing software. Ensure the images are named sequentially.

Project Setup:

1. Create a new iOS project in Xcode (App template, Storyboard interface, Swift language).
2. Add your sequence of animation frame images (e.g., frame_0.png through frame_8.png) to your project’s Asset Catalog (Assets.xcassets). Drag them into the asset list.

Interface (Main.storyboard):

1. Drag a UIImageView onto your main view controller’s view. This will display the animation frames.
2. Drag a UIButton onto the view. Set its title to “Toggle Animation” or similar.

The UI will consist of an image view (initially empty or showing the first frame) and a button to start/stop the animation.

Connecting UI to Code (ViewController.swift):

1. Open Main.storyboard and ViewController.swift side-by-side.
2. Control-drag from the UIImageView to ViewController.swift to create an @IBOutlet. Name it animationImageView.
3. Control-drag from the UIButton to ViewController.swift to create an @IBAction for the ‘Touch Up Inside’ event. Name it toggleAnimationTapped.

Setting up Animation Properties in ViewController.swift:

class ViewController: UIViewController {
    @IBOutlet weak var animationImageView: UIImageView!

    var animationFrames: [UIImage] = []
    var currentFrameIndex = 0
    var animationTimer: Timer?
    var isAnimating = false
    let animationDurationPerFrame: TimeInterval = 0.1 // 10 frames per second
    let totalFrames = 9 // Assuming images frame_0.png to frame_8.png

    override func viewDidLoad() {
        super.viewDidLoad()
        loadAnimationFrames()
        // Optionally display the first frame initially
        if !animationFrames.isEmpty {
            animationImageView.image = animationFrames[0]
        }
    }

    func loadAnimationFrames() {
        for i in 0..<totalFrames {
            if let imageName = "frame_\(i)", let image = UIImage(named: imageName) {
                animationFrames.append(image)
            }
        }
    }
    // ... rest of the code ...
}

The loadAnimationFrames function populates an array with UIImage objects from your asset catalog. The names frame_0, frame_1, etc., should match the names you used in the Asset Catalog.

Implementing the Animation Logic:

@objc func updateAnimationFrame() {
    currentFrameIndex += 1
    if currentFrameIndex >= animationFrames.count {
        currentFrameIndex = 0 // Loop animation
    }
    if !animationFrames.isEmpty {
        animationImageView.image = animationFrames[currentFrameIndex]
    }
}

@IBAction func toggleAnimationTapped(_ sender: UIButton) {
    if isAnimating {
        // Stop animation
        animationTimer?.invalidate() // Stops the timer
        animationTimer = nil
        sender.setTitle("Start Animation", for: .normal)
    } else {
        // Start animation
        if animationFrames.isEmpty { return } // Don't start if no frames
        currentFrameIndex = 0 // Reset to first frame
        animationImageView.image = animationFrames[currentFrameIndex]

        animationTimer = Timer.scheduledTimer(timeInterval: animationDurationPerFrame,
                                              target: self,
                                              selector: #selector(updateAnimationFrame),
                                              userInfo: nil,
                                              repeats: true)
        sender.setTitle("Stop Animation", for: .normal)
    }
    isAnimating.toggle()
}

Explanation:

• updateAnimationFrame(): This method is called by the Timer. It advances to the next frame and updates the animationImageView. When it reaches the end of the frame sequence, it loops back to the beginning.
• toggleAnimationTapped(_:): This action method handles the button tap.
  • If isAnimating is true, it invalidates (stops) the Timer and updates the button title to “Start Animation”.
  • If isAnimating is false, it starts a new Timer. Timer.scheduledTimer repeatedly calls updateAnimationFrame at the interval specified by animationDurationPerFrame. The button title is updated to “Stop Animation”.
• The #selector(updateAnimationFrame) syntax is used to refer to the updateAnimationFrame method for the timer.

Running the Application: Build and run. The image view might show the first frame. Tap the “Start Animation” button. You should see the image view cycling through the frames, creating an animation. Tap “Stop Animation” to pause it.

Alternative using UIImageView.animationImages: UIKit also provides a simpler way to achieve this for basic frame animations:

// Inside toggleAnimationTapped, an alternative way:
// if animationImageView.isAnimating {
//     animationImageView.stopAnimating()
//     sender.setTitle("Start Animation", for: .normal)
// } else {
//     if animationImageView.animationImages == nil || animationImageView.animationImages?.isEmpty == true {
//         animationImageView.animationImages = animationFrames
//         animationImageView.animationDuration = TimeInterval(animationFrames.count) * animationDurationPerFrame
//         // animationImageView.animationRepeatCount = 0 // 0 for infinite loop
//     }
//     animationImageView.startAnimating()
//     sender.setTitle("Stop Animation", for: .normal)
// }
// isAnimating.toggle() // You'd still need this state variable or check animationImageView.isAnimating

This alternative uses UIImageView’s built-in animation properties (animationImages, animationDuration, startAnimating(), stopAnimating()). It’s often simpler for basic sequences. The Timer approach offers more control if you need to synchronize with other events or perform actions between frames.

Challenge: Modify the animation to play only once instead of looping, or add controls for animation speed.