Animating – the Web – What is animation?

View Github Repository Open presentation in a new window

xinsq

See all presentation from xinsq

Animating – the Web – What is animation?

0 0

Animating-The-Web

Samples of web animations

On Github xinsq / Animating-The-Web

Animating

the Web

Xin Xin

What is animation?

The state of being alive. Rapid display of a sequence of images to create an illusion of movement

Frames

Animation = sequence of frames

made possible by persistance of vision

Animation =

anything that is made

frame by frame

to be viewed in sequence

Web Animation

Gif
Flash
SVG
Canvas
Dynamic HTML

Gif

Beautiful but expensive
This is 247 images, ~7 MB

Flash

(Yep still alive)
+ animation tools
+ interactivity
+ cross browser compatibile
- longer load times
- can't optimize for search engines
-  poor accessibility 

SVG Animation

+ lightweight
+ vector
+ searchable
- renders slowly with increasing complexity
- limited interactivity and rendering
- can't save image
- poor tools

Canvas

+ no plugin needed
+ draws images on the fly
+ hardware acceleration
- poor animation tools
- spotty support
- animation is hard
- accessibility

C-c-combo!

Dynamic HTML

uses js/css to change DOM

CSS Animation

CSS + JS

CSS + JS + jQuery

Resources

Thanks!