Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced RxJS: Animations

3,750 views

Published on

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

Published in: Software
  • This was amazing! Thank you for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Earn Up To $316/day! Easy Writing Jobs from the comfort of home! ★★★ http://ishbv.com/easywriter/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Advanced RxJS: Animations

  1. 1. Advanced RxJS Animations With Complex State
  2. 2. Don't mess with Switzerland
  3. 3. Ben Lesh Software Engineer at Google RxJS 5 Lead Twitter: @benlesh GitHub: github.com/benlesh
  4. 4. What is RxJS? "Lodash for events"
  5. 5. What is RxJS? Observables and "operators"
  6. 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. 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. 8. Observables Are Sets (This is why they’re powerful)
  9. 9. Operators transform Sets into new Sets (They map, filter, combine, flatten, etc)
  10. 10. To "Think Reactively" is to think in terms of transforming Sets
  11. 11. Animations
  12. 12. I always mention "animation" as a big source of async (but I never talk about it)
  13. 13. Different methods of animation • CSS • JavaScript • Raw JavaScript • Web Animation API (Some browsers) • JQuery • D3 • Greensock • … so many more
  14. 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. 15. Animations are sets of puppets over time!
  16. 16. Animations are sets of puppets over time!
  17. 17. Animations are sets of positions over time!
  18. 18. Moving x = 0 x = 1 x = 2 x = 3 Observable.of(0, 1, 2, 3)
  19. 19. Rotating r = 0 r = 90 r = 180 r = 270 Observable.of(0, 90, 180, 270)
  20. 20. Scale width = 1 width = 2 width = 3 width = 4 Observable.of(1, 2, 3, 4)
  21. 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. 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. 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. 24. We need values over time (This is where it gets a little tricky)
  25. 25. Elements of time in animations • Frame rate • Duration or Velocity
  26. 26. Frame A moment in time at which to adjust position and render
  27. 27. requestAnimationFrame
  28. 28. RxJS 5 has a Scheduler for that
  29. 29. What is a Scheduler in Rx? Schedulers control timing around when events occur: • next • error • complete • subscription
  30. 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. 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. 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. 33. Endless stream of frames for animations
  34. 34. Endless stream of frames for animations
  35. 35. http://jsbin.com/libihaciwu/1/edit?js,output
  36. 36. requestAnimationFrame is non-deterministic (That means we don't know when it'll fire)
  37. 37. Velocity or Duration (We should probably control this a little more)
  38. 38. Velocity is very simple math velocity = distance / time
  39. 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. 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. 41. Building a useful frames Observable A set of frames with frame numbers isn't really useful.
  42. 42. Get an observable of time passed each frame
  43. 43. Take our observable of frame numbers
  44. 44. … and map it into changes in time!
  45. 45. Oops, we need to get `start` on subscribe
  46. 46. RxJS Trick: Wrap it in a `defer`
  47. 47. Higher-order function to provide scheduler
  48. 48. Now let's apply that to a velocity
  49. 49. Higher-order function to make it more useful
  50. 50. http://jsbin.com/pimiliqabi/1/edit?js,output
  51. 51. Recap: Velocity-based Animations • Set of time differences on animation frame • Map those time differences into position differences • Simplest form of animations
  52. 52. Duration-based Animations Generally more useful in apps
  53. 53. We could just take what we had here…
  54. 54. … and just use takeWhile
  55. 55. …but maybe that isn't the best solution (We can do better)
  56. 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. 57. Let's treat them as percentages (From 0 -> 1)
  58. 58. Build a duration observable
  59. 59. We can pass through the scheduler (just in case)
  60. 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. 61. Moving over a distance is simple multiplication
  62. 62. Make distance a higher-order function
  63. 63. http://jsbin.com/favipemefu/1/edit?js,output
  64. 64. Adding Easing (bounce effects, elastic effects, etc)
  65. 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. 66. elasticOut ease function
  67. 67. Add easing before distance is mapped!
  68. 68. http://jsbin.com/nojeboqixi/1/edit?js,output
  69. 69. Making animations more reusable • Move rendering side effects to `do` block • Allow passing of duration with higher-order function
  70. 70. Making animations more reusable
  71. 71. Making animations more reusable
  72. 72. http://jsbin.com/kumugizivi/1/edit?js,output
  73. 73. Even more reusable
  74. 74. Even more reusable
  75. 75. 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
  76. 76. Animating state changes
  77. 77. http://jsbin.com/vejazipomo/1/edit?js,output
  78. 78. Using what we've built to "tween"
  79. 79. Using what we've built to "tween"
  80. 80. http://jsbin.com/curayibawa/1/edit?js,output
  81. 81. 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
  82. 82. Thank you! @benlesh rxworkshop.com

×