Transcript Animasjon med CSS Vi kan lage animasjoner uten bruk av

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:
•
•
•
•
•
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
2
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.
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:
http://langslet.com/vgs/kode/leksjon_11/Ro
tate.html
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