Sei sulla pagina 1di 52

if it.

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

Samstag, 25. September 2010


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

Samstag, 25. September 2010


Samstag, 25. September 2010
Drawing & Animation

• Canvas
• SVG
• CSS3
• Other low-level techniques we won’t cover

Samstag, 25. September 2010


canvas
Samstag, 25. September 2010
Demo

Samstag, 25. September 2010


Quick Recap
<canvas id="c"
width="256"
height="256">
</canvas>

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

Samstag, 25. September 2010


... then you go apeshit.
fillRect
strokeRect
clearRect
beginPath
closePath
stroke
fill
moveTo
lineTo
arc
quadraticCurveTo
bezierCurveTo

Samstag, 25. September 2010


Samstag, 25. September 2010
Canvas Animations

• Manual redrawing
• Main draw loop
• Clear canvas
• Change position
• Draw objects

Samstag, 25. September 2010


Samstag, 25. September 2010
Canvas Interaction

• Manual, too
• Get x/y from click event
• Custom collision detection

Samstag, 25. September 2010


Libs

• ProcessingJS
• three.js

Samstag, 25. September 2010


Pros

• 100% flexibility
• Very fast for some things
• Read image data to jpeg/png

Samstag, 25. September 2010


Cons

• Resolution dependent
• Not accessible
• Text rendering... not trivial

Samstag, 25. September 2010


Demos

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

Samstag, 25. September 2010


svg
scalable vector graphics
Samstag, 25. September 2010
Demo

Samstag, 25. September 2010


svg Recap

• XML
• 2D vector graphics
• Filters, animations, sounds (WTF!), etc
• DOM based

Samstag, 25. September 2010


Drawing a red dot

<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="980" height="400">

<circle cx="50" cy="50" r="50"


fill="#ff0000" stroke="none"/>

</svg>

Samstag, 25. September 2010


Animation.. um, XML?!
<svg version="1.1"
width="320" height="320"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="circleGrad">
<stop offset="0%" stop-color="rgb(255, 255, 0)" />
<stop offset="100%" stop-color="rgb( 0, 255, 0)" />
</radialGradient>
</defs>

<ellipse fill="url(#circleGrad)" stroke="#000" cx="50%"


cy="50%" rx="50%" ry="50%">
<animate attributeName="rx" values="0%;50%;0%" dur="2s"
repeatCount="indefinite" />
<animate attributeName="ry" values="0%;50%;0%" dur="2s"
repeatCount="indefinite" />
</ellipse>
</svg>

Samstag, 25. September 2010


Samstag, 25. September 2010
BUT

Samstag, 25. September 2010


SVG, JS-style

• Raphaël
• Declarative JS > XML
• Has a cool animate function
• VML fallback for IE

Samstag, 25. September 2010


Interaction

• Easy!
• Use browser’s native capabilities
• Just addEventListener

Samstag, 25. September 2010


Pros

• SVG is resolution independent


• Event handling is a piece of cake
• Since it’s XML it could be accessible

Samstag, 25. September 2010


Cons

• No pixel manipulation
• Usually slower than canvas
• Needs Raphaël for backwards comp.

Samstag, 25. September 2010


Demos

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

Samstag, 25. September 2010


CSS3
Samstag, 25. September 2010
Demo

Samstag, 25. September 2010


CSS3 recap

• Effects? webkitTransition!
• Animation?
• webkitTransition
• webkitAnimation

Samstag, 25. September 2010


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

Samstag, 25. September 2010


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

Animated
property

Samstag, 25. September 2010


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

Animated
Duration
property

Samstag, 25. September 2010


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

Animated Timing
Duration
property Function

Samstag, 25. September 2010


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

Animated Timing Initial


Duration
property Function Delay

Samstag, 25. September 2010


Timing = Sugar

• Special timing functions


• Demo

Samstag, 25. September 2010


webkitTransform

• translate3d(x, y, z)
• scale3d(x, y, z)
• rotateX(a), rotateY(a), rotateZ(a)
• matrix3d(...)

Samstag, 25. September 2010


What makes CSS3
animations uber-useful?

Samstag, 25. September 2010


Samstag, 25. September 2010
On iOS devices they’re
hardware accelerated!

Samstag, 25. September 2010


Interaction is
of course native.

Samstag, 25. September 2010


Samstag, 25. September 2010
Samstag, 25. September 2010
Samstag, 25. September 2010
Samstag, 25. September 2010
There’s no “best”

Samstag, 25. September 2010


But here’s some advice:

Samstag, 25. September 2010


Target Device

• Does it support your technique?


• How do different techniques compare?
• Efficiency (FPS)
• Responsiveness (Events)

Samstag, 25. September 2010


A vague rule of thumb

if mobile?
'css3'
else
lasers()

Samstag, 25. September 2010


Samstag, 25. September 2010
Thanks
Questions?

Samstag, 25. September 2010