Animate the Web with EmberJS

Slide 1

Slide 1 text

ANIMATE THE WEB WITH EMBERJS Jessica Jordan jjordan_dev

Slide 2

Slide 2 text

WHAT I DO FOR WORK

Slide 3

Slide 3 text

WHAT I DO AFTER WORK

Slide 4

Slide 4 text

ANIMATIONS

Slide 5

Slide 5 text

ANIMATIONS MAY REFER TO... Interactions on UI Elements :hover

Slide 6

Slide 6 text

ANIMATIONS MAY REFER TO... Page Transitions with e.g Ember Liquid Fire

Slide 7

Slide 7 text

ANIMATIONS MAY REFER TO... Data Visualization

Slide 8

Slide 8 text

STORYTELLING THROUGH ANIMATIONS

Slide 9

Slide 9 text

ANIMATIONS ANATOMY

Slide 10

Slide 10 text

Muybridge - The Horse In Motion, 1878 FRAME-BY-FRAME ANIMATIONS

Slide 11

Slide 11 text

Muybridge - The Horse In Motion, 1878 FRAME-BY-FRAME ANIMATIONS

Slide 12

Slide 12 text

EARLY BEGINNINGS OF ANIMATIONS 19th century animation devices: Phenakistoscope

Slide 13

Slide 13 text

....LEADING TO FIRST CINEMATOGRAPHY Roundhay Garden Scene 1888 - Louis Le Prince

Slide 14

Slide 14 text

ANIMATIONS - A DEFINITION Image Sequence + Display Frequency = Illusion of motion

Slide 15

Slide 15 text

SMOOTH ANIMATIONS POWERED BY YOUR BRAIN Phi Phenomenon Gestalt Psychology by Max Wertheimer (1912)

Slide 16

Slide 16 text

EFFECTS OF FRAME RATES

Slide 17

Slide 17 text

FRAME-BY-FRAME ANIMATIONS IN CARTOONS Alla Gadassik - "The Animated Line: Performing and Generating Movement in Early Animation"

Slide 18

Slide 18 text

THE STORY OF ANIMATIONS CONTINUES UNTIL TODAY ANIMATIONS ON THE WEB

Slide 19

Slide 19 text

ANIMATIONS TOOLS AND WEB APIS

Slide 20

Slide 20 text

WEB ANIMATIONS 20 YEARS AGO?

Slide 21

Slide 21 text

FLASH SINCE 1996

Slide 22

Slide 22 text

VIDEOS! AUDIO! ANIMATIONS!

Slide 23

Slide 23 text

"HTML5" ANIMATIONS ...and SVG, WebGL, XML and other Web APIs

Slide 24

Slide 24 text

WHY OPEN WEB STANDARDS? open consistent available What about the creator experience?

Slide 25

Slide 25 text

THE INFINITE CANVAS Rachel Nabors, Keynote "Storytelling on the Shoulders of Giants" - OSCON 2014

Slide 26

Slide 26 text

ANIMATIONS DEMO EMBER & HTML5 CANVAS

Slide 27

Slide 27 text

HTML5 CANVAS Powerful Web API which can be leveraged for animations

Slide 28

Slide 28 text

CANVAS CONTEXT OBJECT // 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`; }

Slide 29

Slide 29 text

HTML5 CANVAS & EMBER COMPONENTS Let's build it!

Slide 30

Slide 30 text

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' })

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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'); }) })

Slide 33

Slide 33 text

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(); })

Slide 34

Slide 34 text

GETTING ACTIONS HOOKED IN

Slide 35

Slide 35 text

RUN ANIMATIONS // app/components/comic-panel.js loop() { this.draw(); this.nextFrame(); Ember.run.later(this, this.loop, 100); }

Slide 36

Slide 36 text

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); })

Slide 37

Slide 37 text

DEMO FINAL

Slide 38

Slide 38 text

HTML5 CANVAS - GOOD TO KNOW Performance Developer Control ? Creator Experience ? Accessibility

Slide 39

Slide 39 text

HTML5 REQUIRES LOTS OF WIRING UP...

Slide 40

Slide 40 text

ANIMATIONS DEMO EMBER & WEB ANIMATIONS API

Slide 41

Slide 41 text

WEB ANIMATIONS API - ANIMATION OF THE FUTURE

Slide 42

Slide 42 text

...BUT THE BROWSER SUPPORT? That's a "No", right?

Slide 43

Slide 43 text

WEB ANIMATIONS JS POLYFILL Build WAAPI powered animations today!

Slide 44

Slide 44 text

BUT OF COURSE... ...there's an addon for that! ember install ember-web-animations-next-polyfill

Slide 45

Slide 45 text

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: } };

Slide 46

Slide 46 text

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' } ];

Slide 47

Slide 47 text

DEMO: ANIMATION COMPONENT IN EMBER BASED ON WAAPI

Slide 48

Slide 48 text

Slide 49

Slide 49 text

CREATING KEYFRAMEEFFECTS

Slide 50

Slide 50 text

CREATING KEYFRAMEEFFECTS // app/my-route/controller.js let characterObject = { ....., keyFrames: [ { backgroundPosition: '0 0' }, { backgroundPosition: `0 100%` } ], ..... };

Slide 51

Slide 51 text

CREATING KEYFRAMEEFFECTS let characterObject = { ....., animationOptions: { duration: 500, easing: `steps(5)`, iterations: 'Infinity' } ..... }; {{comic-panel comicLayer=characterObject}}

Slide 52

Slide 52 text

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); }), ...

Slide 53

Slide 53 text

LET'S MAKE IT REAL

Slide 54

Slide 54 text

MULTI-LAYERED ANIMATIONS

Slide 55

Slide 55 text

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); }

Slide 56

Slide 56 text

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'); },

Slide 57

Slide 57 text

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(); } } // ... })

Slide 58

Slide 58 text

DEMO FINAL

Slide 59

Slide 59 text

WEB ANIMATIONS API - GOOD TO KNOW Creator Experience Developer Control Accessibility ? Performance

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

ANIMATIONS EPILOGUE

Slide 62

Slide 62 text

THE STORY ABOUT ANIMATIONS CONTINUES UNTIL TODAY

Slide 63

Slide 63 text

WITH EMBER & OPEN WEB STANDARDS

Slide 64

Slide 64 text

THE WEB IS YOURS TO BE ANIMATED

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

THANK YOU! Jessica Jordan jjordan_dev