Nilalaman
- Bakit gumagamit ng CSS para sa animasyon?
- Functional na animasyon
- Mga paglilipat ng pahina
- Mga loader at progress bar
- Higit pa sa mga loader - mga screen ng kalansay
- Mga pakikipag-ugnayan sa micro
- Nakamit ang 60fps
- Pagpapabilis ng hardware
- Choreograpo ang iyong CSS
- Pagde-debug
- Kontrolin ang CSS animasyon gamit ang JavaScript
- Ang pag-restart ng animasyon
- Pagkontrol sa estado ng paglalaro
- Isang pagtingin sa hinaharap
- I-animate ang mga pasadyang katangian ng CSS
- Module ng Path ng Paggalaw ng CSS
- Maging animating
Ang mga modernong browser at tool sa disenyo ay nag-aalok ng maraming sa mga tuntunin ng malikhaing kapangyarihan. Ang mga mobile device ay naging bulsa ng mga powerhouse na may sapat na oomph upang maitulak ang lahat ng mga Retina na mga pixel ng screen nang hindi pinagpapawisan. Samakatuwid hindi ito dapat sorpresa na ang mga dinamikong website, na nag-tap sa lahat ng kapangyarihang ito, ay umuusbong sa araw-araw. Sa katunayan, mahihirapan ka upang makahanap ng isang modernong website na hindi gumagamit ng animasyon sa CSS sa ilang paraan, maging sa anyo ng mga simpleng pag-hover na pagbabago o sa mga ganap na hinahangad na piraso ng sining.
Ang mabuting animasyon ay maaaring magbigay buhay kung hindi man static na nilalaman habang sinusuportahan ang natitirang disenyo at tumutulong na maipahayag ang personalidad ng tatak, at makakagawa ito para sa isang mas natural na karanasan ng gumagamit dahil hardwired kaming tumugon sa mga gumagalaw na bagay.
Bakit gumagamit ng CSS para sa animasyon?
Kung ihahambing sa mga animasyon na hinimok ng script, ang mga animasyon na gumagamit ng CSS ay mas madaling matutunan at maaaring magamit nang hindi kinakailangang malaman ang JavaScript. Maaari silang gawing tumutugon dahil mababago ang mga ito sa pamamagitan ng mga query sa media ng CSS. Sa kabila ng pagkakaroon ng isang simpleng simpleng syntax, makakalikha kami ng mga kumplikadong mga animasyon kasama nito, lalo na sa tulong ng mga preprocessor ng CSS.
Ang paggamit ng CSS para sa animasyon ay binubuo ng isang istilong naglalarawan sa animasyon at a @keyframes harangan na tumutukoy sa mga intermediate na hakbang sa isang pagkakasunud-sunod ng animation. Ang lahat ng mga aspeto ng animation ay kinokontrol sa pamamagitan ng isang hanay ng mga madaling maunawaan na mga katangian: pangalan ng animasyon, tagal ng animasyon, pag-andar ng animasyon-oras, pagkaantala ng animasyon, animasyon-iterasyon-bilang, direksyon-animasyon, animation-fill-mode at state-play-state. Mayroon ding mga animasyon ari-arian, isang maikling syntax na pinagsasama ang lahat ng iba pa.
Ito ang hitsura ng CSS code ng animos sa pinakasimpleng anyo nito:
/ * Paglalarawan ng animasyon * / .slide-pakanan {animasyon: slide-pakanan na 0.5s na kadalian-in-out na 0.2s na walang katapusang kahalili pareho; } / * Mga hakbang sa animasyon * / @keyframes slide-right {0% {transform: translateX (0); } 100% {transform: translateX (100px); }}
Gamit ang parehong syntax, posible na buhayin ang SVG sa parehong paraan tulad ng anumang iba pang elemento ng HTML.
Susuriin namin ang iba't ibang mga aspeto ng CSS animasyon at kung paano namin ito magagamit upang mapahusay ang pangkalahatang karanasan ng gumagamit.
Functional na animasyon
Ang mga animasyon ay maaaring mailapat upang maisagawa ang iba't ibang mga pag-andar sa interface. Matagumpay nilang magagabayan ang mga gumagamit sa isang tiyak na proseso, pagbutihin ang oryentasyon at magbigay din ng visual na feedback. Ang mga nasabing mga animasyon ay gampanan ang isang napakahalagang papel sa pagdidisenyo ng isang de-kalidad, karanasan sa gumagamit na batay sa tatak. Tingnan natin ang ilang mga halimbawa ng pagganap na animasyon.
Mga paglilipat ng pahina
Ang pag-click sa mga link sa pag-navigate sa website ay karaniwang nagreresulta sa isang biglaang pagbabago sa interface ng gumagamit. Humiling ang isang pahina, at kapag nakatanggap ang browser ng isang tugon mula sa server, isang blangkong screen ang mabilis na mag-flash bago ipakita ang bagong pahina. Nakagambala nito ang daloy ng trabaho ng gumagamit at maaaring makapag-disoriente. Ang mga paglilipat ng pahina ay makakatulong na mabawasan ang nakakaabala na epekto.
Sa halip na hayaan ang browser na hawakan ito para sa amin, maaari naming hadlangan ang kahilingan, i-load ang bagong nilalaman nang hindi sinasabay sa background, at pagkatapos ay gamitin ang CSS na animasyon upang lumikha ng isang maayos na paglipat sa isa pang pahina kapag handa na ito. Nakakatulong ito upang itaguyod ang isang pakiramdam ng pagpapatuloy habang pinapanatili ang konteksto.
Mga loader at progress bar
Ang isang mahalagang aspeto ng mahusay na disenyo ng pakikipag-ugnayan ay nagbibigay ng visual na feedback. Hindi namin dapat iwanang nagtataka ang mga gumagamit kung ano ang nangyayari o kung ang resulta ng isang pakikipag-ugnayan ay matagumpay o hindi.
Kapag gumagamit ng mga paglilipat ng pahina, halimbawa, dapat naming ipaalam sa gumagamit hindi lamang na na-load ang pahina ngunit ipapakita din ito sa ilang sandali. Ang isang paraan upang makamit ito ay ang pagpapakita ng isang animated na loader na nagpapahiwatig na ang operasyon ay isinasagawa.
Kung posible na masukat ang tagal, sa halip ay maaari kaming magpakita ng isang progress bar. Nagbibigay ang pamamaraang ito ng kapaki-pakinabang na impormasyon tungkol sa kung gaano katagal bago mag-load ang pahina.
Higit pa sa mga loader - mga screen ng kalansay
Ang kahaliling solusyon sa mga loader ay mga skeleton screen, na maaaring mapabuti ang napakahusay na pagganap. Ang isang skeleton screen ay isang pinasimple na graphic na representasyon ng UI upang maipakita habang ang nilalaman ay nakakarga sa background. Ang UI ay nahahati sa mas maliit na mga bloke ng mga imahe ng kalansay, na pagkatapos ay napalitan ng totoong nilalaman sa sandaling handa na ito. Maaari naming gamitin ang CSS animasyon upang ipahiwatig na ang nilalaman ay nakakarga pati na rin upang matiyak na ang pagbabago ay unti-unting lumilitaw.
Mga pakikipag-ugnayan sa micro
Ang mga mikro-pakikipag-ugnayan ay maliliit na gawain na ginagawa naming halos awtomatiko. Nagustuhan ang isang tweet, pagdaragdag ng isang item sa shopping cart, pagbabahagi ng mga link - lahat ng ito ay mga pakikipag-ugnay sa micro. Maaari naming gamitin ang CSS animasyon upang magbigay ng mga visual na pahiwatig at gawing madaling maintindihan ang resulta ng isang aksyon. Ang isang halimbawa ay ang paggawa ng mga CTA o iba't ibang mga pindutan ng UI na lilitaw na nahahadlangan.
Maaari din naming magamit ang CSS animasyon upang lumikha ng isang makabuluhang paglipat sa pagitan ng mga estado, halimbawa, pag-morphing ng isang pindutan ng menu mula sa orihinal na hugis nito sa isang icon na 'X', na nagpapahiwatig na ang pag-navigate ay maaaring sarado sa pamamagitan ng pag-click muli sa parehong pindutan. Ang nasabing disenyo ay kapwa nakalulugod pati na rin maging kaalaman.
Maaari ring magamit ang animasyon upang idirekta ang pansin ng mga gumagamit sa pamamagitan ng pag-highlight ng mga pagbabago sa UI, tulad ng pagdaragdag ng isang bagong item sa shopping cart.
Nakamit ang 60fps
Ang isang bagay na dapat tandaan pagdating sa CSS animasyon ay ang pagganap. Ito ay mahalaga upang mapanatili ang mga animasyon na walang jank at patakbuhin ito nang maayos hangga't maaari. Kung hindi man sa halip na pagbutihin ang buong karanasan, napakabilis mong mapanganib na masira ito. Habang walang mga mahiwagang recipe para sa paglikha ng makinis na mga animasyon bukod sa madalas na pagsubok, mayroong ilang mga prinsipyo na maaari mong sundin upang mabawasan ang panganib.
Pagpapabilis ng hardware
Laging layunin na buhayin lamang ang hardware na pinabilis ang mga pag-aari ng CSS. Ito ay dapat na madaling tandaan dahil mayroon lamang dalawa: ibahin ang anyo at opacity. Ang layunin ay mangyari ang lahat ng mga pagbabago sa layer ng pagsasama, na kung saan ay ang pinakamura mula sa pananaw ng browser.
Ang iba pang mga pag-aari kapag binago ay nagpapalitaw ng alinman sa pagpapatakbo o muling pinturahan ang mga pagpapatakbo, na mas mahal. Iwasang buhayin ang mga ito kung maaari.
Ang mga katangian ng pagbabago ay maaaring magamit upang sukatin, palubhusin, paikutin at ilipat ang mga bagay sa paligid. Ang paggamit ng mga pag-aari sa kaliwa, itaas, kanan at ibaba upang baguhin ang posisyon ng isang elemento ay isang pangkaraniwang pagkakamali. Ang pag-animate sa mga ito ay magiging sanhi ng muling pagkalkula ng browser ng layout. Gumamit ng transform: translateX () at ibahin ang anyo: translateY () sa halip.
Choreograpo ang iyong CSS
Huwag i-animate ang masyadong maraming mga elemento nang sabay-sabay o maaari kang mapunta sa isang slideshow sa halip na ang animasyon. Kung nakita mo ang iyong sarili sa isang posisyon kung saan kailangan mong buhayin ang maraming mga bagay, iugnay ang kanilang galaw. Planuhin nang maaga kung anong mga elemento ang iyong bubuhayin at kung paano at kailan mo ito bubuhayin.
Ang mga pagkaantala sa animasyon ay sobrang kapaki-pakinabang sa bagay na iyon. Maayos ang oras, maaari din silang magamit upang lumikha ng isang maayos na staggered na epekto ng paggalaw. Ang pag-offset ng mga oras ng pagsisimula ng animation ay nagbabawas ng pilay sa browser, dahil ang mga animasyon ay hindi magsisimula nang sabay. Mas madali ito sa tulong ng mga preprocessor ng CSS o JavaScript, habang sinusuportahan nila ang mga pag-andar ng loop.
Narito kung paano mag-stagger ng isang pag-aatras na pagkaantala ng animasyon sa SCSS:
.staggered {animasyon: slide .7s madali-out pareho; } @for $ i mula 1 hanggang 10 {.staggered: nth-child (# {$ i}) {animasyon-pagkaantala: 0.05s * $ i; }}
Maaaring tumagal ng kaunting eksperimento upang lubos na makabisay ng koreograpia ngunit ang pagsisikap ay gagantimpalaan ng mas mahusay na pagganap.
Pagde-debug
Ang pag-debug sa CSS na animasyon ay maaaring maging isang nakasisindak na gawain, at ang pagkakaroon ng tulong sa bagay na iyon ay mahalaga. Ang parehong mga tool sa developer ng Chrome at Firefox ay nagbibigay-daan sa iyo upang makita at mai-tweak ang iyong mga keyframe na animation, at pabagalin ang mga ito, pati na rin subaybayan ang kanilang pagganap. Tiyak na sulit na pamilyar sa mga tool na ito.
Kontrolin ang CSS animasyon gamit ang JavaScript
Minsan kailangan mo ng higit na kontrol sa iyong animasyon, at dito pumapasok ang JavaScript. Mayroong ilang mga bagay na hindi lamang magagawa sa CSS lamang. Pinapayagan ka ng JS na mag-tap sa iba't ibang mga pag-andar ng callback ng animation tulad ng animstart, animasyon at animasyon.
Ang pag-restart ng animasyon
Bagaman ito ay walang halaga, ang pag-restart ng CSS animasyon sa input ng gumagamit ay minsan ay nakakagulat na nakakalito. Inaalis lamang ang klase ng animasyon mula sa elemento at muling idinadagdag na hindi ito gumagana. Kailangan mo ng isang karagdagang hakbang na nasa pagitan at upang mag-trigger ng isang muling pag-iisip sa elemento. Narito kung paano ito gawin:
const elem = document.querySelector (’# animated-element’); const btnRestart = dokumento. querySelector (’# btn-restart’); Const restartAnimation = event => {event.preventDefault (); elem.classList.remove ('animating'); // Ito ay nagpapalitaw ng reflow void element.offsetWidth; elem.classList.add ('animating'); }; btnRestart.addEventListener ('click', restartAnimation, false);
Bilang isang huling paraan, ang pag-aalis ng elemento mula sa DOM at idagdag ito muli ay i-restart din ang animasyon.
Pagkontrol sa estado ng paglalaro
Maaari mong i-pause at ipagpatuloy ang CSS animation kasama ang JS sa isang katulad na paraan:
const elem = dokumento. querySelector (’# animated-element’); const btnPlay = dokumento. querySelector (’# btn-play’); const btnPause = dokumento. querySelector (’# btn-pause’); const playAnimation = event => {event.preventDefault (); elem.style.animationPlayState = 'running'; }; const pauseAnimation = event => {event.preventDefault (); elem.style.animationPlayState = 'naka-pause'; }; btnPlay.addEventListener (’click’, playAnimation, false); btnPause.addEventListener (’click’, pauseAnimation, false);
Isang pagtingin sa hinaharap
Mayroong ilang mga kapanapanabik na karaniwang tampok ng CSS na nakabalangkas sa spec na kasalukuyang nasa pipeline at bahagyang ipinatupad sa ilang mga browser na. Dalawa sa mga ito ay partikular na kawili-wili kapag tumitingin mula sa pananaw sa animasyon ng CSS: Mga variable ng CSS o mas tumpak na pasadyang mga pag-aari ng CSS at module ng Motion Path.
I-animate ang mga pasadyang katangian ng CSS
Bagaman ang mga variable ay magagamit sa mga paunang pagproseso ng CSS sa loob ng ilang oras ngayon, isang bagay ang gumagawa ng mga pasadyang pag-aari ng CSS na higit na may kakayahang umangkop at lubos na magagamit sa mga sitwasyon ng animasyon.
Tiyak mong mapapakinabangan ang katotohanang nagagawa mong manipulahin ang mga ito nang pabago-bago sa pamamagitan ng getProperty (), setPropertyValue () at alisin ang mga pamamaraan ng JS. Halimbawa, ang iyong CSS code ay maaaring magmukhang ganito:
# animated-obj {--xPos: 100px; animation: slide .4s kadalian-out pareho; } Nag-slide ang @keyframes {to% {transform: translateX (var (- xPos)); }}
Maaari mong i-access ang pag-aari ng --xPos sa JS:
const elem = dokumento. getElementById ('animated-obj'); // Basahin ang halaga ng pag-aari na ipinahayag sa aming CSS code const kasalukuyangX = elem.style. getPropertyValue (’- xPos’);
Itakda ito sa bagong halaga
elem.style.setProperty ('- xPos', '300px');
Alisin ang pag-aari
elem.style.removeProperty (’- xPos’);
Nagbubukas ito ng mga kagiliw-giliw na posibilidad, at nagbibigay sa mga developer ng mga bagong paraan upang ipares ang mga variable ng CSS sa animasyon na hindi posible dati. Maaari kang makakita ng magagandang halimbawa ng pag-animate sa mga CSS Variable sa CodePen sa mga imahe ng tampok na ito.
Ito ay nagkakahalaga ng pagbanggit na ang mga pasadyang pag-aari ay mapagmamana. Ang pagpapalit ng kanilang mga halaga ay mag-uudyok sa muling pagkalkula ng istilo para sa lahat ng kanilang mga anak, kaya ang mabuting pagsasanay ay upang itakda ang mga ito sa pinaka tiyak na antas.
Module ng Path ng Paggalaw ng CSS
Nagbibigay-daan sa iyo ang module ng Motion Path upang buhayin ang mga bagay sa isang pasadyang landas. Tinutukoy ng pagtutukoy ang mga sumusunod na katangian: offset-path, offset-distansya at offset-rotate. tinutukoy ng offset-path ang mga coordinate kung saan lilipat ang bagay sa panahon ng animasyon, tinutukoy ng offset-distansya ang isang posisyon kasama ang isang offset-path at ang offset-rotate ay tumutukoy sa direksyon ng elemento habang ang pagpoposisyon sa kahabaan ng offset path.
Narito ang pinasimple na halimbawa sa CSS:
.animated-obj {offset-path: path ('M100,250 C 100,50 400,50 400,250'); offset-rotate: auto; animation: ilipat ang .5s linear infinite; } Lumipat ang @keyframes {mula sa {offset-distance: 0%; } sa {offset-distansya: 100%; }}
Maging animating
Ang mga araw ng pagdidisenyo para sa mga static na screen ay matagal na nawala, tulad ng mga araw kung saan ang animasyon ay nangangahulugang Flash banner at popup. Dapat nating salubungin ang interactive na likas na katangian ng modernong web at magsimulang mag-isip tungkol sa animasyon sa mga maagang yugto sa halip na bilang isang naisip.
Kung hindi mo pa nagagawa ito, ngayon ay ang perpektong oras upang sumisid sa kapanapanabik na mundo ng CSS animasyon. Sa kaunting pagkamalikhain, maingat na pagpaplano at modernong tooling, halos wala nang hindi makakamit.
Kaganapan sa disenyo ng webbumuo ng Londonbabalik sa 19-21 Setyembre 2018, na nag-aalok ng isang naka-pack na iskedyul ng mga nagsasalita ng nangunguna sa industriya, isang buong araw ng mga pagawaan at mahalagang pagkakataon sa networking - huwag palampasin ito.Kunin ang iyong tiket sa pagbuo ngayon.
