Animatsioonilise veebiarenduse tööriistad

Animatsioonilise veebiarenduse tööriistad

Koostan siia nimekirja kõikidest tööriistadest, mida saab kasutada animatsioonilises veebiarenduses.

Ajapikku see kindlasti pikeneb, kuna kõiki tööriistu ma ei tea ja suure tõenäosusega tekib ka neid juurde.

Siia nimekirja alla käivad nii tekstiredigeerijad kui ka spetsiifilised JavaScripti teegid.

Annan iga tööriista kohta ka enda poolt lühikese ülevaate (kui olen seda kasutanud), mis võib sind aidata õige valimisel.

Seal, kus juures on märk “#”, siis see tähendab seda, et ma ei ole veel seda üheski projektis kasutanud, aga olen kuulnud, et see tööriist pidi olema kasulik.

Üritan siia ainult lisada tasuta ja igale platvormile sobivaid tööriistu, et kõik saaksid neid kasutada.

Koodiredigeerijad:

Olen teinud ka väikese ülevaate mõnedest redigeerijatest HTMLi kursuse #1 osas.

Atom.io – minu praegune lemmikredigeerija suurimate projektide jaoks. Tegemist on laialt toetatud editoriga, mida on tore kasutada.

Brackets.io – ka väga hea editor. Eriti on hea tema live preview. Teistel redigeerijatel kahjuks nii head kohest muutmist ei ole (kuigi Atomil pluginatega on midagi sarnast). Kindlasti soovitan Bracketsit soojalt!

Sublime Text – kasutan seda kiirete muudatuste tegemiseks (Atomi ja Bracketsi avamine võtab rohkem aega kui Sublimel)

VS Code – väga paljude programmeerimiskeeltega toetatud koodiredigeerija. Isiklikult seda ei kasuta, kuna teised teevad kogu töö juba ära, aga ma ei saa ka vastu vaielda, et tegemist on päris korraliku editoriga.

Gedit – lihtsakoelisem (GNOMEga kaasas käiv) koodiredigeerija, mida kasutan harva. Tegemist ei ole millegi erilisega, kuid tema kasuks räägib tema kiirus.

Prototüüpimine:

#Invision – tasuta brauseripõhine prototüüpija. Tegemist ei ole võimsa, kuid täiesti kasutatava ja korraliku tööriistaga. Paljude (lihtsamate) projektide jaoks täiesti sobiv.

Koos erinevate koodi põhiste tööriistadega/teekidega (vaata neid alt poolt) – see on minu lemmikvalik. Koodiga ma saan kontrollida väga palju animatsioone ja muudetavaid omadusi ning luua lõpptulemusele lähedasi prototüüpe. Veel ei pea ma midagi koodi ümber kirjutama, vaid saan prototüübi põhimõtteliselt otse valmisprodukti lisada (loomulikult koos ilusa dokumentatsiooni ja prototüübi koodi korrastamisega).

Koodiga koos prototüüpimiseks saab kasutada ka interneti põhiseid tööriistu – näiteks JSFiddle

Erinevad teegid/raamistikud:

velocityJS – praeguselt (vabalt kättesaadav) parim animatsiooni mootor motion designeritele. Tegemist on väga kiire ja võimsa mootoriga, mis sarnaneb jQuery animatega.

jQuery Transit – tegemist on hea teegiga, aga kuna jQuery on animatsioonilise poole pealt aeglane, siis soovitaksin kasutada Transiti asemel velocityJSi, kuna velocity kasutab animeerimiseks vanilla JSi.

#Animate.css – lai valik CSSi animatsioone, mida on võimalik enda meele järgi kujundada.

#smoothState.js – lubab vahetada alamlehti sujuvalt, kaasa arvatud, siis kui kasutaja vajutab brauseris olevat tagasi nuppu.

#anime.js – tegemist tundub olevat kiire ja võimsa animatsiooni teegiga. Kindlasti teen endale selle selgeks ja kirjutan sellest õpetuspostituse.

#bounce.js – jällegi väga tore animatsiooni teek, mida võiks õppida kasutama.

#favico.js – favico.js ülesandeks on muuta/animeerida brauseri vahelehel olevat veebilehe ikooni. Kindlasti kasulik teek.

#Anijs – AniJSi peamiseks ülesandeks on teha animatsioone võimalikult väikese koodiga. Ma ei oska kommenteerida, kuidas see päris maailmas töötaks, aga iseenesest on päris lahe idee.

#GSAP – maksuline animatsiooni mootor, mida kasutavad väga tihti suured firmad, et luua võimsaid animatsioone. Isiklikult arvan, et on olemas ka samaväärseid tasuta alternatiive, kuid ma ei ole kordagi GSAPi kasutanud, nii et minu arvamus võib siin olla vale.

#move.js – tundub olevat lihtsamakoelisiem animatsiooniteek.

#CSShake – see teek on päris lahe ja teatud mõttes ka tobe. Põhimõtteliselt paneb elemendid värisema. Sellele on ka reactJSi plugin olemas.

#ReactJS – võib olla ei ole tegemist just mingi animatsioonilise teegiga, aga kuna selle eesmärgiks on ka teatud mõttes laadimisaegu vähendada, siis toon selle siiski välja. Nimelt on ReactJSi ülesandeks luua interaktiivseid kasutaja keskkondi, mis uuendavad ennast ise. Isiklikult pole kordagi kasutanud, kuid tulevikus teen kindlasti ReactJSi selgeks või mingi sarnase alternatiivi.

#AngularJS – alternatiiv ReactJSile. Ei oska praegu öelda, kumb on neist parem.

Midagi muud:

easings.net – enamus keerulisemaid easinguid näidatult. Kasulik siis kui mõtled, millal animatsioon võiks kiirendada ja millal aelgustada.

#cubic-bezier – võimalus teha täielikult enda easing. Soovitaksin seda ainult kasutada siis, kui tead mida teed ning ükski teine easing ei sobi sinu animatsioonile (seda juhtub üliharva)

 

Kas mul on midagi siit nimekirjast puudu? Kui jah, siis anna kommentaarides teada 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled tõsiselt huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *