Simple way to animate your views on Android with Rx 🚀

Lopez Mikhael

Last update: Dec 9, 2022

Related tags

Animations android animation rxjava2 animation-library rxkotlin rxkotlin-android rxanimations

Overview

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

USAGE

Add RxAnimation library under Rx3 with Gradle:

implementation 'com.mikhaellopez:rxanimation:2.0.0'

⚠️ If you use Rx2 you need to implement the following version:

implementation 'com.mikhaellopez:rxanimation:1.0.0'

KOTLIN

Animate your views and handle it in Completable. For example alpha() and resize():

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 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)
)

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()

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.

Comments

a little advise

this project is awesome！Good job！I have few questions： 1.please add repeat property，sometimes we need to repeat animations all the time 2.Add animation monitor 3.Reverse animation when animations done

opened by jielundewode 3
delay

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

Not resize, i need a startDelay please ;)

opened by loicteillard 2
Cannot get this to work
Tried to implement this in a project . doesn't seems to be working for me. So I made a sample project and add this code ... Can you guide me what i did wrong ?

findViewById
opened by monsterbrain 1
unable to access class 'io.reactivex.Completable'

When calling the 'together' class I get an error message that says "unable to access class 'io.reactivex.Completable' "

my project is API 29 and min API 21

opened by ghost 1
[SUPPORT] Update deps & script to publish to Maven Central
Guidelines

Update script to publish to Maven Central with Gradle 7.x.x

Update version Kotlin 1.7.10

Update gradle version 7.2.2

Update version AndroidX AppCompat 1.5.0

Add issue template for Bug & Report

Add pull request template
opened by lopspower 0
Java friendly api

At now, code written on kotlin does not ideally friendly with java, for example from java you need to use

RxAnimation.INSTANCE.together instead RxAnimation.together

translationX(someVIew, 0f, 200L, null, null, false) instead translationX(registerInput, 0f, 200L)

opened by MairwunNx 0
$Can't gradle sync locally project from master branch. ossrhUsername\ossrhPassword names undefined.$
Can't gradle sync locally project from master branch. ossrhUsername\ossrhPassword names undefined.
Please complete the following information:

Last snapshot from master branch.

Problem locations:

./gradle/publish-mavencentral.gradle/41L

./gradle/publish-mavencentral.gradle/42L

Fields ossrhUsername\ossrhPassword not found and undefined, gradle can't sync the project.

Current workaround:

Pass any string if we do plant to publish dependencies.
opened by MairwunNx 0
HW/SW acceleration support for Animation
Added layerType field for mentioning the acceleration type(Hardware/Software)

layerType will be set back to the previous one once the animation is finished.
opened by anoop44 0

Releases(2.1.1)

2.1.1(Aug 29, 2022)
What's Changed

Update script to publish to Maven Central with Gradle 7.x.x

Update version Kotlin 1.7.10

Update gradle version 7.2.2

Update Rx to 3.1.5

Update version AndroidX AppCompat 1.5.0

Add issue template for Bug & Report

Add pull request template

USAGE

implementation 'com.mikhaellopez:rxanimation:2.1.1'
Source code(tar.gz)
Source code(zip)
debug.apk(3.89 MB)

Owner

Lopez Mikhael

Team Leader Android

GitHub

💪 Rich Android Path. 🤡 Draw as you want. 🎉 Animate much as you can.

?? Rich Android Path. ?? Draw as you want. ?? Animate much as you can. Download sample app: Features Full Animation Control on Paths and VectorDrawabl

2.3k Dec 20, 2022

Android library to animate Floating Action Button to Bottom Sheet Dialog and vice-versa

FabulousFilter Show some ❤️ and star the repo to support the project This library is the implementation of filter-concept posted on MaterialUp.com. It

2.6k Jan 3, 2023

Animate a strike over any image to indicate on/off states. As seen in the Material Guidelines.

StrikedImageView Animate a strike over any image to indicate on/off states. As seen in the Material Guidelines. Gradle allprojects { repositories

9 Sep 21, 2022

POC of how you can animate LazyColumn insertions/deletions/moving

Animated LazyColumn/LazyRow POC of how you can animate LazyColumn/LazyRow insertions/deletions/moving Note, this is not production ready or a library,

33 Dec 24, 2022

Backarrow-animation-example - Animate back arrow to close button in Compose using animated drawables

Animate Back Arrow to Close Icon in Compose This is a simple demo for animated v

3 Feb 17, 2022

Trying to play with Jetpack compose low level animations APIs, which are animate*AsState APIs.

ComposeSimpleAnimation Trying to play with Jetpack compose low level animations APIs, which are animate*AsState APIs that I needed in another project.

39 Dec 10, 2022

[] Easily have blurred and transparent background effect on your Android views.

##[DEPRECATED] BlurBehind Easily have blurred and transparent background effect on your Android views. Before API level 14 there was a Window flag cal

516 Nov 25, 2022

A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesn’t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a