This is an Android library to make a simple way to animate your views on Android with Rx.
Add RxAnimation library under Rx3 with Gradle:
implementation 'com.mikhaellopez:rxanimation:2.1.1'
implementation 'com.mikhaellopez:rxanimation:1.0.0'
- Animate your views and handle it in Completable. For example
alpha()
andresize()
:
view1.alpha(1f)
.andThen(view2.resize(100, 100))
- 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)
)
- If you want to apply animation one by one you can used
RxAnimation.sequentially()
instead of multiandThen()
:
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)
)
- 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)
- 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()
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 | - |
View to Completable | RxAnimation.from(view) |
---|---|
rangeFloatToCompletable | rangeFloat |
rangeIntToCompletable | rangeInt |
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.
Find this library useful? Support it by joining stargazers for this repository โญ๏ธ
And follow me for my next creations ๐
RxAnimation by Lopez Mikhael is licensed under a Apache License 2.0.