Advanced RxJS: Animations
Download as PPTX, PDF10 likes4,559 views
This document discusses using RxJS (Reactive Extensions for JavaScript) to handle animations. It defines animations as sets of values over time, similar to observables. It explains how to create observables that emit values for animation frames or based on duration/velocity. Operators like map and interval can be used to transform values over time for properties like position, rotation, scale. Higher order functions help make animation logic reusable. The document provides examples of moving, rotating and scaling elements using RxJS observables and operators.
![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])](https://image.slidesharecdn.com/jazoon2017-170508205533/85/Advanced-RxJS-Animations-21-320.jpg)
![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);](https://image.slidesharecdn.com/jazoon2017-170508205533/85/Advanced-RxJS-Animations-30-320.jpg)
Advanced RxJS: Animations
- 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
- 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
- 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
- 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
- 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
- 67. Add easing before distance is mapped!
- 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
- 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
- 80. Using what we've built to "tween"
- 81. Using what we've built to "tween"
- 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
Editor's Notes
- #52: github.com/mattdesl/eases