RxAnimated — animated bindings
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:
- UIView.rx.animated…isHidden
- UIView.rx.animated…alpha
- UILabel.rx.animated…text
- UILabel.rx.animated…attributedText
- UIControl.rx.animated…isEnabled
- UIControl.rx.animated…isSelected
- UIButton.rx.animated…title
- UIButton.rx.animated…image
- UIButton.rx.animated…backgroundImage
- UIImageView.rx.animated…image
- NSLayoutConstraint.rx.animated…constant
- NSLayoutConstraint.rx.animated…isActive
List of the built-in animations:
- UIView.rx.animated.fade(duration: TimeInterval)
- UIView.rx.animated.flip(FlipDirection, duration: TimeInterval)
- UIView.rx.animated.tick(FlipDirection, duration: TimeInterval)
- UIView.rx.animated.animation(duration: TimeInterval, animations: ()->Void)
- 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.
