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

scalable vector graphics
Samstag, 25. September 2010

svg

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 property

Duration

Samstag, 25. September 2010

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

Animated property

Duration

Timing Function

Samstag, 25. September 2010

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

Animated property

Duration

Timing Function

Initial 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