My talk on Animations with RxJS from Jazoon in Bern, Switzerland, 2017

1. Advanced RxJS
Animations With Complex State

2. Don't mess with Switzerland

3. Ben Lesh
Software Engineer at Google
RxJS 5 Lead
Twitter:
@benlesh
GitHub:
github.com/benlesh

4. What is RxJS?
"Lodash for events"

5. What is RxJS?
Observables and "operators"

6. RxJS and Observables
RxJS 5 on Github:
https://github.com/reactivex/rxjs
RxJS5 docs:
http://reactivex.io/rxjs
TC39 Observable Proposal
https://github.com/tc39/proposal-observable

7. Observable (Quick Version)
• A set of values over time
• On subscription, ties and observer to a producer of values
• On completion or unsubscription, executes tear down

8. Observables Are Sets
(This is why they’re powerful)

9. Operators transform Sets
into new Sets
(They map, filter, combine, flatten, etc)

10. To "Think Reactively" is to think
in terms of transforming Sets

11. Animations

12. I always mention "animation" as
a big source of async
(but I never talk about it)

13. Different methods of animation
• CSS
• JavaScript
• Raw JavaScript
• Web Animation API (Some browsers)
• JQuery
• D3
• Greensock
• … so many more

14. Animation (defined)
”The technique of photographing successive drawings or positions of
puppets or models to create an illusion of movement when the movie
is shown as a sequence”

15. Animations are sets of puppets
over time!

16. Animations are sets of puppets
over time!

17. Animations are sets of positions
over time!

18. Moving
x = 0 x = 1 x = 2 x = 3
Observable.of(0, 1, 2, 3)

19. Rotating
r = 0 r = 90 r = 180 r = 270
Observable.of(0, 90, 180, 270)

20. Scale
width = 1 width = 2 width = 3 width = 4
Observable.of(1, 2, 3, 4)

21. Scale
width = 1 width = 2 width = 3 width = 4
height = 1 height = 2 height = 3 height = 4
Observable.of([1, 1], [2, 2], [3, 3], [4, 4])

22. Scale
width = 1 width = 2 width = 3 width = 4
height = 1 height = 2 height = 3 height = 4
Observable.of(1, 2, 3, 4);

23. Moving
x = 0 x = 1 x = 2 x = 3
y = 0 y = 1 y = 2 y = 3
Observable.of(0, 1, 2, 3);

24. We need values over time
(This is where it gets a little tricky)

25. Elements of time in animations
• Frame rate
• Duration or Velocity

26. Frame
A moment in time at which to adjust position and render

27. requestAnimationFrame

28. RxJS 5 has a Scheduler for that

29. What is a Scheduler in Rx?
Schedulers control timing around when events occur:
• next
• error
• complete
• subscription

30. What is a Scheduler in Rx?
Used in Observable most creation methods if provided as the last
argument:
• Observable.of(1, 2, 3, scheduler);
• Observable.from(['foo', 'bar'], scheduler);
• Observable.range(0, 10, scheduler);
• Observable.timer(1000, scheduler);

31. What is a Scheduler in Rx?
Used with special operators for control over when existing observables'
events occur:
• someObservable$.observeOn(scheduler);
• someObservable$.subscribeOn(scheduler);

32. RxJS 5 Schedulers*
• queue – During the same "job" but on a queue. Aka "breadth first".
• asap – Next "job" aka "microtask".
• async – Next "timeout".
• animationFrame – Next requestAnimationFrame
* if scheduled with zero delay.

33. Endless stream of frames for animations

34. Endless stream of frames for animations

35. http://jsbin.com/libihaciwu/1/edit?js,output

36. requestAnimationFrame is
non-deterministic
(That means we don't know when it'll fire)

37. Velocity or Duration
(We should probably control this a little more)

38. Velocity is very simple math
velocity = distance / time

39. Animate by velocity
• Move by V units every T time units (e.g. 5 pixels per ms)
• Used for never-ending animations
• Useful in games, loading spinners, etc.

40. Animate by duration
• Move to position X over T time units
• Used for animations occurring over a specific amount of time
• Useful for data visualizations, transitions, etc.

41. Building a useful frames
Observable
A set of frames with frame numbers isn't really useful.

42. Get an observable of time passed each frame

43. Take our observable of frame numbers

44. … and map it into changes in time!

45. Oops, we need to get `start` on subscribe

46. RxJS Trick: Wrap it in a `defer`

47. Higher-order function to provide scheduler

48. Now let's apply that to a velocity

49. Higher-order function to make it more useful

50. http://jsbin.com/pimiliqabi/1/edit?js,output

51. Recap: Velocity-based Animations
• Set of time differences on animation frame
• Map those time differences into position differences
• Simplest form of animations

52. Duration-based Animations
Generally more useful in apps

53. We could just take what we had here…

54. … and just use takeWhile

55. …but maybe that isn't the
best solution
(We can do better)

56. What if we could treat all duration-based
animations the same?
• We know it has a start point
• We know it's going to end
• It's all numbers so we can scale it to any form we like

57. Let's treat them as
percentages
(From 0 -> 1)

58. Build a duration observable

59. We can pass through the scheduler
(just in case)

60. Giving us a range of values between 0 and 1
0… 0.1 ... 0.22 ... 0.43 ... 0.56 ... 0.67 ... 0.71 ... 0.77 ... 0.81 ... 0.88 ... 0.9 ... 0.97 ... 1

61. Moving over a distance
is simple multiplication

62. Make distance a higher-order function

63. http://jsbin.com/favipemefu/1/edit?js,output

64. Adding Easing
(bounce effects, elastic effects, etc)

65. Duration observables are always 0 to 1
• No matter how long the duration
• 0 to 1 can also represent the distance travelled (0% to 100%)
• We can create an easing function that transforms the 0 to 1 duration
values to a different 0 to 1 distance value
• github.com/mattdesl/eases

66. elasticOut ease function

67. Add easing before distance is mapped!

68. http://jsbin.com/nojeboqixi/1/edit?js,output

69. Making animations more reusable
• Move rendering side effects to `do` block
• Allow passing of duration with higher-order function

70. Making animations more reusable

71. Making animations more reusable

72. http://jsbin.com/kumugizivi/1/edit?js,output

73. Even more reusable

74. Even more reusable

77. Recap: Duration based animations
• Create a duration observable that emits values 0 to 1
• map it to a 0 to 1 percentage of distance if you want to use easing
functions
• Use simple multiplication to manage distance
• Try to use higher-order functions to promote reusability

78. Animating state changes

79. http://jsbin.com/vejazipomo/1/edit?js,output

80. Using what we've built to "tween"

81. Using what we've built to "tween"

82. http://jsbin.com/curayibawa/1/edit?js,output

83. Animations with RxJS
• Observables are sets of values over time
• Animations are sets of values over time
• You need to deal with two forms of time
• Frames
• Duration/Velocity
• Use animationFrame scheduler and interval
• Use higher order functions to keep things reusable
• The rest is basic math and composition

84. Thank you!
@benlesh
rxworkshop.com