Android Animations Powered by Kotlin and RxJava2

This talk was about effectively chaining Android animations using RxJava2 and Kotlin (for even further simplicity, everything still compatible with Java). When animating UI elements, the Android framework provides listeners for various animation events such as started, cancelled, stopped, etc. What we’ve done here was lifting the animation logic into the RxJava chains, thus making the whole process ‘reactive’ with much nicer syntax and better control flow management.

Transcript

1. Ivan Škorić ~ PSPDFKit @skoric_ Android Animations Powered by Kotlin and RxJava2
2. Android animations • ValueAnimator • ObjectAnimator • AnimatorSet • ViewPropertyAnimator
3. ValueAnimator
4. ValueAnimator ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
 animation.setDuration(1000);
 animation.start();
5. ValueAnimator ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
 animation.setDuration(1000);
 animation.start(); animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator updatedAnimation) {
 float animatedValue = (float) updatedAnimation.getAnimatedValue();
 textView.setTranslationX(animatedValue);
 }
 });
6. ObjectAnimator
7. ObjectAnimator ObjectAnimator animation = ObjectAnimator.ofFloat(textView, "translationX", 100f);
 animation.setDuration(1000);
 animation.start();
8. AnimatorSet
9. AnimatorSet AnimatorSet bouncer = new AnimatorSet();
 bouncer.play(bounceAnim).before(squashAnim1);
 bouncer.play(squashAnim1).with(squashAnim2);
 bouncer.play(squashAnim1).with(stretchAnim1);
 bouncer.play(squashAnim1).with(stretchAnim2);
 bouncer.play(bounceBackAnim).after(stretchAnim2);
 
 ValueAnimator fadeAnim = ObjectAnimator.ofFloat( newBall, "alpha", 1f, 0f);
 fadeAnim.setDuration(250);
 AnimatorSet animatorSet = new AnimatorSet();
 animatorSet.play(bouncer).before(fadeAnim);
 animatorSet.start();
10. ViewPropertyAnimator
11. ViewPropertyAnimator textView.animate()
 .x(50f)
 .y(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .setListener(new Animator.AnimatorListener() {
 @Override public void onAnimationStart(Animator animator) {}
 @Override public void onAnimationEnd(Animator animator) {}
 @Override public void onAnimationCancel(Animator animator) {}
 @Override public void onAnimationRepeat(Animator animator) {}
 });
12. ViewPropertyAnimator textView.animate()
 .x(50f)
 .y(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .setListener(new Animator.AnimatorListener() {
 @Override public void onAnimationStart(Animator animator) {}
 @Override public void onAnimationEnd(Animator animator) {}
 @Override public void onAnimationCancel(Animator animator) {}
 @Override public void onAnimationRepeat(Animator animator) {}
 });
13. ViewPropertyAnimator textView.animate()
 .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .setListener(new Animator.AnimatorListener() {
 @Override public void onAnimationStart(Animator animator) {}
 @Override public void onAnimationEnd(Animator animator) {}
 @Override public void onAnimationCancel(Animator animator) {}
 @Override public void onAnimationRepeat(Animator animator) {}
 });
14. ViewPropertyAnimator textView.animate()
 .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .setListener(new Animator.AnimatorListener() {
 @Override public void onAnimationStart(Animator animator) {}
 @Override public void onAnimationEnd(Animator animator) {}
 @Override public void onAnimationCancel(Animator animator) {}
 @Override public void onAnimationRepeat(Animator animator) {}
 });
15. ViewPropertyAnimator textView.animate()
 .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .setListener(new Animator.AnimatorListener() {
 @Override public void onAnimationStart(Animator animator) {}
 @Override public void onAnimationEnd(Animator animator) {}
 @Override public void onAnimationCancel(Animator animator) {}
 @Override public void onAnimationRepeat(Animator animator) {}
 });
16. ViewPropertyAnimator textView.animate()
 .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .withEndAction(new Runnable() { // API 16+
 @Override
 public void run() {
 // Do something here when animation ends.
 }
 });
17. ViewPropertyAnimator textView.animate()
 .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .withEndAction(new Runnable() { // API 16+
 @Override
 public void run() {
 // Do something here when animation ends.
 }
 });
18. ViewPropertyAnimator ViewCompat.animate(textView) .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .withEndAction(new Runnable() { @Override
 public void run() {
 // Do something here when animation ends.
 }
 });
19. ViewPropertyAnimatorCompat ViewCompat.animate(textView) .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .withEndAction(new Runnable() { @Override
 public void run() {
 // Do something here when animation ends.
 }
 });
20. ViewPropertyAnimatorCompat ViewCompat.animate(textView)
 .translationX(50f)
 .translationY(100f)
 .setDuration(1000)
 .setInterpolator(new AccelerateDecelerateInterpolator())
 .setStartDelay(50)
 .withEndAction(new Runnable() {
 @Override
 public void run() {
 // Do something here when animation ends.
 }
 });
21. Few remarks
22. Few remarks • Animation is scheduled to run as soon as animate() is called, start() is optional
23. Few remarks • Animation is scheduled to run as soon as animate() is called, start() is optional • Only one animator can animate a specified view at a particular time
24. Why RxJava?
25. Why RxJava? • Library for composing asynchronous and event- based programs by using observable sequences
26. Why RxJava? • Library for composing asynchronous and event- based programs by using observable sequences • How can we use it to improve Android animations syntax and logic flow?
27. Why RxJava? • Library for composing asynchronous and event- based programs by using observable sequences • How can we use it to improve Android animations syntax and logic flow? • By wrapping Android animators API and callbacks inside RxJava objects
28. Why Kotlin?
29. Why Kotlin? • Lambdas
30. Why Kotlin? • Lambdas • Extension methods
31. Why Kotlin? • Lambdas • Extension methods • Syntactically more pleasing
32. Why Kotlin? • Lambdas • Extension methods • Syntactically more pleasing • Fully compatible with Java
33. RxJava2 reactive base types
34. RxJava2 reactive base types • Observable, Flowable • void onSubscribe(Disposable d) • void onNext(T value) • void onCompleted() • void onError(Throwable e)
35. RxJava2 reactive base types • Observable, Flowable • void onSubscribe(Disposable d) • void onNext(T value) • void onCompleted() • void onError(Throwable e)
36. RxJava2 reactive base types • Single • void onSubscribe(Disposable d) • void onSuccess(T value) • void onError(Throwable e)
37. RxJava2 reactive base types • Completable • void onSubscribe(Disposable d) • void onComplete() • void onError(Throwable e)
38. fun fadeIn(view: View, duration: Long): Completable { 
 }
39. fun fadeIn(view: View, duration: Long): Completable {
 return Completable.fromAction { 
 }
 }
40. fun fadeIn(view: View, duration: Long): Completable {
 return Completable.fromAction { 
 ViewCompat.animate(view)
 .setDuration(duration)
 .alpha(1f)
 }
 }
41. fun fadeIn(view: View, duration: Long): Completable {
 
 }
42. fun fadeIn(view: View, duration: Long): Completable {
 val animationSubject = CompletableSubject.create()
 }
43. fun fadeIn(view: View, duration: Long): Completable { val animationSubject = CompletableSubject.create()
 ViewCompat.animate(view)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 
 return animationSubject
 }
 

44. fun fadeIn(view: View, duration: Long): Completable {
 val animationSubject = CompletableSubject.create() animationSubject.doOnSubscribe {
 ViewCompat.animate(view)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 }
 
 return animationSubject
 }
45. fun fadeIn(view: View, duration: Long): Completable {
 val animationSubject = CompletableSubject.create() return animationSubject.doOnSubscribe {
 ViewCompat.animate(view)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 }
 }
 

46. val durationMs = 1000L
47. val durationMs = 1000L
 fadeIn(button1, durationMs)
48. val durationMs = 1000L
 fadeIn(button1, durationMs)
 .andThen(fadeIn(button2, durationMs))
 .andThen(fadeIn(button3, durationMs))
 .andThen(fadeIn(button4, durationMs))
49. val durationMs = 1000L
 fadeIn(button1, durationMs)
 .andThen(fadeIn(button2, durationMs))
 .andThen(fadeIn(button3, durationMs))
 .andThen(fadeIn(button4, durationMs))
 .subscribe()
50. button1.alpha = 0f
 button2.alpha = 0f
 button3.alpha = 0f
 button4.alpha = 0f val durationMs = 1000L
 fadeIn(button1, durationMs)
 .andThen(fadeIn(button2, durationMs))
 .andThen(fadeIn(button3, durationMs))
 .andThen(fadeIn(button4, durationMs))
 .subscribe()
52. fun fadeIn(view: View, duration: Long): Completable {
 val animationSubject = CompletableSubject.create() return animationSubject.doOnSubscribe {
 ViewCompat.animate(view)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 }
 }
 

53. fun fadeIn(view: View, duration: Long): Completable {
 val animationSubject = CompletableSubject.create() return animationSubject.doOnSubscribe {
 ViewCompat.animate(view)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 }
 }
 

54. fun View.fadeIn(duration: Long): Completable {
 val animationSubject = CompletableSubject.create()
 return animationSubject.doOnSubscribe {
 ViewCompat.animate(this)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 }
 }
55. val durationMs = 1000L
 fadeIn(button1, durationMs)
 .andThen(fadeIn(button2, durationMs))
 .andThen(fadeIn(button3, durationMs))
 .andThen(fadeIn(button4, durationMs))
 .subscribe()
56. val durationMs = 1000L
 button1.fadeIn(durationMs)
 .andThen(button2.fadeIn(durationMs))
 .andThen(button3.fadeIn(durationMs))
 .andThen(button4.fadeIn(durationMs))
 .subscribe()
57. fun View.fadeIn(duration: Long): Completable {
 val animationSubject = CompletableSubject.create()
 return animationSubject.doOnSubscribe {
 ViewCompat.animate(this)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 }
 }
58. fun View.fadeIn(duration: Long = 1000L): Completable {
 val animationSubject = CompletableSubject.create()
 return animationSubject.doOnSubscribe {
 ViewCompat.animate(this)
 .setDuration(duration)
 .alpha(1f)
 .withEndAction {
 animationSubject.onComplete()
 }
 }
 }
 

59. val durationMs = 1000L
 button1.fadeIn(durationMs)
 .andThen(button2.fadeIn(durationMs))
 .andThen(button3.fadeIn(durationMs))
 .andThen(button4.fadeIn(durationMs))
 .subscribe()
60. button1.fadeIn()
 .andThen(button2.fadeIn())
 .andThen(button3.fadeIn())
 .andThen(button4.fadeIn())
 .subscribe()
61. button1.fadeIn()
 .andThen(button2.fadeIn(duration = 2000L))
 .andThen(button3.fadeIn())
 .andThen(button4.fadeIn())
 .subscribe()
62. button1.fadeIn()
 .mergeWith(button2.fadeIn(duration = 2000L))
 .mergeWith(button3.fadeIn())
 .mergeWith(button4.fadeIn())
 .subscribe()
64. button1.fadeIn()
 .mergeWith(button2.fadeIn())
 .mergeWith(button3.fadeIn())
 .mergeWith(button4.fadeIn())
 .subscribe()
65. (button1.fadeIn().mergeWith(button2.fadeIn()))
 .andThen(button3.fadeIn().mergeWith(button4.fadeIn()))
 .subscribe()
66. (button1.fadeIn().mergeWith(button1.fadeIn()))
 .andThen(button3.fadeIn().mergeWith(button4.fadeIn()))
 .subscribe()
67. (button1.fadeIn().mergeWith(button2.fadeIn()))
 .andThen(button3.fadeIn().mergeWith(button4.fadeIn()))
 .subscribe()
68. (button1.fadeIn().mergeWith(button2.fadeIn()))
 .andThen(button3.fadeIn().mergeWith(button4.fadeIn()))
 .subscribe()
69. fun animate() {
 (button1.fadeIn().mergeWith(button2.fadeIn()))
 .andThen(button3.fadeIn().mergeWith(button4.fadeIn()))
 .subscribe()
 }
70. fun animate() {
 (button1.fadeIn().mergeWith(button2.fadeIn()))
 .andThen(button3.fadeIn().mergeWith(button4.fadeIn()))
 .subscribe()
 }
 
 fun fadeInTogether(view1: View, view2: View): Completable {
 return view1.fadeIn()
 .mergeWith(view2.fadeIn())
 }
71. fun animate() {
 fadeInTogether(button1, button2)
 .andThen(fadeInTogether(button3, button4))
 .subscribe()
 }
 
 fun fadeInTogether(view1: View, view2: View): Completable {
 return view1.fadeIn()
 .mergeWith(view2.fadeIn())
 }
73. fun animate() {
 
 }
74. fun animate() {
 val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS)
 }
75. fun animate() {
 val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS)
 val btnObservable = Observable.just(button1, button2, button3, button4)
 }
76. fun animate() {
 val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS)
 val btnObservable = Observable.just(button1, button2, button3, button4)
 
 Observable.zip(timeObservable, btnObservable,
 BiFunction<Long, View, Disposable> { time, view -> view.fadeIn().subscribe() })
 .subscribe()
 }
77. fun animate() {
 val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS)
 val btnObservable = Observable.just(button1, button2, button3, button4)
 
 Observable.zip(timeObservable, btnObservable,
 BiFunction<Long, View, Disposable> { time, view -> view.fadeIn().subscribe() })
 .subscribe()
 }
78. fun animate() {
 val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS)
 val btnObservable = Observable.just(button1, button2, button3, button4)
 
 Observable.zip(timeObservable, btnObservable,
 BiFunction<Long, View, Disposable> { time, view -> view.fadeIn().subscribe() })
 .subscribe()
 }
79. fun animate() {
 val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS)
 val btnObservable = Observable.just(button1, button2, button3, button4)
 
 Observable.zip(timeObservable, btnObservable,
 BiFunction<Long, View, Disposable> { _, view -> view.fadeIn().subscribe() })
 .subscribe()
 }
80. fun animate() {
 val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS)
 val btnObservable = Observable.just(button1, button2, button3, button4)
 
 Observable.zip(timeObservable, btnObservable,
 BiFunction<Long, View, Disposable> { _, view -> view.fadeIn().subscribe() })
 .subscribe()
 }
82. PSPDFKit-labs/VanGogh
83. PSPDFKit-labs/VanGogh • Provides RxJava2 wrappers for Android animations
84. PSPDFKit-labs/VanGogh • Provides RxJava2 wrappers for Android animations • Contains some common pre-made animations like fading, rotating, moving, etc. (more to be added over time)
85. PSPDFKit-labs/VanGogh • Provides RxJava2 wrappers for Android animations • Contains some common pre-made animations like fading, rotating, moving, etc. (more to be added over time) • More powerful reactive constructs
86. PSPDFKit-labs/VanGogh • Provides RxJava2 wrappers for Android animations • Contains some common pre-made animations like fading, rotating, moving, etc. (more to be added over time) • More powerful reactive constructs • Adding issues and pull requests very welcome
87. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
88. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
89. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .build() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
90. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .build().toCompletable() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
91. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
92. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
93. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
94. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({view -> view.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
95. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({it.setAlpha(0f)}) .doOnAnimationStart({view -> textView.setText(“Started”)}) .doOnAnimationEnd({view -> textView.setText(“Ended”)}) }
96. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({it.setAlpha(0f)}) .doOnAnimationStart({textView.setText(“Started”)}) .doOnAnimationEnd({textView.setText(“Ended”)}) }
97. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({it.setAlpha(0f)}) .doOnAnimationStart({textView.setText(“Started”)}) .doOnAnimationEnd({textView.setText(“Ended”)}) } fadeIn(someView).andThen(fadeIn(someOtherView)).subscribe()
98. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({it.setAlpha(0f)}) .doOnAnimationStart({textView.setText(“Started”)}) .doOnAnimationEnd({textView.setText(“Ended”)}) } fadeIn(someView).andThen(fadeIn(someOtherView)).subscribe() fadeIn(someView).mergeWith(fadeIn(someOtherView)).subscribe()
99. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({it.setAlpha(0f)}) .doOnAnimationStart({textView.setText(“Started”)}) .doOnAnimationEnd({textView.setText(“Ended”)}) } sequentially(fadeIn(someView), fadeIn(someOtherView), …).subscribe() fadeIn(someView).mergeWith(fadeIn(someOtherView)).subscribe()
100. PSPDFKit-labs/VanGogh fun fadeIn(view: View): AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady({it.setAlpha(0f)}) .doOnAnimationStart({textView.setText(“Started”)}) .doOnAnimationEnd({textView.setText(“Ended”)}) } sequentially(fadeIn(someView), fadeIn(someOtherView), …).subscribe() together(fadeIn(someView), fadeIn(someOtherView), …).subscribe()
101. PSPDFKit-labs/VanGogh sequentially(fadeIn(someView), fadeIn(someOtherView), …).subscribe() together(fadeIn(someView), fadeIn(someOtherView), …).subscribe()
102. PSPDFKit-labs/VanGogh sequentially( fadeInQuick(someView), fadeInSlow(someOtherView), … ).subscribe() together( fadeOut(someView, someInterpolator), fadeOut(someOtherView, someDuration), … ).subscribe()
103. fab.scaleUp .andThen(together(tv1.fadeIn, tv2.fadeIn)) .andThen(progressBar.fadeIn) .subscribe()
104. fab.scaleUp .andThen(together(fab.spin360, tv1.fadeIn, tv2.fadeIn)) .andThen(progressBar.fadeIn) .subscribe()
105. together( fab.scaleUp, tv1.fadeIn(duration = 500L), tv2.fadeIn, progressBar.expand) .subscribe()
106. Thank you!