Skip to content

Simple way to animate your views on Android with Rx 🚀

License

Notifications You must be signed in to change notification settings

lopspower/RxAnimation

Repository files navigation

title

Platform API Maven Central Twitter

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 under Rx3 with Gradle:

implementation 'com.mikhaellopez:rxanimation:2.1.1'

⚠️ If you use Rx2 you need to implement the following version (just on jcenter):

implementation 'com.mikhaellopez:rxanimation:1.0.0'

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.from(view) if you want to update multi properties one by one in the same view:
RxAnimation.from(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 to 20f).rangeFloatToCompletable { 
    circularImageView.borderWidth = it 
}

// or

RxAnimation.from(circularImageView)
    .rangeFloat(4f, 20f) { circularImageView?.borderWidth = it }
  • Use reverse properties to back to the initial value in all methods:
view.fadeIn(reverse = true)
  • If you want to repeat an animation you can use the native method repeat from Rx like this:
RxAnimation.from(view)
    .fadeIn()
    .shake()
    .fadeOut()
    .repeat(NB_REPEAT)
    .subscribe()

ALL PROPERTIES

Default

Properties View to Completable RxAnimation.from(view)
alpha alpha alpha
translationX translationX translationX
translationY translationY translationY
translation X + Y translation(X, Y) translation(X, Y)
scaleX scaleX scaleX
scaleY scaleY scaleY
scale X = Y scale scale
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
ValueAnimator start startValueAnimator
ViewPropertyAnimator animate -

Custom Properties

View to Completable RxAnimation.from(view)
rangeFloatToCompletable rangeFloat
rangeIntToCompletable rangeInt

Smart function

Animation View to Completable RxAnimation.from(view)
alpha=1f fadeIn fadeIn
alpha=0f fadeOut fadeOut
shake shake shake
press press press
text text text

ℹ️ All the functions have duration: Long, interpolator: TimeInterpolator, startDelay: Long and reverse: Boolean properties.

SUPPORT ❤️

Find this library useful? Support it by joining stargazers for this repository ⭐️
And follow me for my next creations 👍

LICENCE

RxAnimation by Lopez Mikhael is licensed under a Apache License 2.0.