/ Animations

Simple way to animate your views on Android with Rx

Simple way to animate your views on Android with Rx

RxAnimation

This is an Android library to make a simple way to animate your views on Android with Rx.

Android app on Google Play

USAGE

Add RxAnimation library via Gradle:

implementation 'com.mikhaellopez:rxanimation:0.0.3'

KOTLIN

sample
  • Animate your views and handle it in Completable. For example alpha() and resize():
view1.alpha(1f)
    .andThen(view2.resize(100, 100))

sample
  • If you want to apply animation in the same time you can used RxAnimation.together():
RxAnimation.together(
    view1.fadeIn(),
    view1.translation(20f, 30f),
    view2.backgroundColor(
        ContextCompat.getColor(this, R.color.accent),
        ContextCompat.getColor(this, R.color.primary)
    ),
    view2.resize(100, 100)
)
sample
  • If you want to apply animation one by one you can used RxAnimation.sequentially() instead of multi andThen():
RxAnimation.sequentially(
    view1.fadeIn(),
    view1.translation(20f, 30f),
    view2.backgroundColor(
        ContextCompat.getColor(this, R.color.accent),
        ContextCompat.getColor(this, R.color.primary)
    ),
    view2.resize(100, 100)
)
sample
  • You can also used RxAnimation.fromView(view) if you want to update multi properties one by one in the same view:
RxAnimation.fromView(view)
    .fadeIn()
    .translation(20f, 30f)
    .backgroundColor(
        ContextCompat.getColor(this, R.color.accent),
        ContextCompat.getColor(this, R.color.primary)
    )
    .resize(100, 100)
sample
  • You can also use the range() function to animate a change on a custom property:
(4f, 20f).rangeFloatToCompletable { 
    circularImageView.borderWidth = it 
}

// or

RxAnimation.fromView(circularImageView)
    .rangeFloat(4f, 20f) { circularImageView.borderWidth = it }

ALL PROPERTIES

Properties View to Completable RxAnimation.from(view)
alpha alpha alpha
alpha=1 fadeIn fadeIn
alpha=0 fadeOut fadeOut
translationX translationX translationX
translationY translationY translationY
translationX + Y translation(X, Y) translation(X, Y)
scaleX scaleX scaleX
scaleY scaleY scaleY
rotation rotation rotation
rotationX rotationX rotationX
rotationY rotationY rotationY
X x x
Y y y
Z z z
X + Y + Z xyz xyz
backgroundColor backgroundColor backgroundColor
width width width
height height height
width + height resize resize
customProperties rangeFloatToCompletable rangeFloat
customProperties rangeIntToCompletable rangeInt
customProperties rangeIntToCompletable rangeInt
ValueAnimator start startValueAnimator
ViewPropertyAnimator animate -

:information_source: All the functions have duration: Long, interpolator: TimeInterpolator & startDelay: Long properties.

GitHub