If It Moves They Will Watch It

8/8/2019 If It Moves They Will Watch It

1/52

if it.moves

they.will (_) ->_.watch it

Samstag, 25. September 2010


2/52

> who

[ {"name": "Sebastian Deutsch", "twitter": "sippndipp"},{"name": "Stephan Seidt", "twitter": "evilhackerdude"}

]



3/52



4/52

Drawing & Animation

Canvas

SVG

CSS3

Other low-level techniques we wont cover



5/52



6/52

Demo

http://9elements.com/html5demos/ifitmovestheywillwatchit/jsconf-demos/canvas-vs-svg-vs-matrix3d/http://9elements.com/html5demos/ifitmovestheywillwatchit/jsconf-demos/canvas-vs-svg-vs-matrix3d/


7/52

Quick Recap

c = document.getElementById 'c'.getContext '2d'



8/52

... then you go apeshit.

fillRectstrokeRectclearRect

beginPathclosePathstrokefill

moveTolineToarcquadraticCurveTobezierCurveTo



9/52Samstag, 25. September 2010


10/52

Canvas Animations

Manual redrawing

Main draw loop Clear canvas

Change position

Draw objects



12/52

Canvas Interaction

Manual, too Get x/y from click event

Custom collision detection



13/52

Libs

ProcessingJS

three.js

http://github.com/mrdoob/three.js/http://github.com/mrdoob/three.js/http://processingjs.org/http://processingjs.org/


14/52

Pros

100% flexibility Very fast for some things

Read image data to jpeg/png



15/52

Cons

Resolution dependent Not accessible

Text rendering... not trivial



16/52

Demos

http://9elements.com/io/projects/html5/canvas/

http://networkmap.projects.9elements.de/

http://9elements.com/projects/bbc_final/

http://9elements.com/projects/bbc_final/http://networkmap.projects.9elements.de/http://9elements.com/projects/bbc_final/http://9elements.com/projects/bbc_final/http://networkmap.projects.9elements.de/http://networkmap.projects.9elements.de/http://9elements.com/io/projects/html5/canvas/http://9elements.com/io/projects/html5/canvas/http://9elements.com/io/projects/html5/canvas/http://9elements.com/io/projects/html5/canvas/


17/52

scalable vector graphicsSamstag, 25. September 2010


18/52

Demo



19/52

svg Recap

XML

2D vector graphics

Filters, animations, sounds (WTF!), etc

DOM based



20/52

Drawing a red dot



21/52

Animation.. um, XML?!



23/52

BUT



24/52

SVG, JS-style

Raphal

Declarative JS > XML

Has a cool animate function

VML fallback for IE



25/52

Interaction

Easy! Use browsers native capabilities

Just addEventListener



26/52

Pros

SVG is resolution independent Event handling is a piece of cake

Since its XML it could be accessible



27/52

Cons

No pixel manipulation Usually slower than canvas

Needs Raphal for backwards comp.



28/52

Demos

http://hackfwd.com/dilution

http://9elements.com/projects/mozilla/

http://9elements.com/projects/mozilla/http://9elements.com/projects/mozilla/http://hackfwd.com/dilutionhttp://hackfwd.com/dilution


29/52



30/52

Demo



31/52

CSS3 recap

Effects? webkitTransition!

Animation?

webkitTransition

webkitAnimation



32/52

webkitTransition = '-webkit-transform 1s ease-out 0s'



33/52


Animated

property



34/52


Animated

property

Duration



35/52


Animated

property

DurationTiming

Function



36/52


Animated

property

DurationTiming

Function

Initial

Delay



37/52

Timing = Sugar

Special timing functions

Demo

http://9elements.com/html5demos/ifitmovestheywillwatchit/jsconf-demos/css-transitions/http://9elements.com/html5demos/ifitmovestheywillwatchit/jsconf-demos/css-transitions/


38/52

webkitTransform

translate3d(x, y, z)

scale3d(x, y, z)

rotateX(a), rotateY(a), rotateZ(a)

matrix3d(...)



39/52

What makes CSS3animations uber-useful?



40/52



41/52

On iOS devices theyrehardware accelerated!



42/52

Interaction isof course native.



43/52



44/52



45/52



46/52



47/52

Theres no best



48/52

But heres some advice:



49/52

Target Device

Does it support your technique?

How do different techniques compare?

Efficiency (FPS)

Responsiveness (Events)



50/52

A vague rule of thumb

if mobile?'css3'else

lasers()



51/52



52/52

ThanksQuestions?

If It Moves They Will Watch It

Documents

Transcript of If It Moves They Will Watch It