Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Open more actions menu

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.

Releases

Sponsor this project

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.