MODERN WEB
ANIMATION

Arūnas LIUIZA
Kaunas University of Applied Sciences

3rd party Browser Plugins




  • Java
  • ActiveX
  • Silverlight
  • Unity
  • FLASH

Problem


User has to install the plugin to his computer
No plugin has 100% penetration
Even Flash.

Apple iOS platform does not support Flash at all.
Flash performance is very bad on mobile devices.

SOLUTion


HTML5/CSS 

Native support for most of the features
that 3rd party plugins did.

If the user has an up-to-date browser,
no plugins are needed.

CSS3


Animations / transitions


CSS3


Not all CSS properties can be animated

Vendor prefixes (-moz-; -webkit-; -o-; -ms-)

Have to test across browsers

CSS MANIPULATION VIA JAVASCRIPT

Gradual changes to CSS

.hide()/.show()
.fadeIn()/.fadeOut()
.animate()

CSS manipulation VIA JAVASCRIPT


Very good browser support

A lot of information/documentation/tutorials

Good for creating elaborate scenarios (gameplay, etc.)

<CANVAS>


Enables the dynamic generation of bitmap images
via JavaScript

Complicated interfaces, so libraries like
KineticJS are very popular.

robust and user friendly
interfaces and methods,
grouping, layers, drag and drop support

<CANVAS>


Good browser support
(issues only in Opera Mini)

A lot of re-draw is needed for animation

Hard to detect user interaction with objects

SVG


Scaleable Vector Graphics

An 'old' (circa 2001) standard,
moved to a new environment (browser)

Similar in structure to HTML
Most of JavaScript tools are aplicable

SVG


Easy to animate separate objects in the image

Can bind event listeners to any object (line, shape, group)

As of 2014, all major browsers support basic SVG features
and more advanced ones also have good adoption rate. 

Specialised JavaScript tools are being developed
to deal with SVG documents ( SnapSVG )

Examples



JavaScript
game.cal.lt 

SVG 
tange.cal.lt


Ačiū už dėmesį!

Klausimai?