Canvas, SVG ja animaatiot
Toteutetaan Javascriptin, Canvas-elementin, SVG-kuvien ja animaatioiden avulla yksinkertainen sivu. Ennen tämän tehtävän tekemistä käy tarkkaan läpi seuraavat materiaalit:
- CSS- ja Javascript-animaatiot
- Scalable Vector Graphics (SVG)
- canvas
- Pääteohjaus 4
- Canvas tutorial
- SVG Tutorial
- SVG animation with SMIL
- Using CSS animations
- Basic animations
- Transforms on SVG elements
- Vinkit
Kaikille tasoille yhteiset vaatimukset ovat:
- Javascript-ohjelmassa on käytettävä Strict modea
- HTML-dokumentin on oltava validi eikä validaattori saa antaa sivusta varoituksiakaan (warnings). Myös javascriptilla tuotetun html-sisällön on oltava rakenteellisesti oikein ja validia.
- Sivulla käytetyn CSS:n on oltava validia CSS3:sta (CSS level 3 + SVG).
- JSHint ei saa antaa huomautuksia javascript-koodistasi
- HTML-dokumentissa ei saa esiintyä Javascript- tai CSS-koodia vaan näiden on oltava erillisissä tiedostoissa.
Huom. Javascriptilla saa manipuloida objektien style-ominaisuutta vaikka se aiheuttaakin css-koodin ilmestymistä Inspectorin näyttämään HTML-rakenteeseen. Seuraavan tyyppinen koodi on siis täysin sallittua ja jopa suositeltavaa:
obj.style.backgroundColor = "black";
mutta itse ei saa suoraan manipuloida style-HTML-attribuuttia setAttribute-metodilla. Ei myöskään saa suoraan muokata obj.style.cssText-ominaisuutta, koska se on tismalleen sama kuin style-html-attribuutin muokkaaminen. Miksi näitä ei saa muokata? Siksi, koska kaiken saman voit tehdä vähemmän virhealttiisti sallitulla tavalla. - Kaikki funktiot, jotka sallivat lisätä suoraan käsin kirjoitettua html-koodia sivun sisältöön ovat kiellettyjä. Vastauksen tasosta riippumatta tuloksena on 0 pistettä jos tätä kieltoa rikotaan. Esim. innerHTML, write tai writeln-funktioita ei saa käyttää.
- Ulkoisten kirjastojen, kuten esim. jquery, angularjs, käyttäminen on kielletty.
- Valmiin sivun pitää toimia Google Chromella ja Firefoxilla. Muista selaimista ei tarvitse toistaiseksi välittää.
- Koodin oleelliset osat on oltava kommentoitu.
- Kaikkien tiedostojen merkistönä on käytettävä UTF-8-merkistöä.
- Toteutetun sivun täytyy järkevästi mukautua selainikkunan koon muutoksiin. Sivun on toimittava myös kännykässä.
- Tee sivusta responsiivinen
- setInterval- ja setTimeout-funktioiden käyttäminen on tässä viikkotehtävässä kiellettyä. Käytä requestAnimationFrame tai animation-delay.
Taso 1
Toteuta HTML5-sivu, joka näyttää seuraavanlaiselta:
- Sivulla olevat vertikaaliset väriliukupalkit on toteutettava SVG-kuvina.
- Kukin palkki on yksi kuva.
- Palkkien liikuttelu on tehtävä CSS-animaationa.
- Palkkien liikeradan ja värien on vastattava mallivideota.
- Toteutus on tehtävä dynaamisesti tavalla, joka sallii ilman CSS-koodin muutoksia jopa satojen samanlaisten palkkien lisäämisen sivulle.
- Ajasta kunkin palkin animoinnin aloitus.
- Palkkien väri muuttuu riippuen palkkien kulkusuunnasta
- Palkkien on sijaittava pöllökuvien taustalla, mutta peitettävä pingviinit
- Sivulla liikkuvat pingviinit on myös toteutettava CSS-animaatiolla.
- Liikeradan ja liikenopeuden on oltava samanlainen kuin videolla.
- Pingviinin on pysyttävä samankokoisena näytön ja ikkunan koosta riippumatta.
- Pingviinien on oltava liukupalkkien ja pöllökuvan taustalla
- vinkki: calc()
- Halkaistu pöllö on toteutettava ilman
kuvankäsittelyohjelmia.
- Valmista kuvaa saa muokata vain javascriptin avulla.
- Älä kopioi kuvatiedostoa omalle koneella vaan käytä kuvan osoitteena: http://appro.mit.jyu.fi/tiea2120/vt/vt4/owl.png.
- Pöllön kukin osa on esitettävä sivulla canvas-elementtiä käyttäen.
- Pöllön osien liikuttelu on toteutettava CSS-animaationa. Liikeradan on oltava vastaava kuin mallivideolla.
- Pöllön pitää aina olla alkuperäisen kuvan kokoinen.
- Sivun on mukauduttava selainikkunan muutoksiin ja hyödynnettävä aina koko selainikkunan tila. Pöllön ja pingviinin koko ei saa muuttua selainikkunan koon muuttuessa. Huomioi tarvittaessa window.resize-tapahtuma, mutta hyvin toteutettu ratkaisu toimii ilmankin.
- Sivulla ei saa olla skrollbareja. Animaation on käytettävä aina koko sivun (selainikkunan) vapaana oleva tila.
- HTML-tiedostossa EI SAA olla CSS- tai javascript-koodia
- Käytä absoluuttista asemointia elementtien alustavaan sijoitteluun. Toteuta CSS-animaatiot käyttäen translate-, translateX tai translateY-funktiota aina kuin mahdollista. Älä käytä marginaaleja elementtien liikutteluun!
Taso 3
Toteuta ensin taso 1. Laajenna sen jälkeen taso 1 seuraavanlaiseksi:
- Lisää sivulle videolla näkyvä tekstiskrolleri.
- Valmiiseen pohjaan on linkitetty tiedosto, josta löytyy
kalevala()
-funktio, joka antaa skrollerissa käytettävän tekstin rivi kerrallaan. Tekstiä saakalevala()
-funktiolta loputtomasti. - Toteuta tavalla, jossa tekstin rivien määrällä ei ole merkitystä
- Skrollerin täytyy näkyä kaikkien muiden efektien päällä
- Skrolleri on toteutettava piirtämällä tekstiä canvas-elementille. Käytä yhtä canvas-elementtiä, joka on enintään 1,5 kertaa sivun korkeutta korkeampi.
- Toteuta skrollerin liikkuminen css-animaationa käyttäen translate-funktiota
- Valmiiseen pohjaan on linkitetty tiedosto, josta löytyy
- Lisää ykköstasolla tehtyihin väripalkkeihin videolla näkyvä värin vaihtuminen
- Käytä valmista värivalikoimaa, mutta toteuta tavalla, jossa värejä voisi helposti
käyttää äärettömän määrän. Värivalikoima:
let colors = ["#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#ffff00","#00ff00", "#00ffff", "#ffffff"]
- Käytä valmista värivalikoimaa, mutta toteuta tavalla, jossa värejä voisi helposti
käyttää äärettömän määrän. Värivalikoima:
- Vaihda pöllön kuvaksi: http://appro.mit.jyu.fi/cgi-bin/tiea2120/kuva.cgi.
Älä kopioi kuvatiedostoa itsellesi vaan käytä suoraan annettua osoitetta.
- Saat jokaisella sivun latauskerralla erikokoisen version samasta kuvasta. Toteuta pöllön palastelu ja liikuttelu siten, että se toimii dynaamisesti aina, vaikka kuvan koko vaihteleekin.
- Varmista, että sivun kaikki efektit toimivat ja mukautuvat, jos selainikkunan kokoa muutellaan.
- Efektien päällekkäisyyden on oltava sama kuin mallivideolla
- Lisää sivun taustalle kaikkien muiden efektien taakse lainehtivat liukuväripalkit
- Tämän voi toteuttaa javascript-animaationa tai css-animaationa. Javascript-versio on todennäköisesti tehokkaampi. Tämä voi olla erittäin raskas efekti.
Taso 5
Toteuta ensin taso 3. Laajenna sen jälkeen taso 3:n HTML-dokumenttia seuraavilla lisäyksillä:
- Lisää sivulle vielä sinusskrolleri, jolla pystyy helposti asetuksia muuttamalla toteuttamaan kaikki mallivideossa näkyvät liikeradat. Käytä samaa tekstiä kuin toisessakin skrollerissa. Toteuta canvas-elementillä ja javascript-animaationa.
- Lisää liukupalkkien päälle mutta muiden sivulla olevien elementtien taakse satunnainen lumisade. Lumihiutaleet kerääntyvät kasoihin. Lumihiutaleiden liikuttaminen on toteutettava järkevästi CSS-animaationa.
Vinkkejä
Jos SVG-kuvasi ei tunnu toimivan niin validoi sivusi tai mahdollisesti erillinen SVG-kuvasi W3C-validatorilla. Se ymmärtää myös SVG:t.
Seuraavista saattaa olla paljonkin apua viikkotehtävän toteutuksessa.
- calc()
- position
- z-index - edellyttää, että objekti on myös positioitu
- Size of HTML5 Canvas via CSS versus element attributes
- measureText
- animation-delay
- Using animation events
Käyttäjien kommentit