MODERN WEB
ANIMATION
Arūnas LIUIZA
Kaunas University of Applied Sciences
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.
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.
that 3rd party plugins did.
If the user has an up-to-date browser,
no plugins are needed.
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()
.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
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)
moved to a new environment (browser)
Similar in structure to HTML
Most of JavaScript tools are aplicable
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.
and more advanced ones also have good adoption rate.
Specialised JavaScript tools are being developed
to deal with SVG documents ( SnapSVG )
to deal with SVG documents ( SnapSVG )
Examples
JavaScript
SVG
Ačiū už dėmesį!
Klausimai?
MODERN WEBANIMATION
By Arūnas Liuiza
MODERN WEBANIMATION
- 1,180