UIView Extension on Andrew Bancroft

Rotate Animation in Swift

Thu, 16 Oct 2014 02:57:24 +0000

Updated on December 14, 2015 – Swift 2.0 + new examples

With this post, I intend to wrap up my series on animations as UIView Extensions in Swift… for now. Truthfully, these ideas flowed out of a real-world app that I was working on, which required various simple animations (fading in/out, sliding text, and now, rotating a view 360 degrees).

Since I’ve given two other detailed walk-throughs on the topic, I’ll try to be to-the-point on this one.

As with the others, I’ve created a GitHub project for you to see the animation in action, and even modify to your liking.

Resources

Rotate Animation Example Project

The Extension

The following code adds a method to any UIView instance called rotate360Degrees. The code can be placed in a Swift file called “UIViewExtensions.swift”:

 1import UIKit
 2
 3extension UIView {
 4    func rotate360Degrees(duration: CFTimeInterval = 1.0, completionDelegate: AnyObject? = nil) {
 5        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
 6        rotateAnimation.fromValue = 0.0
 7        rotateAnimation.toValue = CGFloat(M_PI * 2.0)
 8        rotateAnimation.duration = duration
 9        
10        if let delegate: AnyObject = completionDelegate {
11            rotateAnimation.delegate = delegate
12        }
13        self.layer.addAnimation(rotateAnimation, forKey: nil)
14    }
15}

The only critical thing to notice in the above code snippet is the value passed to the CABasicAnimation constructor. The "transform.rotation” string is what sets things up to go spinning, and the string must be typed exactly as-is for the animation to work.

As in my previous animation posts, I provide myself a couple of parameters to set for a little bit of customization if I want it. Since the parameters have default values, the method can be invoked by writing someUIViewInstance.rotate360Degrees() for simple cases. For more “advanced” scenarios where you need to adjust how long the animation takes, or to perform some logic after the animation completes, you can pass in a duration value other than 1.0, assign a completionDelegate, or both, depending on your needs.

Check out the GitHub example for details on how to configure things for the completionDelegate. I’ll be walking through that more “advanced” case shortly as well.

Example

Perhaps you’re asking, “Why spinning UIViews?”…

In my example, I’ve proposed a simple button that would be used to refresh the view / data in a real-world scenario. When the button is tapped, I want the button to rotate 360 degrees.

In the “advanced” example, I want it to rotate continually until a process of some sort finishes, at which point the animation stops until initiated again. Take a look:

Simple Case – Rotate Once

Once the UIView extension is in place, the simple use case is… well… pretty simple:

1class ViewController: UIViewController {
2    @IBOutlet weak var refreshButton: UIButton!
3    
4    @IBAction func refresh() {
5        self.refreshButton.rotate360Degrees()
6        // Perhaps start a process which will refresh the UI...
7    }
8}

“Advanced” Case – Rotate Until Process Finishes

In my example, I decided to simulate a long-running process by using a custom-built Timer class, heavily inspired by Samuel Mullen’s implementation (with a few modifications to fit my needs). If you’re looking through the GitHub example, try not to get too bogged down in the details of the Timer, unless it just intrigues you. In real life, you may decide perform a web service call to refresh your data model, or refresh your UI (or both). Whatever the case may be, you’ll likely end up with similar logic:

Refresh button is tapped
If the button isn’t already rotating, make it start
Kick off a process that may take some time
The animationDidStop callback is going to be invoked after the view has spun a full 360 degrees. If the longish-running process is finished, the button can stop spinning. Otherwise, it needs to spin around another time. This will be repeated until the longish-running process is complete.

Confession: I’m not entirely thrilled with the rampant mutability in my implementation, but I couldn’t figure out a way to do what I wanted in an immutable way. It does work, however. Just be aware that if you’re really a stickler for immutability in your classes, you’re going to hate this implementation (and I’d love to hear constructive feedback on how I could improve it!). Here’s the code for the bullet-pointed process just outlined:

 1class ViewController2: UIViewController {
 2    @IBOutlet weak var refreshButton: UIButton!
 3    // var, var, var!  So much for immutability :/
 4    var isRotating = false
 5    var shouldStopRotating = false
 6    var timer: Timer!
 7    
 8    @IBAction func refresh() {
 9        if self.isRotating == false {
10            self.refreshButton.rotate360Degrees(completionDelegate: self)
11            // Perhaps start a process which will refresh the UI...
12            self.timer = Timer(duration: 5.0, completionHandler: {
13                self.shouldStopRotating = true
14            })
15            self.timer.start()
16            self.isRotating = true
17        }
18    }
19    
20    override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
21        if self.shouldStopRotating == false {
22            self.refreshButton.rotate360Degrees(completionDelegate: self)
23        } else {
24            self.reset()
25        }
26    }
27    
28    func reset() {
29        self.isRotating = false
30        self.shouldStopRotating = false
31    }
32}

Summary

I tried to strike a balance between making these simple animations easy to call on my labels, buttons, and other UIView subclasses, and just shoving everything into a UIViewExtensions.swift file. The related set of animations just seemed like a really nice use case for Swift extensions, and the strategy served me well in a recent project. Hopefully the series has sparked some ideas in your mind for how to employ extensions to enhance the capabilities of a class so that your code is easier and cleaner to write.

As always – thanks for reading!

Slide In Animation in Swift

Wed, 24 Sep 2014 18:25:52 +0000

In a previous post about fade animations in Swift, I demonstrated how to use a class extension to add the ability for any UIView instance to easily call fadeIn() or fadeOut() on itself. This strategy was nice – the animations, while simple, would have cluttered my code each time I used them, had I not encapsulated them somewhere. Employing class extensions in Swift seemed a natural way to provide this functionality to UIViews.

Well, I liked the idea so much that when it came time for me to implement a slide animation, I kept the same strategy, and I’d like to share my implementation with you today.

Animation demo

To start off with, here’s a sample of what the animation does:

The easiest way to get the gist of what I’ve done is to head over to GitHub and download the example Xcode Project. In real life, I’ve combined the fade animations and the slide animation into the same UIView extension, but for education’s sake, I’ve split them out so you can easily see the moving parts.

Implementation overview

There are three major parts to this example implementation, which I’ll explain in detail shortly. Here’s the overview:

1 – Create the UIView extension

 1import UIKit
 2
 3extension UIView {
 4    // Name this function in a way that makes sense to you... 
 5    // slideFromLeft, slideRight, slideLeftToRight, etc. are great alternative names
 6    func slideInFromLeft(duration: NSTimeInterval = 1.0, completionDelegate: AnyObject? = nil) {
 7        // Create a CATransition animation
 8        let slideInFromLeftTransition = CATransition()
 9        
10        // Set its callback delegate to the completionDelegate that was provided (if any)
11        if let delegate: AnyObject = completionDelegate {
12            slideInFromLeftTransition.delegate = delegate
13        }
14        
15        // Customize the animation's properties
16        slideInFromLeftTransition.type = kCATransitionPush
17        slideInFromLeftTransition.subtype = kCATransitionFromLeft
18        slideInFromLeftTransition.duration = duration
19        slideInFromLeftTransition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
20        slideInFromLeftTransition.fillMode = kCAFillModeRemoved
21        
22        // Add the animation to the View's layer
23        self.layer.addAnimation(slideInFromLeftTransition, forKey: "slideInFromLeftTransition")
24    }
25}

2 – Set up the storyboard

From the Utilities panel, drag over a regular View to act as a wrapper for the sliding text (use a regular View, not a Container View)
From the Utilities panel, drag a Label into the wrapper view and create an IBOutlet to your View Controller for the Label
Set up auto layout constraints for both the wrapper and the Label
Set the wrapper view’s Clip Subviews property to checked in the Attributes Inspector

3 – Code the View Controller – initiate slide animation.

In my example, I wired the trigger up to a button’s touchUpInside action. For you, it may be something different that triggers the animation to begin. Whatever it may be, call slideInFromLeft() on your UIView instance (in my case, the UILabel).

1@IBAction func slideTextButtonTapped(sender: UIButton) {
2        self.slidingTextLabel.slideInFromLeft()
3        self.slidingTextLabel.text = "Sliding Text!"
4    }

Notice that directly after the call to slideInFromLeft(), I change the label’s text property to contain the new text that I want to slide in.

Implementation details

The real work all happens inside the UIViewExtensions.swift file where I add the slideInFromLeft() function to a UIView’s arsenal.`

UIViewExtensions.swift

First to note is that I’ve provided a few default values in the function’s signature so that the animation can be initiated as simply as writing viewInstance.slideInFromLeft(), or as “complicated” as providing argument values to both duration and completionDelegate:

1extension UIView {
2    func slideInFromLeft(duration: NSTimeInterval = 1.0, completionDelegate: AnyObject? = nil) {
3    // Implementation...
4}

Next, I create a CATransition instance, and set its delegate property if a completionDelegate is passed when the function is called:

1extension UIView {
2    func slideInFromLeft(duration: NSTimeInterval = 1.0, completionDelegate: AnyObject? = nil) {
3        let slideInFromLeftTransition = CATransition()
4        
5        if let delegate: AnyObject = completionDelegate {
6            slideInFromLeftTransition.delegate = delegate
7        }
8            // Remaining implementation...
9}

I then go about configuring the animation’s properties. To achieve the “slide in from left” animation, I set the type and the subtype properties to kCATransitionPush and kCATransitionFromLeft, respectively. These two combined create the “slide in” effect. Other properties that I set are duration, timingFunction, and fillMode:

 1extension UIView {
 2        // ...
 3        slideInFromLeftTransition.type = kCATransitionPush
 4        slideInFromLeftTransition.subtype = kCATransitionFromLeft
 5        slideInFromLeftTransition.duration = duration
 6        slideInFromLeftTransition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
 7        slideInFromLeftTransition.fillMode = kCAFillModeRemoved
 8        
 9        // ...
10    }
11}

To keep things simple, I only allow myself to customize the duration property, and optionally provide a completionDelegate when I call the function… the other properties are more fundamental to how the animation should perform, so I encapsulate the implementation here so that it’s an abstraction when I actually call slideInFromLeft() later in my View Controller.

The last thing I do is add the animation that I just created and configured to the view’s layer property. “The view” here would be the instance of UIView that has calls slideInFromLeft():

1extension UIView {
2        // ...
3        self.layer.addAnimation(slideInFromLeftTransition, forKey: "slideInFromLeftTransition")
4    }
5}

Storyboard setup details

This is probably the more challenging piece, just because it takes some tweaking to get the auto layout constraints just right.

My general setup in this example is a Label wrapped inside a containing UIView. I made sure to simply drag over a regular View (not a Container View) from the utilities pane on the right. I then dragged a Label inside the “wrapper” view.
I set wrapper view’s width to a value that was less than the entire screen’s width. This was so that the sliding view didn’t appear to slide in from off-screen and slide out off-screen. Instead it appears to slide in from underneath the wrapper view… You’re welcome to customize this how you want (or avoid the containing view altogether if you find it’s not needed for your specific implementation).
For the wrapper view, I’ve set constraints for
- Center Horizontally in Container
- Top Space to Top Layout Guide
- Width
- Height

Next, I made sure that my label that will be sliding is inside the wrapper view. I set its constraints to

Center Horizontally in Container
Center Vertically in Container
Equal Widths
Equal Heights

The last thing I do in the storyboard before wiring things in the View Controller is to select the wrapper view and make sure it’s Clip Subviews property is checked. As an experiment, toggle this option and watch the effect it has on the animation’s appearance:

View controller implementation

The final piece of the setup is to wire things up to the View Controller and animate the Label.

Since I needed to reference the Label containing the text that I’d like to animate, I created an IBOutlet from my storyboard to my View Controller:

1class ViewController: UIViewController {
2    @IBOutlet weak var slidingTextLabel: UILabel!
3    // ...
4}

Next, I needed a way to initiate the slide in animation – I decided that wiring it to a button’s touchUpInside action would be sufficient for the example, so I created an IBAction from my Storyboard to my View Controller for that purpose.

Within the body of that IBAction, I wrote the call to slideInFromLeft() on my slidingTextLabel instance:

 1import UIKit
 2
 3class ViewController: UIViewController {
 4    // ...
 5    @IBAction func slideTextButtonTapped(sender: UIButton) {
 6        self.slidingTextLabel.slideInFromLeft()
 7//      self.slidingTextLabel.slideInFromLeft(duration: 1.0, completionDelegate: self) // Use this line to specify a duration or completionDelegate
 8        self.slidingTextLabel.text = "Sliding Text!"
 9    }
10    
11    // ...
12}

If you have need to specify a duration or a completionDelegate, there’s a commented out line of code there that shows an example of passing those arguments to the slideInFromLeft() function.

If you specify a completionDelegate to the slideInFromLeft() function, a method called animationDidStop() will be called when the animation finishes. Inside this callback function, you can write code to perform any action you’d like to have happen after the animation has finished. If you don’t set a completionDelegate, there’s no need to have this method override in your code:

1override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
2        println("Animation stopped")
3    }

That’s a wrap, folks! Hope this strategy is helpful for you as you think about where to place code for your UIView animations.

Fade In / Out Animations as Class Extensions in Swift

Sun, 27 Jul 2014 20:13:53 +0000

Updated on December 6, 2016 – Xcode 8 & Swift 3.0

The question has been asked (and solved) on StackOverflow in Objective-C, but my aim in this post is to take the Objective-C implementation and leverage Swift extensions to make this job even easier to achieve and reuse.

Fade animations basically involve adjusting a UIView‘s alpha value from 1.0 to 0.0 (fade out) or 0.0 to 1.0 (fade in) over a specified duration using some kind of easing option (like starting fast, then slowing down at the end of the animation, or starting slow and speeding up at the end of the animation).

I’ve published an example Xcode project to GitHub with the final working version of the code below if you’d like to just see it. Read on for the full explanation.

Edit: 2/23/2016 – A new idea flowing out of my Pluralsight Course involves a similar implementation, but using protocol extensions instead. This article’s implementation still works though, so feel free to check out either the contents of this blog entry, or the new one!

New article using protocol extensions

Fade Views In/Out with Fadeable – A Swift Protocol Extension

Fade without an extension

Below is an example of how my view controller may look if I want to click a button and have it fade out a label, set the text, and fade it back in again:

 1class ViewController: UIViewController {
 2    @IBOutlet weak var birdTypeLabel: UILabel!
 3    
 4    override func viewDidLoad() {
 5        super.viewDidLoad()
 6        // Do any additional setup that your app requires
 7    }
 8    
 9    @IBAction func updateBirdTypeLabel(_ sender: UIButton) {
10        // Fade out to set the text
11        UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseOut, animations: {
12            self.birdTypeLabel.alpha = 0.0
13            }, completion: {
14                (finished: Bool) -> Void in
15                
16                //Once the label is completely invisible, set the text and fade it back in
17                self.birdTypeLabel.text = "Bird Type: Swift"
18                
19                // Fade in
20                UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseIn, animations: {
21                    self.birdTypeLabel.alpha = 1.0
22                    }, completion: nil)
23        })
24    }
25}

What I don’t like about this implementation is that if I want to perform this same kind of animation again elsewhere in my app, I’ve got to write the bulk of that algorithm again each time I want to fade something in or out. I’d like it to be in one place for easier maintainability. I’d also like to be able to fade in / out simply by doing something like self.birdTypeLabel.fadeIn() or self.birdTypeLabel.fadeOut() optionally setting parameters for duration, delay, and completion. With these goals in mind, let’s see what Swift extensions provide us in terms of simplifying the process.

Refactoring using Swift extensions

Step 1 – Create UIViewExtensions.swift

Create a new Swift file and name it something like UIViewExtensions.swift

Step 2 – Move fadeOut and fadeIn to UIViewExtensions.swift

Use the previously-written fadeOut() and `fadeIn() algorithms in the new UIViewExtensions.swift file.

We can leverage what we wrote before with a few modifications. Take a look (I’ve written some comments to help identify some of the tweaks for the extension version):

 1import Foundation
 2import UIKit
 3
 4extension UIView {
 5    func fadeIn() {
 6        // Move our fade out code from earlier
 7        UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseIn, animations: {
 8            self.alpha = 1.0 // Instead of a specific instance of, say, birdTypeLabel, we simply set [thisInstance] (ie, self)'s alpha
 9            }, completion: nil)
10    }
11    
12    func fadeOut() {
13        UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseOut, animations: {
14            self.alpha = 0.0
15            }, completion: nil)
16    }
17}

With this extension in place, we can now call self.birdTypeLabel.fadeIn() or self.birdTypeLabel.fadeOut() . To gain a little more control (if I so choose), I can outfit the fadeIn and fadeOut extension functions with parameters with default values defined so that I can call them with or without parameters as I need.

Step 3 – Provide parameters with default values

In Step 2, we simply hard-coded values for duration, delay, and completion. Below is the final version of the extension that provides parameters for you to (optionally) pass arguments to.

 1import Foundation
 2import UIKit
 3
 4extension UIView {
 5    func fadeIn(_ duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: @escaping ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
 6        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
 7            self.alpha = 1.0
 8            }, completion: completion)  }
 9    
10    func fadeOut(_ duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
11        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
12            self.alpha = 0.0
13            }, completion: completion)
14    }
15}

With this now in place, the final version of my view controller becomes much simpler and clean:

 1import UIKit
 2
 3class ViewController: UIViewController {
 4    @IBOutlet weak var birdTypeLabel: UILabel!
 5                        
 6    override func viewDidLoad() {
 7        super.viewDidLoad()
 8        // Do any additional setup that your app requires
 9    }
10    
11    @IBAction func updateBirdTypeLabel(_ sender: UIButton) {
12        self.birdTypeLabel.fadeOut(completion: {
13            (finished: Bool) -> Void in
14            self.birdTypeLabel.text = "Bird Type: Swift"
15            self.birdTypeLabel.fadeIn()
16            })
17    }
18}

By employing Swift extensions to encapsulate the fade in / out animation logic, I was able to

Define the animation logic in one place for easy maintainability
Make my view controller’s code simpler and clean
Provide a more natural way to perform the animation on any UIView instance by simply calling fadeIn() or fadeOut()
Give myself the option to specify a different duration, delay, or completion closure if I need extra control