Beyond the standards

Advanced Animation and Physics in JavaScript

Beyond the standards

Advanced Animation and Physics in JavaScript

Beyond the standards

Pushing the web beyond its limits

Web Standards

+ Great theory

+ The way it should be

- Minor progress for 10 years- Very difficult to push across parties

Okay then,let‘s wait until

something changes.

No way!Let‘s push the

web!

Walk.How to create a walking character

1. The Basics

• Center or not?

• Click angles - How many possible directions?

• Preparing the images

2. The animation(s)

• Animate the character by changing the image

• Move the character

3. Tweak

• Walk in constant speed

• Easing

• Multiple clicks handling

Scroll.How to create a scrollable, isometric

world

But that‘s not possible!

• Isometry needs skewed, non-retangle elements

• HTML doesn‘ t have them

Don‘t think about limits

• So you cannot use events that „bleed through“ elements?

• Sure you can!

• Build your own event structure in JavaScript

Don‘t limit yourself to a given standard - you can always build your own with JavaScript.

There‘s one fundamental thing you need to know..

Knowledge is power

New standardsCanvas, CSS Transforms

Canvas

• Feels like a true HMTL element

• Easy JavaScript API

• Safari, Firefox, Opera

• ..IE support using ExCanvas

Get your hands dirty!

CSS Transforms

• Webkit-only (Safari, iPhone, Android, Air)

• 2D transformations on HTML elements

• Yes, all kinds of 2d transformations: Rotating, Scaling, Skewing

Example: Coverflow

...wouldn‘t it be cool to have CSS transforms in

other browsers?

..omg, IE already has!

Transformie

• Parses stylesheets and inline styles, tracks them using IE only onpropertychange

• Creates a custom matrix for every function (rotate, scale, skew)

• Multiplies all matrices

• Creates the IE matrix filter on the element

..but what about the rest?

CSS Transforms in other browsers

• Firefox (< 3.1)/Opera has no CSS transforms

• What can we do? Push the web!

• Two possible methods

• Rerender elements to canvas and modify them

• Insert elements into SVG and use its transform features

The Canvas approach

• Find all instances of -webkit-transform

• For every found element:

• Create a new <canvas> element at the exact same position as the original, with the same constrains

• Rotate/Modify/Translate the whole canvas by the values found in the transform functions

• Literally draw borders, background and text for the original item into the canvas and for all sub items

• Recompute the new constrains of the element

Example: Canvas

The SVG approach

• Find all instances of -webkit-transform

• For every found element:

• Serialize the whole node (outerHTML) into a string (without positioning data in the style attribute)

• Wrap it around a prepared SVG XML Header

• Also insert the transform value as <g transform=‘...‘>

• Encode the whole string to base64

• Create a new embed element with the base64 string as data source, and render it to the page

Example: SVG

Pushing the standardsHow library developers help

defining standards

How a library dev smoothens the path before web standards jump in

• The Copy approach

• Replicate an existing standard on other platforms with the help of different technologies

• Example: Excanvas

• The „Lowest common multiple“ approach

• Take a couple of different standards across browsers and create a subset that can be used across browsers

• Example: Dojox GFX

Using the LCM approach, we can help define new standards.

..since we are the ones that try to find a suitable subset for the end-developer

Now everyone!Let‘s push the

web!

Question?

Audience Response

Thank you for your attention!http://paulbakaus.com