Building animations with RxJS and JavaScript from the ground up.

1. Advanced RxJS
Reactive Animations

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

3. What is RxJS?
"Lodash for events"

4. What is RxJS?
Observables and "operators"

5. 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

6. 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

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

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

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

10. Animations

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

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

13. 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”

14. Animations are sets of positions
over time!

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

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

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

18. 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])

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

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

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

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

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

24. requestAnimationFrame

25. RxJS 5 has a Scheduler for that

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

27. 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);

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

29. 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.

30. Endless stream of frames for animations

31. Endless stream of frames for animations

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

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

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

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

36. 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.

37. 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.

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

39. Get an observable of time passed each frame

40. Take our observable of frame numbers

41. … and map it into changes in time!

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

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

44. Higher-order function to provide scheduler

45. Now let's apply that to a velocity

46. Higher-order function to make it more useful

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

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

49. Duration-based Animations
Generally more useful in apps

50. We could just take what we had here…

51. … and just use takeWhile

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

53. 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

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

55. Build a duration observable

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

57. 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

58. Moving over a distance
is simple multiplication

59. Make distance a higher-order function

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

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

62. 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

63. elasticOut ease function

64. Add easing before distance is mapped!

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

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

67. Making animations more reusable

68. Making animations more reusable

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

70. Even more reusable

71. Even more reusable

74. 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

75. Animating state changes

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

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

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

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

80. 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

81. Thank you!
@benlesh
rxworkshop.com