Animasjon med CSS Gløer Olav Langslet Sandvika VGS Leksjon 11 Informasjonsteknologi 1 og 2 Animasjon med css Vi har tidligere sett at vi kan programmere bevegelse ved å bruke JavaScript, enten ved å bruke canvas, eller ved å endre css-egenskaper på html-elementer. Adobe Edge Animate gjør det siste, de bruker JavaScript til å flytte rundt på en div-elementer, og de kan også endre andre css-egenskaper som størrelse og gjennomsiktighet. I denne leksjonen skal vi for en gangs skyld la JavaScriptingen vår få hvile, og se om vi kan lage noen spik bare ved hjelp av css. Og det beste av alt er at dette er relativt enkelt. Før du vet ordet av det har du sendt en ball i full fart rundt omkring i nettleseren din.
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi setter i gang En hyllest først Da jeg studerte informatikk ved universitetet i Oslo, hadde vi en gang en gjesteforeleser i faget Utvikling av interaktive nettsider. Foreleseren denne dagen het Håkon Wium Lie, mannen som i sin tid lagde CSS. En nordmann! Hele presentasjonen hans var laget i html og css, og det så helt ut som en PowerPointpresentasjon. Fra den dag har han vært min største internett-helt. opprinnelige posisjon: Vi varmer opp med transforms Vi kan endre et element ved såkalte transforms. De forskjellige typene er: 2 translate() rotate() scale() skew() matrix() Dette er egenskaper vi kan endre over tid når vi skal lage animasjoner, men vi skal først se på hvordan de fungerer. translate Translate flytter et element fra sin translate(200px, 100px) flytter elementet 200px til høyre og 100px nedover. -ms er for IE9, -webkit er for Chrome og Safari, -o er for Opera og moz er for Firefox. Etter hvert kan vi droppe disse prefiksene. http://langslet.com/vgs/kode/leksjon_11/ Transform.html
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Transforms og animasjoner er en del av CSS3. rotate() roterer et element. scale(1, 0.5) vil gjøre elementet halvparten så høyt som det opprinnelig var. Vi antar at vi har en liten firkant som har klasse transform i alle eksemplene. Altså <div class= transform ></div> Her har vi rotert den 45 grader. http://langslet.com/vgs/kode/leksjon_11/ro tate.html Legg merke til at elementet vokser fra midten og utover. I siste versjon av Firefox går det fint an å skrive bare transform, som dette: scale() Med scale kan vi skalere elementer, eller med andre ord endre størrelse på dem. scale(3,1) vil gjøre elementet 3 ganger så bredt, men med samme høyde som før. scale(2,2) vil gjøre elemetet dobbelt så stort. 3
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 La oss lage en liten animasjon Det er nå det blir morsomt. Med litt css kan vi starte med å flytte på en liten firkant: Først sier vi hva slags type animasjon vi skal lage. Vi angir egenskaper for hva som skal skje helt i starten (0%), deretter hvilke egenskaper som skal gjelde for elementet når animasjonen er ferdig (100%). I dette tilfellet flytter vi et element 400px til høyre. Animasjoner skal kunne gjenbrukes. De er derfor ikke knyttet direkte til elementene, men vi knytter animasjonen til div-elementet med klasse firkant ved å angi moz-animation, og deretter angi hvor lang tid animasjonen skal bruke, hva slags easing, og til slutt hvor mange ganger det skal skje. Hvis vi skal sikre oss for alle nettlesere må vi (dessverre) skrive: Det enkleste er å lage en versjon ferdig først, og teste den i din nettleser. I eksemplene i resten av denne leksjonen kommer vi til å skrive kun @keyframes og animation: Eksemplene som ligger ute på nettsidene vil ha støtte for alle nettlesere. Test denne 4
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Hvikle nettlesere støtter denne typen animasjoner? Det er kun Internet Explorer < IE10 som ikke støtter det av de kjente og mest brukte nettleserne. IE10 støtter animasjoner med den generelle @keyframes. Vi lar firkanten vår gå i bane Vi kan også angi hva som skal skje etter en bestemt tid: Denne kan du se her: http://langslet.com/vgs/kode/leksjon_11/bane.html 5
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Rotasjon Vi kan enkelt få et element til å rotere. La oss med det samme løse eksamensoppgaven fra høsten 2011. Her skal en sirkel med 3 andre figurer rotere rundt, og den skal i tillegg stoppe opp når vi tar musa over den. Vi starter opp med å lage en div for den store sirkelen, og inne i den legger vi de 3 figurene. Vi forsøker å løse hele denne oppgaven kun med html og css. HTML Hele animasjonen skal altså være 600 x 600. Det oppnår vi ved å sette stage til 600x600. Den store sirkelen er en div med id= storsirkel, og inne i den ligger de 3 små figurene. La oss legge til litt CSS for å ordne utseendet på figuren vår. 6
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 CSS Dette er ganske greit. Utfordringen er å lage en trekant med CSS, men der har vi et triks på lur. stage skal være 600x600. Vi legger på en liten kantlinje (border). Vi må huske på at denne gjør hele boksen litt bredere og høyere. Dette må vi trekke fra for å få eksakt 600x600. Vi bruker position:relative sånn at elementer som ligger inne i stage forholder seg til stage og ikke hele nettleseren når vi plasserer dem med absolutt posisjonering. Vi lager den store sirkelen Sånn ser det ut i krympet versjon. 7
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi lager en liten firkant Vi bruker også her absolutt posisjonering. Da kan vi i tillegg flytte rundt på den i Dreamweavers design-modus, hvis vi synes det er praktisk. Vi kan nå gå i Design Mode i Dreamweaver og flytte på firkanten. Den vil da oppdatere CSSen vår. Vi ser dessverre ikke den store sirkel-diven som en sirkel. Tilbake i Code-view, ser vi nå den oppdaterete CSSen vår: 8
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 9
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi lager en ellipse Vi har tidligere laget en sirkel med css ved å bruke border-radius. Med border-radius kan vi også lage en ellipse. Følg med. Trikset er å lage border-radius først for bredden, deretter for høyden. Da får vi en perfekt ellipse. Vi separerer verdiene med et dele-tegn ( / ). Så kan vi plassere den i Design mode, eller vi kan prøve oss frem med forskjellige verdier. Da skal de se omtrent slik ut: Da mangler vi bare trekanten. Måten vi lager den på er kanskje det merkeligste i hele denne leksjonen. 10
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi lager en trekant Trikset med å lage en trekant med CSS består i å sette på en border på for eksempel en div. Sett bredde og høyde på diven til 0. Deretter angir vi border for 3 sider, og lar 2 av dem være gjennomsiktige. Dette fant jeg en artikkel om her: http://css-tricks.com/snippets/css/css-triangle/ Vi prøver oss med denne: Deretter flytter vi den på plass i Design mode, og får omtrent dette: Da er hele figuren klar 11
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi snurrer i vei Trikset nå er å definere en animasjon med rotasjon: Deretter knytter vi rotasjonen til den store sirkelen: Og dermed begynner den å snurre rundt og rundt. Vi skal kunne ta musa over sirkelen for å stoppe den. Dette løser vi ved å legge inn en animation-play-state for animasjonen. Denne kan være enten play eller paused. Vi kan sette den til paused når vi tar musa over. Vi setter med det samme cursor til pointer. Så setter vi den på pause når vi tar musa over. 12
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Hva med de andre figurene? Hvis vi kan få dem til å rotere den andre veien, vil det se ut som om de står stille omtrent som i et pariserhjul. Da definerer vi første en animasjon som går mot klokka: Til slutt knytter vi denne animasjonen til alle de 3 figurene. Altså alle div-elementene som ligger inne i den store sirkelen: På samme måte kan vi skru av denne animasjonen når vi tar musa over den store: Og dermed er vi ferdige! Ferdig eksempel finner du her: http://langslet.com/vgs/kode/leksjon_11/eksamenh11.html 13
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Pacman som går rundt Jeg har alltid vært fascinert av Pacman. Denne lille gule røveren som suser rundt på et brett mens han lager rare lyder og spiser spøkelser. Det burde være en smal sak å lage en liten pacman som kan gå litt rundt i nettleseren vår. HTML for Pacman Vi lager et brett med en liten pacman inni. Pacman skal også ha en liten munn som åpner og lukker seg kontinuerlig. CSS for Pacman Først brettet: Deretter Pacman og munnen: Legg merke til at pacman bare er en gul runding. Munnen er en sort trekant. Den store planen går ut på å sette denne av og på. 14
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi prøver å bevege munnen hans Prinsippet her må være at vi skaper 2 tilstander. Én hvor munnen vises, og én hvor den ikke vises. Vi prøver oss med: Setter animasjonen på munnen. Det ser ok ut, men den fader på en måte inn og ut. Det er ikke meningen. La oss legge inn noen flere stopp: Det gjør susen. Nå er den fullt synlig frem til 49%. Fadingen mellom 49% og 50% er ikke synlig for det blotte øye. Da kan vi sende ham litt rundt omkring på banen. 15
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi sender pacman litt rund omkring Vi prøver oss med en animasjon som heter flyttmeg: Denne er ganske enkel. Men vi kunne ha lagt inn litt rotasjon for å få ham til å gå nedover og oppover og til venstre. Prøv det selv! Til slutt knytter vi animasjonen til Pacman: 16
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Animasjon basert på hendelser Vi har sett at vi kan sette i gang en animasjon ved å bruke hover i CSSen vår. Men hva hvis vi vil sette den i gang når en bruker svarer på et spørsmål, eller når noen klikker på en knapp. La oss vise dette med et lite eksempel. Her må vi inn med litt JavaScript. Vi gjør dette meget enkelt. Lager to knapper og et spørsmål. Hvis du svarer riktig skal vi vise at det er rett svar og omvendt: Gjør svar om til en runding: Lager 2 animasjoner, en som gjør den stor og grønn, og en som gjør den liten og rød: La oss lage to klasser som knytter seg til hver av animasjonene: 17
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 En for riktig og en for gal Det vi må gjøre nå, er å sette class=riktig på rundingen hvis det blir trykket på riktig knapp. Da skulle det fungere sånn passelig. 18