Using RxSwift for Animations in iOS

For iOS developers with UI experience, UIKit’s animation capabilities are truly remarkable. Animating a UIView is incredibly straightforward, whether it’s fading, rotating, moving, or resizing. However, things become a bit more complex when you need to link animations together and establish dependencies between them. Your code might become verbose and difficult to follow, with numerous nested closures and indentation levels.

This article will demonstrate how to leverage the capabilities of a reactive framework like RxSwift to make your animation code significantly cleaner, more readable, and easier to understand. This idea struck me while working on a client project. This particular client had a keen eye for UI design (which aligned perfectly with my passion) and desired specific UI interactions with numerous polished transitions and animations. One concept involved creating an app introduction that conveyed its essence through a series of animations instead of a pre-rendered video, allowing for easy modifications and adjustments. RxSwift proved to be an ideal solution for this challenge, as I believe you’ll discover by the end of this article.

A Brief Overview of Reactive Programming

Reactive programming is gaining widespread adoption and has been integrated into most modern programming languages. Countless books and online articles delve into why reactive programming is such a potent concept and how it promotes sound software design by enforcing specific design principles and patterns. It provides tools that can substantially reduce code clutter.

I want to highlight one aspect I particularly appreciate—the straightforward way it allows you to chain asynchronous operations and express them in a declarative, readable manner.

In the realm of Swift, two prominent frameworks facilitate reactive programming: ReactiveSwift and RxSwift. I’ll be using RxSwift in my examples, not because it’s superior, but due to my familiarity with it. I’ll assume you’re also acquainted with it, allowing us to dive directly into the core concepts.

Chaining Animations: The Traditional Approach

Suppose you want to rotate a view by 180 degrees and subsequently fade it out. Utilizing the completion closure, you might do something like this:

1
2
3
4
5
6
7
       UIView.animate(withDuration: 0.5, animations: {
            self.animatableView.transform = CGAffineTransform(rotationAngle: .pi/2)
        }, completion: { _ in
            UIView.animate(withDuration: 0.5) {
                self.animatableView.alpha = 0
            }
        })

It’s a bit clunky but manageable. However, imagine adding another animation in between, such as shifting the view to the right after rotation and before fading. Using the same method, you’d end up with code resembling this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
        UIView.animate(withDuration: 0.5, animations: {
            self.animatableView.transform = CGAffineTransform(rotationAngle: .pi/2)
        }, completion: { _ in
            UIView.animate(withDuration: 0.5, animations: {
                self.animatableView.frame = self.animatableView.frame.offsetBy(dx: 50, dy: 0)
            }, completion: { _ in
                UIView.animate(withDuration: 0.5, animations: {
                    self.animatableView.alpha = 0
                })
            })
        })

Animated GIF of the rectangle rotating, pausing, and then sliding to the right

The more steps you incorporate, the more intricate and unwieldy it becomes. Modifying the sequence of these steps would necessitate some cumbersome cut-and-paste operations, increasing the likelihood of errors.

Recognizing this, Apple offers an alternative solution using a keyframe-based animations API. With this approach, the previous code could be rewritten as:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
        UIView.animateKeyframes(withDuration: 1.5, delay: 0, options: [], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.33, animations: {
                self.animatableView.transform = CGAffineTransform(rotationAngle: .pi/2)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.33, relativeDuration: 0.33, animations: {
                self.animatableView.frame = self.animatableView.frame.offsetBy(dx: 50, dy: 0)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.66, relativeDuration: 0.34, animations: {
                self.animatableView.alpha = 0
            })
        })

This represents a significant improvement, offering key advantages:

Code remains streamlined irrespective of the number of steps.
Reordering steps is simple (with one caveat mentioned below).

The downside is the need to think in terms of relative durations. Altering the absolute timing or order of steps becomes less intuitive. Consider the calculations and adjustments to overall and relative durations/start times needed if you wanted the view to fade within 1 second instead of half a second while maintaining everything else. The same complexity arises when reordering steps—you’d have to recalculate relative start times.

Considering these drawbacks, I find none of these approaches entirely satisfactory. An ideal solution should meet these criteria:

Code should remain concise regardless of the number of animation steps.
Adding, removing, reordering animations, and adjusting their durations independently should be effortless, without affecting other animations.

Chaining Animations: The RxSwift Approach

I’ve found that employing RxSwift allows me to fulfill both criteria effectively. RxSwift isn’t the sole framework for this purpose—any promise-based framework enabling you to encapsulate asynchronous operations within methods that can be syntactically chained without relying on completion blocks would suffice. However, RxSwift offers a broader range of operators, which we’ll explore later.

Here’s the gist of my approach:

Encapsulate each animation within a function that returns an observable of type Observable<Void>.
This observable will emit a single element before completing the sequence.
The element will be emitted upon completion of the animation encapsulated by the function.
Chain these observables together using the flatMap operator.

Here’s how my functions might appear:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    func rotate(_ view: UIView, duration: TimeInterval) -> Observable<Void> {
        return Observable.create { (observer) -> Disposable in
            UIView.animate(withDuration: duration, animations: {
                view.transform = CGAffineTransform(rotationAngle: .pi/2)
            }, completion: { (_) in
                observer.onNext(())
                observer.onCompleted()
            })
            return Disposables.create()
        }
    }
 
    func shift(_ view: UIView, duration: TimeInterval) -> Observable<Void> {
        return Observable.create { (observer) -> Disposable in
            UIView.animate(withDuration: duration, animations: {
                view.frame = view.frame.offsetBy(dx: 50, dy: 0)
            }, completion: { (_) in
                observer.onNext(())
                observer.onCompleted()
            })
            return Disposables.create()
        }
    }
 
    func fade(_ view: UIView, duration: TimeInterval) -> Observable<Void> {
        return Observable.create { (observer) -> Disposable in
            UIView.animate(withDuration: duration, animations: {
                view.alpha = 0
            }, completion: { (_) in
                observer.onNext(())
                observer.onCompleted()
            })
            return Disposables.create()
        }
    }

And here’s how to combine them:

1
2
3
4
5
6
7
8
9
        rotate(animatableView, duration: 0.5)
            .flatMap { [unowned self] in
                self.shift(self.animatableView, duration: 0.5)
            }
            .flatMap { [unowned self] in
                self.fade(self.animatableView, duration: 0.5)
            }
            .subscribe()
            .disposed(by: disposeBag)

While this may seem like overkill for a simple animation sequence compared to previous implementations, the elegance lies in its extensibility to handle complex sequences and its declarative syntax, making it remarkably readable.

Once accustomed, you can create animations as intricate as a movie, with a wide array of RxSwift operators at your disposal. These operators simplify tasks that would be challenging using previous methods.

For instance, the .concat operator further streamlines the animation chaining:

1
2
3
4
5
6
7
        Observable.concat([
                rotate(animatableView, duration: 0.5),
                shift(animatableView, duration: 0.5),
                fade(animatableView, duration: 0.5)
            ])
            .subscribe()
            .disposed(by: disposeBag)

Inserting delays between animations is straightforward:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    func delay(_ duration: TimeInterval) -> Observable<Void> {
        return Observable.of(()).delay(duration, scheduler: MainScheduler.instance)
    }
 
        Observable.concat([
            rotate(animatableView, duration: 0.5),
            delay(0.5),
            shift(animatableView, duration: 0.5),
            delay(1),
            fade(animatableView, duration: 0.5)
            ])
            .subscribe()
            .disposed(by: disposeBag)

Now, let’s say you want the view to rotate multiple times before moving and need an easy way to control the rotation count.

Start by creating a method that repeats a rotation animation continuously, emitting an element after each rotation. The goal is to stop these rotations when the observable is disposed of. This can be achieved as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    func rotateEndlessly(_ view: UIView, duration: TimeInterval) -> Observable<Void> {
        var disposed = false
        return Observable.create { (observer) -> Disposable in
            func animate() {
                UIView.animate(withDuration: duration, animations: {
                    view.transform = view.transform.rotated(by: .pi/2) 
                }, completion: { (_) in
                    observer.onNext(())
                    if !disposed {
                        animate()
                    }
                })
            }
            animate()
            return Disposables.create {
                disposed = true
            }
        }
    }

The streamlined animation chain now looks like this:

1
2
3
4
5
6
7
        Observable.concat([
            rotateEndlessly(animatableView, duration: 0.5).take(5),
            shift(animatableView, duration: 0.5),
            fade(animatableView, duration: 0.5)
            ])
             .subscribe()
            .disposed(by: disposeBag)

Controlling the view’s rotation count is as simple as adjusting the value passed to the take operator.

Taking the implementation further, wrap each animation function within a “Reactive” extension of UIView (accessible via the .rx suffix). This aligns with RxSwift conventions, where reactive functions typically reside under the .rx suffix, signifying their return of an observable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
extension Reactive where Base == UIView {
    func shift(duration: TimeInterval) -> Observable<Void> {
        return Observable.create { (observer) -> Disposable in
            UIView.animate(withDuration: duration, animations: {
                self.base.frame = self.base.frame.offsetBy(dx: 50, dy: 0)
            }, completion: { (_) in
                observer.onNext(())
                observer.onCompleted()
            })
            return Disposables.create()
        }
    }
 
    func fade(duration: TimeInterval) -> Observable<Void> {
        return Observable.create { (observer) -> Disposable in
            UIView.animate(withDuration: duration, animations: {
                self.base.alpha = 0
            }, completion: { (_) in
                observer.onNext(())
                observer.onCompleted()
            })
            return Disposables.create()
        }
    }
 
    func rotateEndlessly(duration: TimeInterval) -> Observable<Void> {
        var disposed = false
        return Observable.create { (observer) -> Disposable in
            func animate() {
                UIView.animate(withDuration: duration, animations: {
                    self.base.transform = self.base.transform.rotated(by: .pi/2)
                }, completion: { (_) in
                    observer.onNext(())
                    if !disposed {
                        animate()
                    }
                })
            }
            animate()
            return Disposables.create {
                disposed = true
            }
        }
    }
}

With this, you can combine them as follows:

1
2
3
4
5
6
7
        Observable.concat([
            animatableView.rx.rotateEndlessly(duration: 0.5).take(5),
            animatableView.rx.shift(duration: 0.5),
            animatableView.rx.fade(duration: 0.5)
            ])
            .subscribe()
            .disposed(by: disposeBag)

Moving Forward

This article demonstrates how unlocking RxSwift’s potential, once you have your fundamental elements in place, transforms animations into an enjoyable experience. Your code becomes clean, readable, and less like “code.” You’re essentially “describing” the arrangement of animations, and they seamlessly come to life!

To achieve something more elaborate, simply add more custom primitives encapsulating other animation types. You can also leverage the ever-expanding collection of tools and frameworks developed by passionate individuals within the open-source community.

For RxSwift enthusiasts, make sure to frequent the RxSwiftCommunity repository—there’s always something new to discover!

For further UI guidance, consider exploring How to Implement a Pixel-perfect iOS UI Design by fellow Toptaler Roman Stetsenko.

Source Notes (Understanding the Basics)