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
- Using the Web Animations API
- 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 käyttäminen on kielletty.
- Valmiin sivun pitää toimia Google Chromella (> v115.0) ja Firefoxilla (> v115.0).
- Koodin oleelliset osat on kommentoitava. Käytä JSDOC-yhteensopivia kommentteja.
- 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.
- Vinkkejä
- Jos SVG-kuvasi ei tunnu toimivan, validoi sivusi tai mahdollisesti erillinen SVG-kuvasi W3C-validaattorilla. Se ymmärtää myös SVG:t.
- calc()
- Using CSS custom properties (variables)
- position
- z-index - edellyttää, että objekti on myös positioitu
- Custom properties (--*): CSS variables
- Updating a CSS Variable with JavaScript
- Size of HTML5 Canvas via CSS versus element attributes
- measureText
- animation-delay
- Using animation events
- vh and vw are not updated after browser resize on an accelerated @keyframes animation
- Voit käyttää Web Animations APIa
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, koon ja värien on vastattava mallivideota. Yksi palkki on leveydeltään 5% selainikkunan leveydestä
- 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 sijoituttava pöllön ja pingviinien taustalle
- Palkkien animaatio kestää viisi (5) sekuntia
- Sivulla liikkuvat pingviinit on myös toteutettava CSS-animaatiolla.
- Älä kopioi pingviinin kuvaa omalle sivullesi vaan käytä sitä osoitteesta: https://appro.mit.jyu.fi/cgi-bin/tiea2120/pingu.cgi. Pingviinin kuva latautuu tarkoituksella hitaasti. Huomioi kuvan käyttämisessä ikkunan load-tapahtuma ja/tai img-elementin load-tapahtuma.
- Liikeradan ja liikenopeuden on oltava samanlainen kuin videolla.
- Pingviinin on oltava aina alkuperäisen kuvan kokoinen (150x150) ja pysyttävä samankokoisena näytön ja ikkunan koosta riippumatta.
- Pingviinien on näyttävä liukupalkkien ja pöllökuvan päällä
- vinkki: calc()
- Pingviinianimaatio kestää 10 sekuntia
- Sivun vasemman ylänurkan painikkeella voi lisätä sivulle uusia pingviinejä. Painikkeen on oltava kaikkien animaatioiden etupuolella.
- Paloiteltu 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ö jaetaan 16 yhtä suureen osaan
- Pöllö on esitettävä sivulla käyttäen kahta canvas-elementtiä
- Pöllön osien liikuttelu on toteutettava CSS-animaationa. Liikeradan on oltava vastaava kuin mallivideolla. Animaatio kestää neljä sekuntia.
- Pöllön pitää aina olla alkuperäisen kuvan (564x552) kokoinen.
- Sivun on mukauduttava selainikkunan muutoksiin ja hyödynnettävä aina koko selainikkunan tila ainakin Chrome-selaimella. Pöllön ja pingviinin koko ei saa muuttua selainikkunan koon muuttuessa. Käytä tarvittaessa window.resize-tapahtumaa. Huomaa Firefoxissa oleva bugi, joka voi estää mukautumisen Firefoxilla. Tätä bugia ei tarvi yrittää korjata/huomioida ykköstasolla vaan vasta kolmostasolla.
- 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 sivun oikeaan laitaan
- 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ä
- Skrollitekstin yksittäisen tekstirivin tekstin korkeuden on oltava 2em
- 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"]
- Muuta väripalkit kulkemaan diagonaalisesti
- Lisää sivun oikeaan yläkulmaan liukusäädin, jonka avulla voi säätää palkkien paksuutta. Palkkien minimipaksuus on 1% sivun leveydestä ja maksimi on 50% sivun leveydestä.
- 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.
- Lisää sivun vasempaan laitaan liukusäädin, jolla voi muuttaa pöllön palasten lukumäärää. Palasia voi olla 1-256 kappaletta. Palaset eivät kuitenkaan koskaan ole yhtä pikseliriviä matalampia.
- Lisää sivun vasempaan laitaan valintaruudut, joilla voi piilottaa tai näyttää sivulla olevat animaatiot
- Varmista, että sivun kaikki efektit toimivat ja mukautuvat, jos selainikkunan kokoa muutellaan.
- Efektien päällekkäisyyden on oltava sama kuin mallivideolla
- Huomioi Firefoxissa oleva bugi.
Sovelluksen täytyy toimia oikein myös Firefoxilla eli joudut kiertämään/korjaamaan
tämän bugin.
Yksi korjausvaihtoehto on käyttää resize-tapahtumaa, jossa apuna toimivat css-muuttujat tai sitten käyttää laajemmin Web Animations APIa.
Taso 5
Toteuta ensin taso 3. Laajenna sen jälkeen taso 3:n HTML-dokumenttia seuraavilla lisäyksillä:
-
Lisää sivun vasempaan laitaan vielä sinusskrolleri, joka toteuttaa kaikki mallivideossa näkyvät liikeradat. Käytä samaa tekstiä kuin toisessakin skrollerissa. Toteuta javascript-animaationa.
-
Lisää kaikkien muiden sivulla olevien elementtien taakse satunnainen lumisade. Lumihiutaleet kerääntyvät kasoihin. Lumihiutaleiden liikuttaminen on toteutettava järkevästi CSS-animaationa tai käyttäen Web Animations API -rajapintaa.
Käyttäjien kommentit