Pieni animaatio

Tervetuloa uuden projektini pariin, jossa harjoitellaan animaation luomista JavaScriptilla

Tämä projekti on luotu taide- ja kulttuurikurssia sekä ammatillisten opintojen JavaScript-animointi harjoituksia varten.

- Ensimmäiseksi luodaan HTML-sivu pieni_animaatio.html, jossa voit nähdä animaation Canvas-elementin sisällä (tv-screeni tässä sivulla).

- Sen jälkeen määritellään sivuston tyylit ja ulkoasu CSS-tiedostolla pieni_animaatio_tyylit.css

- Sitten päästään rakentamaan itse animaatiota JavaScript-ohjelmointikielellä pieni_animaatio.js
Animaatio voi ehkä vaikuttaa hieman yksinkertaiselta, mutta jos katselet (linkistä) sen koodia tarkemmin, saatat huomata, ettei se ole ihan niin yksinkertaista, kuin miltä se näyttää...

Tietoa

Tässä osiossa kerrotaan projektista tarkemmin.

Animaation Luominen

Animaatio on luotu käyttämällä HTML5-canvas-elementtiä ja JavaScriptiä. Tässä on lyhyt kuvaus animaation luomisprosessista:

1. HTML-koodin lisääminen: Lisää HTML-sivulle <canvas>-elementti, johon animaatio piirretään. Muokkasin jälkeenpäin canvas-elementtiä, jotta se loisi vaikutelman Ambilight-teknologiaa käyttävästä televisiosta varjostuksineen. Varjostus on kokoajan päällä, mutta suurenee jos liikutat hiirtä sen päälle tai mobiililaitetta käyttäessäsi klikkaat sitä sormellasi.
2. JavaScript-koodin lisääminen: Lisää JavaScript-koodi, joka sisältää animaation logiikan.
3. Canvas-elementin valinta: Valitse canvas-elementti JavaScriptissä käyttämällä document.getElementById-funktiota.
4. Piirtoalueen kontekstin hakeminen: Hae canvasin piirtoalueen konteksti getContext('2d')-funktiolla.
5. Piirtofunktioiden määrittäminen: Määritellään funktiot eri elementtien piirtämiseksi:
   • Niitty: Luodaan funktio drawNiitty, joka odottaa tarkempia määrityksiä niitylle.
   • Vuoret: Luodaan funktio drawMountains, joka odottaa tarkempia määrityksiä vuorille.
   • Aurinko: Luodaan funktio drawSun, joka odottaa tarkempia määrityksiä auringolle.
   • Pilvet: Luodaan funktio drawClouds, joka odottaa tarkempia määrityksiä pilville.
   • Mörrimöykky: Luodaan funktio drawMörrimöykky, joka odottaa tarkempia määrityksiä möykyistä mörrimmälle.
Elementtien Piirtäminen: Elementtien piirtäminen canvasille JavaScriptillä:
• Niitty: Piirretään vihreä suorakulmio canvasin alareunaan, joka edustaa niittyä. Niitty sijoittuu canvasin alareunaan ja sen väri on vihreä.
• Vuoret: Piirretään harmaat kolmiomaiset vuoret, jotka sijaitsevat canvasin keskiosassa. Vuoret piirretään kolmiona, jonka huiput osoittavat ylöspäin.
• Aurinko: Piirretään keltainen ympyrä canvasin keskelle, joka liikkuu ylös ja alas luoden auringon nousun ja laskun vaikutelman. Aurinko liikkuu pystysuunnassa.
• Pilvet: Piirretään valkoisia pilviä bezier-käyrien avulla, jotka liikkuvat vaakasuunnassa oikealta vasemmalle. Pilvet ilmestyvät uudelleen canvasin vasemmasta laidasta.
• Mörrimöykky: Piirretään ruskea olento, jolla on pää, silmät, nenä, kieli, korvat, vartalo, kädet ja jalat. Mörrimöykky liikkuu ylös, alas, vasemmalle ja oikealle canvasin alueella.
6. Elementtien sijaintien määrittäminen: Määritä elementtien aloitussijainnit ja nopeudet liikkumista varten.
7. Animaation käynnistäminen: Luo animate-funktio, joka päivittää elementtien sijainnit ja piirtää ne uudelleen.
8. Animaation silmukka: Käytä requestAnimationFrame-funktiota, joka pyytää selainta suorittamaan animaation seuraavan päivityksen.
9. Animaation käynnistäminen: Kutsu animate-funktiota ensimmäistä kertaa, jotta animaatio käynnistyy.

Animaatio luodaan määrittelemällä HTML-sivulle piirtoalue (canvas), piirtämällä siihen eri elementit JavaScriptillä ja päivittämällä näiden elementtien sijainteja jatkuvasti. Näin saadaan aikaan liikkuva ja elävä animaatio.

Loppuun ajatukset
Harjoitustehtävä ja Khan Academyn Intro to JS: Drawing & Animation opettivat hyvin JavaScriptilla animointia. Suurimmat haasteet tässä web-kehityksessä ovat tällä hetkellä, mitä opittua tekniikkaa käyttää tiettyyn kohtaan ja ehdottomasti responsiivisuuden kanssa opeteltavaa, miltä sivusto näyttää mobiililaitteilla käytettynä, mitä nykyään paljon käytetään (PC käytössä ei ongelmia). Tämän sivun sain kohtuullisen responsiiviseksi, kun harjoittelin myös Chromen Developer Tools käyttämistä sivuston suunnitteluun.
Kohti uusia harjoituksia 💡🌟👨‍🎓