Saturs
- Izprotiet lietotāja saskarni
- Ievadiet kodu
- Iegūstiet animāciju
- Vai vēlaties saņemt vairāk padomu par to, kuri animācijas rīki ir labākie?
Kustībai ir ļoti liela nozīme mūsu dzīvē. Mūsu acis un uzmanība automātiski fokusējas uz kustīgiem objektiem; statiskais saturs to nevar izdarīt tik efektīvi.
CSS animācijai nekad nav bijis aizraujošāks laiks. Tas ir kļuvis par nenovērtējamu instrumentu, lai izveidotu skaistas un saistošas saskarnes. Pareiza kustību veidošana nav mazs uzdevums, tāpēc, izmantojot kādu palīdzību, var gūt lielu ieguldījumu. Šeit ienāk Animista.
Animista ir gan iepriekš izveidotu CSS animāciju kolekcija, gan rotaļu laukums, kurā jūs varat tos pielāgot un izmēģināt. Tas ievērojami paātrina dažādu animācijas ideju atkārtošanu, kas ir viena no lieliskajām lietām par Animista iekļaušanu savā darbplūsmā.
Izprotiet lietotāja saskarni
Animista rotaļu laukuma lietotāja saskarne ir sadalīta trīs galvenajās sadaļās. Animācijas ir sakārtotas loģiskās kategorijās, grupās un variācijās, kas visas atrodas ekrāna augšdaļā.
Piemēram, ja prezentācijai meklējat piemērotas animācijas, visticamāk, vēlēsities pārlūkot ieejas un izejas kategorijas. Pieņemsim, ka pēc tam izvēlaties Ieslīdēt, zem tā atradīsit papildu variantus, piemēram, Slaids-pa kreisi, Slaids-pa labi un tā tālāk.
Noklikšķinot uz kategorijas, grupas vai variācijas, uzreiz tiks atskaņota animācija uz galvenās skatuves. Katrai kategorijai, grupai un variācijām tiek piešķirts savs URL, kas padara to ļoti viegli grāmatzīmēs vai koplietošanā.
Galvenais posms ir vieta, kur notiek visas animācijas. Augšējā labajā stūrī ir trīs pogas. Pirmais ir poga Replay Animation (apļveida bultiņas ikona), kam seko pogas Add to Favorites (sirds ikona) un Generate Code (ikona cirtaini iekavās).
Opciju panelī varat pielāgot dažādus animācijas aspektus. Pirmā ir nolaižamā izvēlne atlasīt objektu, kas ļauj nomainīt animēto objektu ar citu no iepriekš definētu objektu saraksta. Tam seko opciju grupa, kas atbilst standarta CSS animācijas īpašībām. Labākais veids, kā redzēt, kā katrs no viņiem ietekmē animāciju, ir eksperimentēt.
Ievadiet kodu
Kad esat iepazinies ar lietotāja saskarni, varat sākt to integrēt savā darbplūsmā. Runājot par darbplūsmām, runājot par Animista, varat izvēlēties starp divām, atkarībā no jūsu vēlmēm un prasībām.
Pa vienam
Kad redzat animāciju, kas jums patīk, vienkārši noklikšķiniet uz pogas Ģenerēt kodu. Pēc tam jums tiks parādīts animācijas koda panelis.
Paneļa augšpusē ir divas izvēles rūtiņas. Pirmais ļauj samazināt kodu, tādējādi ietaupot vietu. Otrais uzlabos saderību ar dažām vecākām pārlūkprogrammām, kodam pievienojot pārlūkprogrammas piegādātāja prefiksus.
Uzreiz zemāk atradīsit CSS kodu animācijas palīgu klasei, kas nosaukta pēc pašlaik aktīvās animācijas. Tas ir vienas līnijas laineris, kas satur animācijas kodu un animācijas opcijas. Noklikšķinot uz pogas Kopēt klasi, palīgklases kods tiks nokopēts datora starpliktuvē, lai pēc tam to varētu vienkārši ielīmēt redaktorā.
Pēdējais un vissvarīgākais bits ir animācijas atslēgkadru koda bloks. Šeit ir aprakstīta visa animācijas secība, un tā ir nepieciešama jums, lai izmantotu animāciju savā projektā. Noklikšķinot uz pogas Kopēt atslēgkadrus, kods ir gatavs ielīmēšanai CSS.
Animēt partijās
Atšķirībā no iepriekšējās pieejas, kad redzat animāciju, kas jums patīk, pievienojiet to saviem izlasei, noklikšķinot uz pogas Pievienot izlasei.
Sirds ikona parādīsies blakus aktīvajai animācijai animācijas variāciju sarakstā, atzīmējot to kā izlasi. Atkārtojiet to tik reižu, cik nepieciešams, līdz esat apmierināts ar savu izvēli.
Izvēlnes joslas labajā pusē esošā lejupielādes poga novirza jūs uz lejupielādes lapu, kuras augšpusē atradīsit sarakstu ar visām iecienītākajām animācijām. Šeit jūs iegūsiet iespēju vēlreiz pārskatīt savus izvēļus. Varat arī veikt visas pēdējā brīža izmaiņas, noklikšķinot uz pogas X, kas atrodas blakus animācijas nosaukumam.
Pēdējā sadaļā ir ģenerētais kods visai jūsu atlasītajai animācijai. Noklikšķinot uz pogas Kopēt kodu, zaļš paziņojums informēs jūs, ka darbība bija veiksmīga un ka kods ir gatavs ielīmēt jūsu izvēlētajā redaktorā. Ja veidojat jaunu failu, pārliecinieties, vai tas ir saglabāts ar pareizo paplašinājumu, šajā gadījumā .css.
Iegūstiet animāciju
Ir neskaitāmi veidi, kā izmantot CSS animācijas un bagātināt savus tīmekļa projektus. Animista padara procesu jautrāku un mazliet vieglāku. Drīz iznāks jaunas animācijas - un tikmēr priecīga animācija.
Šis raksts sākotnēji tika parādīts žurnāla 303. numurā. Pērciet to šeit.
Vai vēlaties saņemt vairāk padomu par to, kuri animācijas rīki ir labākie?
Ja nodarbojaties ar tīmekļa animāciju, pārliecinieties, vai esat paņēmis biļeti Ģenerēt Ņujorku. Tīmekļa animācijas eksperte, Adobe autore un dizaina evaņģēliste Val Head uzstāsies ar sarunu - Izvēlieties savu animācijas piedzīvojumu -, kurā viņa sadalīs garo izvēles sarakstu, lai lietas virzītos uz ekrāna.
Viņa arī parādīs, kuri rīki ir vispiemērotākie tādām lietām kā stāvokļa pāreja, datu parādīšana, ilustrāciju animēšana un animācijas pielāgošana.
Ņujorkas ģenerēšana notiek no 2018. gada 25. līdz 27. aprīlim. Iegūstiet biļeti tūlīt.
