Canvas Animation

With a canvas you can animate your page. You can use images or draw geometric figures on the canvas. Here are some tutorials for canvas animation.

Parallax Effect ( Multilayer animation )

The following presentation is not strictly JavaScript but a sum up of a bunch of animation methods for the web:

Png Sprite Sheet (Image Magick)

Jeg skal til at udvikle spil som apps i Corona. Her får jeg brug for animationer. I Corona animeres via såkaldte spritesheets; men hvordan laver man dem?

Der findes en række programmer, som automatisk kan fremstille spritesheets. I Adobe Flash kan animationer fx eksporteres som sprite sheets.

Jeg har en teori om at man kan gøre det samme via Image Magicks kommando montage. Det viste sig at være rigtigt – og meget enkelt.

  1. Lav nogen tegninger,  der hver er en tegning i en animation. Tegningerne i denne demo er tegnet på en Bamboo i Photoshop. Illustrator eller Inkscape havde været et bedre valg, eftersom det er lettere at flytte vektorer.
  2. Gem dem som fx monster1.png, monster2.png etc. – filerne skal have samme størrelse fx 140 x 140px – eller hvad der nu er passende.

Brug montage ca. sådan:

# montage monster{1,2,3,4}.png -background transparent monsterDance2.png

 

Wireframe brainstorm

Sådanne designs kan vises i bredformat; men der er intet til hinder for at de forskellige tilstande blot bises som en lodret søjle i “block” display.

Wireframe
Wireframe – brainstorm. Øverst er processer “i gang”. Nederst er “færdig” eller “done”.

Herunder samme div-tags vist i et lodret design (Itten har ikke levet helt forgæves…):

Tilstand: "done"
Tilstand: “done”. Lodret wireframe.
Lodret wireframe til mindre displays
Lodret wireframe til mindre displays

Mellem drøm og vågen

Lodret scroll fra drømmen - med farvekoder for færdighedsgrad / sprint.
Lodret scroll fra drømmen – med farvekoder for færdighedsgrad / sprint.

I tilstanden mellem drøm og vågen så jeg, at div-tags ville være bedre end tabeller, når man skal gestalte et design af firkanter til PC og mindre mobile skærme. Det handler om float og display block på små skærme.

En lille skærm kan vise en kanban lodret – der scrolles op og ned. Måske også til højre og venstre når man skal gå fra story til sprint (i et scrum-inspireret design). Drømmen konkluderer tilsyneladende at div er bedre end table.

Farverne styres via CSS klasser, der igen genereres af PHP. Koderne kunne være:

  • Grøn = “done”
  • Gul = “todo”
  • Rød = “pending”

I drømmen lavede jeg en papirsprototypetest og bad brugerne om at klikke på firkanterne. De skulle sige, hvad der ideelt ville ske, når man klikker på en firkant. Forudsætningen var, at brugeren introduceres for kanban først.

Der var også noget om wireframe for placering af knappper på firkanterne; men den del af drømmen husker jeg ikke tydeligt. Vistnok noget med at man klikkede på firkanten for at komme ind til en editeringsmenu.

Layout for større skærm via float
Layout for større skærm via float