Kuidas luua kohandatud laadimisanimatsioone, et vähendada põrkemäärasid

Laadimisanimatsiooni, mida algselt tunti kui viskajat, kasutatakse andmete meenutamise või liidese renderdamise edenemise näitamiseks. Ehkki ükskord võisite seda näidata tuima edenemisriba abil, on need päevad möödas.

Täna on CSS-i, jQuery või lihtsate animeeritud GIF-ide abil hästi viimistletud animatsioon võimalus liideseid elavdada ja tootele isikupära lisada.

Läbimõeldud animatsioonid võivad teie kasutajaid lõbustada, kui nad ootavad teie sisu laadimist. Hea laadimisanimatsioon aitab ootusi hallata ja parandab kasutajakogemust, säilitades huvi.

Selles õpetuses kasutame põhivormide ja põhimõtte loomiseks eskiisi Sketch ning lihtsate kohandatud laadimisanimatsioonide kiireks loomiseks. (Mõlemad rakendused on mõeldud Maci jaoks.) Õpid, kuidas luua värvilisi laadimisanimatsioone, mida kasutavad Trello, Flickr, Slack ja palju muud.

Läheme selle juurde.

Lühikese laadimisega animatsioon

Visandil jälgige nelja ümardatud ruutu, mille küljed on 50xxx või 100xx. Need peaksid välja nägema täiuslikud ringid, kuid joone venitamise efekti loomiseks animatsioonis kasutame ümarate nurkadega ruute.

Asetage neli kuju selliselt, et tekiks kujuteldav ruut, mille mõlema külje vahel oleks 150 pikslit ruumi. Kandke neli erinevat värvi (# 35BA90 roheline, # 69CADD sinine, # EBA900 kollane ja # E20661 roosa).

Importige kujundid põhimõttesse, grupeerige need ja klõpsake rühma loomiseks nuppu „Loo komponent”.

Minge pesastatud rühma sisse ja pöörake artboardi 15 kraadi võrra. Seejärel valige iga ring ja keerake see tagasi algasendisse (tagasi 15 kraadi). See loob sirgjoonelise venitusefekti.

Rakendage lülitusplaadile päästik “Auto” ja seejärel sirutage iga ümardatud ristkülik joonlaua vastasküljele pikkusega 295 pikslit. Andke mõlemale seinaplaadile 75% läbipaistmatus.

Rakendage teisele artboardile veel üks päästik “Auto”. Vähendage uuel artboardil iga rida algsesse 50 piksli laiusele, kuid vastasküljel algsest asendist.

Siduge viimane artboard esimesega, kasutades päästikut „Auto”. Lõpptulemuse eelvaate kuvamiseks klõpsake nuppu „Tagasi vanema juurde”.

Näpunäide: kui lähete valikule „Tagasi vanema juurde”, saate põhirühma pöörata -30 kraadi, et näha rohkem välja nagu Lõtv. Samuti saate muuta animatsiooni tempot paneeli „Animeeri” sees ja rakendada ülemineku silumiseks efekti „Lihtsusta mõlemat”.

Trello animatsioon

Visandit kasutades jälgige 100 pikslist sinist ruutu. Joonistage valge ristkülik, laiusega 60xx140xx. Joondage see eelmise ruudu ülemise vasaku ülaosaga 30xx ja vasak serv. Kopeerige see valge ristkülik, joondage see ruudust paremale 30-kordse parempoolse veerisega ja vähendage selle kõrgust 70 pikslini.

Impordige joonlaud põhimõttesse ja rakendage uue võtmekaadri loomiseks päästik „Auto”. Uuel tahvlil pöörake valgete ristkülikute kõrgused ümber (muutke vasak ristkülik 70 pikslit kõrgeks ja parem ristkülik 140 piksli kõrguseks). Ülemineku tasandamiseks rakendage paneelil „Animeerige” mõlemat lihtsustavat efekti.

Veerev ring

Jälgige visandil ringi. Kandke 10-kordne ääris väärtustega “Dash” ja “Gap”, ilma et oleksite täidet. Kasutage äärise jaoks värvi „Nurgagradient”, mis rõhutab hiljem loodava pöördefekti.

Avage uus printsiibifail ja kasutage visandist ringi teisaldamiseks nupul „Import”. Rakendage kaks automaatseid päästikuid järjest.

Pööramisefekti loomiseks valige keskel olevas paanis ring ja muutke selle nurga väärtus 360 kraadi-ni. Seejärel valige kolmas ring ja andke sellele vasakpoolses paneelis erinev nimi (s.o “koopia”). See võltsib lõpmatut pöörlemist.

Lõpuks ühendage kolmas artboard esialgsega teise automaatse päästikuga. Rakendage graafikute 1 ja 2 vahelisele ajajoonele lineaarset üleminekut. Kontrollige eelvaateaknas just loodud animatsiooni.

Flickri animatsiooni laadimine

Jälgige siniset ringi ja roosa ringi kõrvuti. Importige need põhimõttesse ja rakendage uue artboardi loomiseks päästik „Auto”.

Kolmanda tahvli loomiseks pöörake ringide positsioonid ümber ja rakendage uus päästik „Auto”. Pöörake vasakpoolsel paneelil ringide kihi järjekord ümber selle uue artboardi.

Neljanda liistuplaadi loomiseks rakendage kolmas päästik „Auto”. Pöörake sellel viimasel plaadil ringide asend veel kord ümber ja rakendage viimast “Auto” päästikut viimaselt plaadilt tagasi algsele.

Algselt avaldati Toptali disainiblogis aadressil www.toptal.com >>