RxAnimated — animated bindings

Stfalcon.com
Nov 6 · 5 min read

RxAnimated — is a library for RxSwift / RxCocoa which was released not long ago. It provides the animated interface for bindings in RxCocoa. The library is supplied with several predefined animations for binding and offers a flexible mechanism for adding custom animations and using them during binding in RxCocoa.

This article is intended for those who want to start working with RxAnimated. To cut a long story short, the purpose of the library is to modify the binding code which exists to some extent so that it adds animation to the user interface instead of making immediate changes.

Opportunities:

  • Adding simple built-in transitions to bindings, such as flip, fade, and tick;
  • Adding custom animations in the block for transitions;
  • Extending RxAnimated to support new binding recipients in your own classes;
  • Extending RxAnimated to support new custom animations.

Start of work

To start working with RxAnimated, just add the following line to your Podfile:

I would also add that RxAnimated hinges on RxSwift 5.Those who are not familiar with CocoaPods, should better follow the link and get acquainted with it.

Non-animated binding code

During binding values to RxCocoa write something like this:

As a result, when a new value in imageObservable is being received, the UIImageView is updated. It will happen all at once, without any animated transition and the users will see something like this on the screen:

Animated Binding Code

With RxAnimated animation can be added to binding in a very simple way, for example:

With the alteration, the binding starts a transition every time, when it’s necessary to produce side effects, in this case, it’s changing of the image in the UIImageView . The result can be seen on the screen:

The only difference is that bind (animated :) is used instead of bind (to :) and animated.fade (duration: 0.33) (or one of the other standard or custom animations) is inserted between RX and the property you want to use, for instance, UIImage, as in the case in point above.

All the built-in animations work on any UIView element as well as on certain properties, such as UILabel.rx.text or UIImageView.rx.image.

Animations list

Below you can find a list of all the standard properties to bind the animations to and the list of animations themselves.

List of properties for animation bindings:

  1. UIView.rx.animated…isHidden
  2. UIView.rx.animated…alpha
  3. UILabel.rx.animated…text
  4. UILabel.rx.animated…attributedText
  5. UIControl.rx.animated…isEnabled
  6. UIControl.rx.animated…isSelected
  7. UIButton.rx.animated…title
  8. UIButton.rx.animated…image
  9. UIButton.rx.animated…backgroundImage
  10. UIImageView.rx.animated…image
  11. NSLayoutConstraint.rx.animated…constant
  12. NSLayoutConstraint.rx.animated…isActive

List of the built-in animations:

  1. UIView.rx.animated.fade(duration: TimeInterval)
  2. UIView.rx.animated.flip(FlipDirection, duration: TimeInterval)
  3. UIView.rx.animated.tick(FlipDirection, duration: TimeInterval)
  4. UIView.rx.animated.animation(duration: TimeInterval, animations: ()->Void)
  5. NSLayoutConstraint.rx.animated.layout(duration: TimeInterval)

Examples

Let’s first create Observables, which will send us values in a certain period of time and we will show animations in response to them.

And now let’s see how different animations for different app properties look like. UILabel.text + fade:

UILabel.text + flip:

UILabel.text + tick:

UIImageView.image + fade, UIImageView.isHidden + fade, UIImageView.alpha + fade:

UIImageView.image + flip, UIImageView.isHidden + flip, UIImageView.alpha + flip:

UIImageView.image + tick, UIImageView.isHidden + tick, UIImageView.alpha + tick:

UIImageView.image + block, UIImageView.isHidden + block, UIImageView.alpha + block:

NSLayoutConstraint.constant:

NSLayoutConstraint.isActive:

UIButton.backgroundImage + fade:

UIButton.backgroundImage + flip:

UIButton.backgroundImage + tick:

Adding custom animation

As it was mentioned earlier, custom animation can be added to the bindings to match the visual style of any application.

If we need an animation for a property that does not belong to the standard ones, font UILabel, for example, we need to add an extension for this property.

Then we add a method for our animation:

And now we can use this animation in our bindings. Let’s add our animation to UILabel, UIImageView, UIButton and see what happened:

UILabel.text + custom:

UIImageView.image + custom, UIImageView.isHidden + custom, UIImageView.alpha + custom:

UIButton.backgroundImage + custom:

Conclusion

Congratulations, we’ve made a small app with all the RxAnimated built-in standard animations and added custom animations as well. So you can now add animations to bindings and create the animations of your own through RxAnimated library extension.

You’ve also got acquainted with the lists of standard animations and object properties for animations. RxAnimated — is quite a convenient library for adding animations to the reactive code. I hope the article was of use and wish you good luck in your undertakings.

The full demo project can be found on Bitbucket.

Originally published in Stfalcon.com.

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Stfalcon.com

Written by

Stfalcon.com is Ukrainian Information Technology company coding best solutions for Europe and USA. We share most valuable IT experiences at www.stfalcon.com

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade