Animate the Web with EmberJS

Learn more about story-driven animations and how to bring them to the web.
Were you a fan of animated cartoons as a kid, and wondered if one day you could create your own? Here's the great news: you can! Using open web standards and Ember.js you're able to create frame-by-frame animations—and even to make them interactive! In this talk you will learn how open web standards empower creators to tell animated stories and deliver them through the web. Alongside animation demos you will see how you can leverage the power of two Web APIs - HTML5 Canvas and the Web Animations API - in Ember efficiently and how you can embed your animations in Ember components for full flexibility and reusability across your app.

Watch this talk at EmberConf 2017: https://www.youtube.com/watch?v=wFJPIjRTIVU

Transcript

1. ANIMATE THE WEB WITH EMBERJS Jessica Jordan jjordan_dev
2. WHAT I DO FOR WORK
3. WHAT I DO AFTER WORK
4. ANIMATIONS
5. ANIMATIONS MAY REFER TO... Interactions on UI Elements :hover
6. ANIMATIONS MAY REFER TO... Page Transitions with e.g Ember Liquid Fire
7. ANIMATIONS MAY REFER TO... Data Visualization
8. STORYTELLING THROUGH ANIMATIONS
9. ANIMATIONS ANATOMY
10. Muybridge - The Horse In Motion, 1878 FRAME-BY-FRAME ANIMATIONS
11. Muybridge - The Horse In Motion, 1878 FRAME-BY-FRAME ANIMATIONS
12. EARLY BEGINNINGS OF ANIMATIONS 19th century animation devices: Phenakistoscope
13. ....LEADING TO FIRST CINEMATOGRAPHY Roundhay Garden Scene 1888 - Louis Le Prince
14. ANIMATIONS - A DEFINITION Image Sequence + Display Frequency = Illusion of motion
15. SMOOTH ANIMATIONS POWERED BY YOUR BRAIN Phi Phenomenon Gestalt Psychology by Max Wertheimer (1912)
16. EFFECTS OF FRAME RATES
17. FRAME-BY-FRAME ANIMATIONS IN CARTOONS Alla Gadassik - "The Animated Line: Performing and Generating Movement in Early Animation"
18. THE STORY OF ANIMATIONS CONTINUES UNTIL TODAY ANIMATIONS ON THE WEB
19. ANIMATIONS TOOLS AND WEB APIS
20. WEB ANIMATIONS 20 YEARS AGO?
21. FLASH SINCE 1996
22. VIDEOS! AUDIO! ANIMATIONS!
23. "HTML5" ANIMATIONS ...and SVG, WebGL, XML and other Web APIs
24. WHY OPEN WEB STANDARDS? open consistent available What about the creator experience?
25. THE INFINITE CANVAS Rachel Nabors, Keynote "Storytelling on the Shoulders of Giants" - OSCON 2014
26. ANIMATIONS DEMO EMBER & HTML5 CANVAS
27. HTML5 CANVAS <canvas></canvas> Powerful Web API which can be leveraged for animations
28. CANVAS CONTEXT OBJECT <!-- index.html --> <canvas id="comic-panel"></canvas> // drawing.js const canvas = document.getElementById('comic-panel'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } else { throw `Everything's fresh, but there's no context object here, so time for some polyfilling: bower install --save canvas-5-polyfill`; }
29. HTML5 CANVAS & EMBER COMPONENTS Let's build it!
30. CREATING THE COMPONENT {{comic-panel width=width height=height}} // app/components/comic-panel.js import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'canvas' })
31. DRAWING TO THE CANVAS Canvas sx, sy: origin of source image sWidth, sHeight: width and height of source image dx, dy: origin of canvas destination dWidth, dHeight: width and height of canvas destination
32. DRAWING TO THE CANVAS // app/components/comic-panel.js export default Ember.Component.extend({ Ember.on('init', function() { const image = new Image(); image.onload = () => { this.set('naturalHeight', image.height); this.set('naturalWidth', image.width); this.set('pseudoImg', image); }; image.src = this.get('imgSrc'); }) })
33. DRAWING TO THE CANVAS // app/components/comic-panel.js export default Ember.Component.extend({ draw() { // ... ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.drawImage(img, sx, sy, sWidth, sHeight, 0, 0, dWidth, canvasHeight); } }) /* app/components/comic-panel.js */ setup: Ember.observer('pseudoImg', function() { const ctx = this.get('element').getContext('2d'); this.set('ctx', ctx); this.draw(); })
34. GETTING ACTIONS HOOKED IN
35. RUN ANIMATIONS // app/components/comic-panel.js loop() { this.draw(); this.nextFrame(); Ember.run.later(this, this.loop, 100); }
36. RUN AND CANCEL ANIMATIONS const loop = Ember.run.later(this, this.loop, 100); this.set('currentLoop', loop); if (!this.get('runAnimation')) { Ember.run.cancel(currentLoop); this.set('currentLoop', null); })
37. DEMO FINAL
38. HTML5 CANVAS - GOOD TO KNOW Performance Developer Control ? Creator Experience ? Accessibility
39. HTML5 REQUIRES LOTS OF WIRING UP...
40. ANIMATIONS DEMO EMBER & WEB ANIMATIONS API
41. WEB ANIMATIONS API - ANIMATION OF THE FUTURE
42. ...BUT THE BROWSER SUPPORT? That's a "No", right?
43. WEB ANIMATIONS JS POLYFILL Build WAAPI powered animations today!
44. BUT OF COURSE... ...there's an addon for that! ember install ember-web-animations-next-polyfill
45. CSS3 ANIMATIONS GO JAVASCRIPT CSS3 @keyframes rotating { 0% { transform: rotate(0) translate3D(-50%, -50%, 0); color: #000; }, 33% { color: #431236; offset: 0.333; }, 66% { transform: rotate(360deg) translate3D(-50%, -50%, 0); color: #000: } };
46. KEYFRAME EFFECTS JS // KeyFrameEffect Objects: var rotating = [ { transform: `rotate(0) translate3D(-50%, -50%, 0)`, color: '#000' }, { color: '#431236', offset: 0.333 }, { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' } ];
47. DEMO: ANIMATION COMPONENT IN EMBER BASED ON WAAPI
48. {{comic-panel}}
49. CREATING KEYFRAMEEFFECTS
50. CREATING KEYFRAMEEFFECTS // app/my-route/controller.js let characterObject = { ....., keyFrames: [ { backgroundPosition: '0 0' }, { backgroundPosition: `0 100%` } ], ..... };
51. CREATING KEYFRAMEEFFECTS let characterObject = { ....., animationOptions: { duration: 500, easing: `steps(5)`, iterations: 'Infinity' } ..... }; {{comic-panel comicLayer=characterObject}}
52. CREATING AND STARTING THE ANIMATION /* app/components/comic-panel/component.js */ export default Ember.Component.extend({ ... startAnimation: Ember.on('didRender', function() { let keyFrames = this.get('keyFrames'); let animationOptions = this.get('animationOptions'); this.$()[0].animate(keyFrames, animationOptions); }), ...
53. LET'S MAKE IT REAL
54. MULTI-LAYERED ANIMATIONS
55. EMBEDDING COMIC LAYER SUB COMPONENTS /* app/components/comic-panel/template.hbs */ {{#each comicLayerList as |layer|}} {{comic-layer keyFrames=layer.keyFrames animationOptions=layer.animationOptions frameAction=(action "setKeyFrames")}} {{/each}} // app/components/comic-panel-layer.js createKeyFrames: Ember.on('didRender', function() { // ... const layer = this.get('element'); const keyFrame = new KeyframeEffect( layer, this.get('keyFrames'), this.get('animationOptions') ); this.sendAction('frameAction', keyFrame); }
56. SYNCHRONIZE THE ANIMATION LAYERS /* app/components/comic-panel/component.js */ setupAnimation() { const timeline = this.get('timeline'); const keyFrameEffects = this.get('keyFrameEffects'); const group = new GroupEffect(keyFrameEffects); const animation = new Animation(group, timeline); animation.pause(); this.set('animation'); },
57. SYNCHRONIZE THE ANIMATION LAYERS /* app/components/comic-panel/component.js */ export default Ember.Component.extend({ // ... actions: { play() { this.get('animation').play(); } pause() { this.get('animation').pause(); } } // ... })
58. DEMO FINAL
59. WEB ANIMATIONS API - GOOD TO KNOW Creator Experience Developer Control Accessibility ? Performance
61. ANIMATIONS EPILOGUE
62. THE STORY ABOUT ANIMATIONS CONTINUES UNTIL TODAY
63. WITH EMBER & OPEN WEB STANDARDS
64. THE WEB IS YOURS TO BE ANIMATED
65. RESOURCES Tomster and Zoey Illustration by "Inifinite Canvas" quote from Learn more about the Web Animations API with the Lindsey Wilson Rachel Nabor's Keynote @ OSCON 2014: "Storytelling On The Shoulders of Giants" excellent How To Guide at MDN Full source code for the animation demos
66. THANK YOU! Jessica Jordan jjordan_dev