Siyempre, ang animation ay palaging nagbibigay-buhay sa mga nakatigil na bagay, lalo na sa mga larawan. Ngunit maaari mo itong gamitin hindi lamang sa mga larawan. Halimbawa, nakahanap ang mga manggagawa ng magandang paggamit ng animation sa mga website. Kaya, lumalabas na ang site ay nagsisimula lamang na mabuhay, na, sa turn, ay nakakaakit ng pansin ng gumagamit o mamimili nang mas mahusay.

Ang paggamit ng mga maliliwanag na guhit at wastong animation ay nakakatulong upang mapabuti ang komunikasyon sa magkakaibang madla. Halimbawa, mayroong isang uri ng animation na pumipilit sa gumagamit na kumilos, o maaari mong maakit ang pansin sa nais na bagay sa site.

Sa pangkalahatan, ngayon gusto kong ipakita sa iyo ang ilang mga halimbawa ng magagandang mapagkukunan na gumagamit ng mga guhit na may animation. Tila sa akin na kung nagpasya kang lumikha ng isang katulad na mapagkukunan, kung gayon ang koleksyon na ito ay makakatulong sa iyo o magbigay ng inspirasyon sa iyo. Bukod dito, kailangan mong hanapin ang mga site na ito, dahil ang mga ito ay ginawa ng mga tunay na propesyonal.

Maraming salamat sa http://www.webdesignerdepot.com at gaya ng dati, siguraduhing tingnan ang aming mga nakaraang koleksyon ng magagandang website:

www.noiretrenoir.com

Isang kahanga-hangang site na gumagamit ng cool na animation upang kumonekta sa madla nito. Lalo kong nagustuhan kung paano mula sa simula ang site ay itim at puti at habang ang antas ng paglo-load ay umuunlad ito ay naging mas makulay, lahat ay napaka-creative at maganda ang pagkakagawa.

barcampomaha.org

Isang ganap na kasiya-siya at makulay na site na puno ng iba't ibang mga animated na monsters at alien.

www.azahran.com

www.quechua.com

Isang kahanga-hangang online na tindahan na gumagamit ng animation ng mga bagay, na kung saan ay lubos na nagpipilit sa pagkilos. Karaniwan, sa gayong magagandang site, mas madalas na bumibili ng mga kalakal ang mga tao.

Parallax.js

Ang site ay ginagamit bilang isang demo page na nagpapakita ng pagpapatakbo ng Parallax.js script. Ano ang masasabi ko, ang lahat ay mukhang napaka-kahanga-hanga!

www.buffawildwings.com

Isang site para sa isang simple ngunit nakakahumaling na laro. Gaya ng dati, ginagamit dito ang magarbong animation.

goodtwin.co

Ang site na ito ay gumagamit ng pareho magagandang ilustrasyon kaya at magandang animation sa kanila. Lahat ng sama-sama ito ay mukhang napaka-cool.

www.intacto10years.com

Maaaring naipakita ko na sa iyo ang site na ito, ngunit hindi ko maiwasang banggitin ito :) Tingnan lamang ang napakataas na kalidad ng trabaho.

Ito ay, maaaring sabihin, isang mahusay na ginawa at animated na infographic na nagpapakita sa iyo kung ano ang gagawin at pinipilit kang kumilos. Ito ay ginawa sa Flat na istilo, na nagbibigay sa site na ito ng modernidad at istilo.

www.ipolecat.com

Ang site na ito ay gumagamit ng karamihan sa magagandang mga guhit, ngunit kapag nag-scroll ka sa slider ay hindi sila gaanong nag-a-animate, na nagbibigay sa site ng medyo kakaibang pakiramdam.

www.octaveoctave.com

Kawili-wiling site na may hindi pangkaraniwang mga larawan at mga guhit, kasama ang animation. Sa madaling salita - hindi pangkaraniwang, ngunit naka-istilong.

www.milkable.me

Gumagamit ito ng napakagandang mga guhit at isang paralaks na epekto para sa kanila, napakahusay na paralaks na epekto sa pangunahing pahina na may mga guhit. At siyempre, isang napaka-cool na menu sa site.

www.mitchlana.com

Isang site ng isang mahuhusay na ilustrador na gumagamit ng animation upang pagandahin ang mga bagay nang kaunti.

Walang espesyal na trick sa paglikha ng malakihang animation. Bagama't hindi, mayroong: kailangan mong gumugol ng maraming oras sa pag-optimize at pagsubok nito. Kaya, pagkatapos ng ilang taon ng pag-eeksperimento, patuloy na itinutulak ang mga limitasyon ng pagganap ng mga browser, nakabuo kami ng isang serye ng mga prinsipyo ng disenyo at coding na magbibigay-daan sa sinuman na palamutihan ang kanilang proyekto na may kahanga-hanga at produktibong animation. Ang kanilang paggamit ay magbibigay-daan sa iyo upang makakuha ng maayos na pagpapatakbo ng mga pahina sa desktop at mga mobile browser. At ang pinakamahalaga, ang lahat ng ito ay tapos na at pinapanatili nang napakasimple.

Ang teknolohiya at pagpapatupad ay bahagyang magkakaiba para sa bawat partikular na kaso, ngunit tiwala kami na ang aming pangkalahatang mga prinsipyo ay magiging kapaki-pakinabang sa halos anumang sitwasyon.

Ano ang animation?

Umiral na ang mga animation mula pa noong bago ang Internet. Upang lumikha ng pinakamahusay, maaari kang gumugol ng panghabambuhay na pag-aaral. Gayunpaman, mayroon ding mga pattern sa bagay na ito. Tatalakayin natin ang ilang karaniwan at hindi pangkaraniwang problema na kinakaharap ng mga designer kapag gumagawa ng mga animation para sa web.

Upang makatanggap makinis na animation na may 60 fps bawat frame ay dapat maproseso sa mas mababa sa 16 ms! Ito ay isang maikling yugto ng panahon, kaya ito ay kinakailangan upang makahanap ng napakahusay na paraan upang i-render ang bawat frame para sa mataas na pagganap animation.

Mayroong maraming mga paraan upang ipatupad ang web animation. Halimbawa, umiral ang pelikula bago ang pagdating ng Internet. Ang kakanyahan nito ay ang mga frame na iginuhit ng kamay na may kaunting pagkakaiba ay ipinakita nang ilang beses bawat segundo, kaya lumilikha ng ilusyon ng paggalaw para sa manonood.

Ginamit kamakailan ng Twitter ang simpleng diskarte na ito para sa kanilang bagong animation mga puso, nag-i-scroll sa 26 na mga frame sa isang naibigay na pagkakasunod-sunod.

Ang resultang animation ay masyadong kumplikado upang ipatupad at, sa katunayan, hindi sapat na makinis.

Sa maraming mga kaso ito ay mas kumikitang gamitin CSS property"transition" upang awtomatikong i-animate ang isang elemento kapag nagbago ito. Ang diskarteng ito ay kilala rin bilang "tweening" at nagsasangkot ng paglikha ng animation na may awtomatikong pagbuo ng mga intermediate na larawan. Sabihin nating mayroon tayong 2 larawan ng parehong bagay sa magkaibang posisyon. Mga epekto paglipat ng CSS ay tutulong sa iyo na lumikha ng isang animation ng pagbabago ng estado nito. Ang kanilang paggamit ay kapaki-pakinabang dahil maaari mong i-reset o baligtarin ang buong lohika ng animation anumang oras. Ito ang perpektong "itakda ito at kalimutan ito" na diskarte. Mahusay na gumagana, halimbawa, sa iba't ibang mga intro sequence o simpleng pakikipag-ugnayan tulad ng pag-activate ng mga animation ng mouseover.

Gayundin animation na binuo sa CSS gamit mga pangunahing frame, maaaring magsilbi perpektong background para sa mga piling bahagi ng pahina. Halimbawa, ang mga singsing mula sa logo ng Gyroscope ay patuloy na umiikot. Ang diskarte na ito ay mahusay na gamitin para sa pagpapasigla ng paggalaw ng iba't ibang mga mekanismo.

Kaya, tapusin natin ang pagpapakilala at magpatuloy sa pangunahing bahagi ng post. Narito ang ilang tip na makakatulong sa iyong makabuluhang mapabuti ang pagiging produktibo at kalidad ng iyong animation. Sana matulungan ka nila.

#1 Huwag baguhin ang anumang mga katangian maliban sa opacity (opacity) at mga pagbabagong-anyo (ibahin ang anyo)

Kahit na sa tingin mo ay magiging mas mabuti sa ganitong paraan, hindi mo pa rin dapat gawin ito!

Ang pagsunod sa pangunahing prinsipyong ito ay magtataas ng kahusayan ng 80%, kahit na sa mobile na segment. Marahil ay narinig mo na ang tungkol dito. Ang ideya ay hindi orihinal, ngunit ito ay bihirang sundin. Ito ang web na katumbas ng "kumain ng malusog at ehersisyo." Narinig ng lahat, alam nila na ito ay tama, ngunit kakaunti ang sumusunod.

Sa katunayan, ang paggamit ng prinsipyong ito ay medyo madaling masanay. Makikinabang ito lalo na sa mga dati nang gumawa ng mga animation gamit ang mga tradisyonal na katangian ng CSS.

Halimbawa, kung kailangan mong gawing mas maliit ang isang bagay, maaari mong gamitin ang scale property ng pagbabago sa halip na baguhin ang lapad/taas. Kung kailangan mong ilipat ang isang elemento, hindi ka dapat mag-abala sa pagbabago ng mga halaga ng padding, dahil ang naturang animation ay mangangailangan ng muling pagsasaayos ng layout ng pahina sa bawat frame. Mas mahusay na gumamit ng mga simpleng katangian ng pagbabago para dito: ibahin ang anyo: isalinX o ibahin ang anyo: isalinY.

Bakit ito gumagana?

Para sa isang taong nagbabago ng lapad, padding, at iba pang katulad na mga parameter, maaaring hindi magandang ideya ang paggamit ng mga katangian ng pagbabago. Biswal ang resulta ay magkatulad. Ngunit mula sa punto ng view ng gastos ng computing power ng computer na kakalkulahin ang lahat ng ito, ang paggamit ng pagbabago ay mukhang maraming beses na mas mahusay.

Ang mga developer ng browser ay gumawa ng maraming trabaho upang i-optimize ang mga operasyong ito. Ang mga pagbabago ay talagang epektibo, nakakatipid sila ng mga mapagkukunan ng graphics card sa pamamagitan ng pag-aalis ng pangangailangan na muling i-render ang elemento.

Maaari kang mabaliw sa paghihintay na mag-load ang isang page na tulad nito: bilugan ang lahat ng sulok, ginagamit ang mga imahe, inilalagay ang mga anino sa lahat, at idinagdag ang dynamic na blur ng mga elemento para sa kumpletong kaligayahan. Kung minsan lang itong mangyari, hindi magkakaroon ng pagbabago ang ilang dagdag na millisecond ng paghihintay. Ngunit kapag nai-render na ang lahat ng nilalaman, hindi mo na nais na maghintay para sa anumang mga halaga na muling kalkulahin upang baguhin ang pahina.

#2 Itago ang nilalaman sa simpleng paningin.

Gumamit ng "pointer-events" sa CSS: value na "none" kasama ng zero opacity upang itago ang mga elemento

Ang pamamaraang ito ay hindi gumagana nang maayos sa mas lumang mga browser, ngunit kung ikaw ay nagdidisenyo para sa webkit o iba pang modernong browser engine, ito ay gagawing mas madali ang iyong buhay.

SA malayong panahon kapag ang mga animation ay naproseso sa tulong sa jQuery animate(), ang pangunahing kahirapan kapag nagtatrabaho sa fade effect ay ang pangangailangang palitan ang value ng display property: i-activate ang none para ihinto ang effect sa tamang sandali. Masyadong maaga at hindi makukumpleto ang animation, huli na at mapupunta ka sa isang hindi nakikitang elemento na may zero opacity na nakaharang sa page. Kinakailangan ang isang callback upang i-clear ang screen pagkatapos makumpleto ang animation.

Ang CSS property na "pointer-events" (na matagal nang umiiral, ngunit sa ilang kadahilanan ay hindi masyadong madalas na ginagamit) ay nagsisilbing gawing insensitive ang mga bagay sa mga pag-click ng mouse at iba pang mga pakikipag-ugnayan. Parang wala sila sa page. Madaling ma-enable/ma-disable ang property na ito sa pamamagitan ng CSS. Kapag tumatakbo, hindi nito naaabala ang animation at hindi naaapektuhan ang pag-render/visibility ng mga elemento.

Sa pamamagitan ng pagsasama-sama ng bagay na ito sa isang zero opacity na halaga, nakukuha namin ang parehong epekto na ibinibigay ng "display: none," ngunit walang epekto sa pagganap kapag nagsisimula ng mga bagong animation rendering loops. Kung kailangan kong itago ang isang elemento mula sa view, karaniwan kong itinatakda ang opacity sa zero at i-off ang pointer-events. Pagkatapos nito, makakalimutan ko ito, alam na ang lahat ay madaling maibabalik at walang makagambala sa pagganap ng pahina.

Ang pamamaraan na ito ay gumagana nang mahusay sa mga elemento na mayroon ganap na pagpoposisyon, dahil makakasigurado ka na wala silang anumang epekto sa lahat ng iba pang bahagi ng layout at mga elemento ng page.

Nagbibigay din ito sa iyo ng higit na kalayaan sa pagkilos, dahil ang oras ng pagsisimula/paghinto ng animation sa kasong ito ay maaaring hindi masyadong tumpak. Kahit na magkamali ka ng kaunti sa mga timing, walang masamang mangyayari. Ang user lang ay hindi makakapag-click ng anuman bago makumpleto ang animation. Mapupunta ang lahat ayon sa iyong pinlano.

#3 Hindi mo kailangang i-animate ang lahat nang sabay-sabay.

O gamitin ang prinsipyo ng koreograpia.

Ang isang animation ay maaaring maging makinis sa sarili nitong, ngunit kung maraming mga epekto ang isinasagawa nang sabay-sabay, maaari nitong masira ang buong larawan at mabawasan ang pagiging produktibo. Napakadali ng paglikha ng isang maayos na tumatakbong demo, ngunit ang pagtiyak ng isang katanggap-tanggap na antas ng pagganap bilang bahagi ng isang buong site ay mas mahirap. Samakatuwid, napakahalaga na planuhin nang maayos ang hitsura ng animation.

Gusto mong ayusin ang iyong mga timing upang magsimula ang lahat ng animation sa magkaibang panahon. Karaniwan ang 2-3 animation ay maaaring tumakbo nang walang pagkaantala sa parehong oras, lalo na kung magsisimula sila sa isang maliit na spread sa oras. Higit sa 3 sabay-sabay (sa pamamagitan ng mata, ngunit hindi sa esensya - dapat mayroong isang minimum na pagkalat sa oras) na paglulunsad ay halos tiyak na magdudulot ng mga pagkahuli sa screen.

Kung mayroong higit sa isang animation sa isang pahina, mahalagang maunawaan mo ang konsepto ng koreograpia. Mukhang, ano ang kinalaman ng dance term dito? Ngunit ang pag-unawa sa kakanyahan nito sa kontekstong ito ay napakahalaga para sa matagumpay na animation ng interface: ang mga bagay ay dapat na dumating sa screen mula sa tamang direksyon at sa tamang direksyon. mga tamang sandali. Kahit na lahat sila ay gumagana nang hiwalay, sa viewer dapat silang magmukhang mga bahagi ng isang mahusay na dinisenyo na mekanismo.

May ilan ang Material Design ng Google sa isyung ito. Ito ay, siyempre, hindi lamang ang tamang paraan, ngunit nagbibigay ito ng pagkain para sa pag-iisip at pagsubok.

#4 Ang bahagyang pagtaas sa pagkaantala ng transition ay nagpapadali sa pagsunod sa prinsipyo ng choreography

Napakahalaga ng animation choreography, at ang kalidad ng produksyon nito ay mangangailangan ng maraming eksperimento. Gayunpaman, ang code upang ipatupad ang ideya ay malamang na hindi masyadong kumplikado.

Karaniwan kong pinapalitan ang isang klase ng elemento ng magulang(pinaka madalas sa katawan) upang ma-trigger ang isang bungkos ng mga transition, na ang bawat isa ay may sariling parameter ng pagkaantala (transition-delay). Ginagawa ito upang lumitaw ang bawat elemento sa oras na kailangan ko. Mula sa pananaw ng coding, dapat ka lang mag-alala tungkol sa halaga ng isang variable sa halip na panatilihin ang dose-dosenang mga timing sa JavaScript.

Sa pamamagitan ng pagtatayon ng isang serye ng mga elemento sa parehong oras, maaari mong medyo simpleng ayusin ang kanilang koreograpia. Ito ay isang mahusay na diskarte dahil ang lahat ay mukhang maganda at tumatakbo nang mabilis sa parehong oras, tandaan lamang na maaari ka lamang magpatakbo ng 2-3 animation sa isang pagkakataon at lahat ay magiging maayos. Kailangan mong ipamahagi ang mga ito sa pahina upang ang bawat isa ay maproseso nang maayos at sa isang napapanahong paraan. Ang hanay ng iyong mga animation ay dapat na isipin ng tumitingin bilang isang tuluy-tuloy na daloy, at hindi isang hanay ng magkakaibang elemento. Isang tuluy-tuloy na eksena.

Halimbawang code

Mayroong ilang mga simpleng pamamaraan, na magbibigay-daan sa iyo na i-rock ang iyong mga elemento. Napaka-convenient ng mga ito, lalo na kung gumagamit ka ng mahabang hanay ng mga animation. Kung ang kadena ay naglalaman ng mas mababa sa 10 elemento, karaniwan kong tinutukoy ang mga halaga ng pagkaantala sa CSS. Ito ang pinakasimpleng paraan para ipatupad ito.

Para sa mas mahabang sequence o napaka-dynamic na pagbabago ng mga elemento, ang mga timing ay maaaring itakda nang dynamic para sa lahat ng mga elemento sa pamamagitan ng pagbabago ng mga halaga ng mga variable.

Karaniwang mayroong 2 variable: ang iyong base delay at ang time delay sa pagitan ng bawat elemento. Ang balanseng ito ay medyo mahirap hanapin, ngunit kung nahanap mo ang iyong sarili tamang set mga numero, pagkatapos ay magiging maayos ang lahat.

#5 Gumamit ng isang karaniwang multiplier upang bumuo saslow motion

At pabilisin ang lahat mamaya.

Sa disenyo ng animation, timing ang lahat. 20% ng trabaho ay nakasalalay sa paglikha ng mga animation mismo, at ang natitirang 80% ay sa paghahanap tamang mga parameter at mga timing upang makamit ang isang malinaw na naka-synchronize at maayos na eksena.

Ito ay totoo lalo na kapag nagtatrabaho sa koreograpia ng iba't ibang uri ng mga elemento at sinusubukang i-squeeze ang maximum na pagganap. Pagkatapos pabagalin ang mga animation, magiging mas madaling gamitin ang mga ganitong eksena.

Kung gumagamit ka ng Javascript o ilang uri ng CSS preprocessor tulad ng SASS, ang code ay dapat na medyo simple upang bumuo tamang istraktura mga variable.

Dapat mong tiyakin na ang disenyo ng code ay madaling gamitin upang madali mong masubukan ang iba't ibang bilis at timing. Halimbawa, kung nauutal ang animation kahit na sa 1/10 na bilis, malamang na mali ang iyong ginagawa. Kung ito ay maayos kapag naunat ng 50 beses, ang tanong ay bumababa sa paghahanap pinakamataas na bilis, kung saan maaari itong gumana nang maayos. Medyo mahirap na mapansin ang mga problema sa buong bilis, ngunit kung pabagalin mo ito, lahat sila ay magiging malinaw.

Upang mag-set up ng napakakumplikadong mga animation o upang makahanap ng mga bottleneck sa pagganap, ang pagsubaybay sa proseso sa mabagal na paggalaw ay magiging lubhang kapaki-pakinabang.

Ang ideya ay mag-pack ng maraming magagandang detalye sa isang eksena sa mabagal na paggalaw, pagkatapos ay pabilisin ito upang ang mga animation ay magmukhang perpekto. Ito ay napaka magandang trabaho, ngunit pahahalagahan ng mga user ang detalye at kinis ng nangyayari sa screen.

Ang tampok na ito ay isang aktibong bahagi ng OS X: kapag pinaliit mo ang window ng programa, makikita mo ang isang animation sa slow motion.

#6 Kumuha ng video ng iyong interface at mag-scroll, maaari kang makakita ng higit pa mula sa pananaw ng ikatlong tao

Minsan ang isang panlabas na pananaw ay nakakatulong sa iyo na makita ang mga bagay nang mas malinaw, at ang video ay sa isang mahusay na paraan makamit ito.

Ang ilang mga tao ay gumagawa ng mga video sa After Effects at pagkatapos ay subukang ipatupad ang nagresultang video sa website. Madalas kong gawin ang eksaktong kabaligtaran, sinusubukang gawin magandang video batay sa user interface ng site.

Sa totoong oras, medyo madaling makaligtaan ang ilang sandali. Ngunit tinitingnan ang animation sa pag-record sa mabagal na bilis ay tutulong na matukoy kahit ang pinakamaliit na problema nang paulit-ulit. Sa diskarteng ito, nagiging halata ang lahat.

Ang panonood ng mga time-lapse na video mula sa aking mga pahina at pagwawasto sa mga lugar ng problema ay naging isang mahalagang bahagi ng aking trabaho. Maaari mong, siyempre, sisihin ang lahat mabagal na mga browser, ngunit madalas, pagkatapos ng pagsubok at pag-optimize, ang mga animation ay nagsisimulang gumana tulad ng orasan. Ibig sabihin, lahat ay malulutas sa tamang paraan.

#7 Ang aktibidad sa network ay maaaring humantong sa mga lags.

Kailangan mong i-preload o i-block ang malakiHTTP-mga kahilingan

Ang mga imahe ay isang mapagpasyang salik sa bagay na ito, lalo na kung ang mga ito ay malaki sa timbang (halimbawa, isang mabigat na background), o isang toneladang maliliit (naglo-load ng 50-100 avatar, halimbawa), o simpleng malaking bilang nilalaman ( mahabang pahina na may maraming mga larawan).

Sa unang pag-load ng pahina, maraming bagay ang sinisimulan at nilo-load. Ang mga ad, module, at iba pang mga senaryo ng queue 3 sa pag-download ay nagpapalala sa sitwasyon. Minsan ang pagkaantala ng mga animation upang i-play lamang ng ilang daang millisecond pagkatapos ma-load ang natitirang bahagi ng pahina ay maaaring gumawa ng mga kababalaghan. Makakakuha ka ng makabuluhang pagpapalakas ng pagganap.

Hindi dapat gamitin ang mega-optimization maliban kung malinaw na kinakailangan, bagama't ang isang mabigat na page ay maaaring mangailangan ng napakatumpak na mga pagkaantala at mga timing ng animation upang tumakbo nang maayos. Sa pangkalahatan, kailangan mong magsimula sa pamamagitan ng pag-load ng kaunting data hangga't maaari, pagkatapos ay isama ang animation, at pagkatapos nito ay ipagpatuloy ang paglo-load ng natitirang bahagi ng mabibigat na nilalaman ng pahina.

Sa mga pahinang may isang malaking bilang Maaaring tumagal ng maraming oras ang trabaho sa pag-optimize ng data. Ang animation na mahusay na gumagana sa static na nilalaman ay maaaring magsimulang bumagal at masira kapag sabay-sabay na paglo-load na may totoong data. Kung ang isang bagay ay tila gumagana nang maayos, ngunit sa ilang mga punto ay nagsisimulang mahuli sa hindi kilalang dahilan, dapat mong suriin aktibidad ng network. Maaaring abala ang iyong channel sa iba pang mga pag-download sa mga sandaling ito. Tiyaking hindi pinangangasiwaan ng iyong network ang maraming sabay-sabay na malalaking pag-download.

#8 Hindi na kailangang baguhin ang default na pag-scroll.

Ang ideya ng pagpapalit ng scrollbar ay maaaring mukhang cool, ngunit ito ay talagang hindi.

Ang pag-scroll batay sa animation ay naging sikat sa loob ng ilang taon, lalo na kung ito ay ginawa gamit ang paralaks at iba pang mga espesyal na epekto. Ang isa ay maaaring magtaltalan tungkol sa pagiging kapaki-pakinabang nito sa loob ng mahabang panahon, ngunit may ilang matagumpay at hindi matagumpay na mga paraan upang teknikal na ipatupad ang gayong ideya.

Moderately sa isang mahusay na paraan Ang paglikha ng mga bagay mula sa kategoryang ito ay upang matukoy ang pinakamainam na hakbang sa pag-scroll at i-highlight ito bilang isang hiwalay na kaganapan. Kung hindi mo alam kung ano ang iyong ginagawa, mas mahusay na huwag gumamit ng gayong pag-scroll. Madaling magkamali dito, at ang pagpapanatili ng isang normal na antas ng pagganap sa mga pahina na may kumplikadong pag-scroll ay isang mahirap na gawain.

Higit pa pinakamasamang ideya Mukhang pinapalitan ang karaniwang scroll ng tinatawag na scrolljacking (nagbabago ang nilalaman sa oras kasama ang scroll, halimbawa - ang website ng Apple). Huwag gawin ito. Mahirap na matagumpay na ipatupad ang gayong epekto, at hindi lahat ng mga gumagamit ay magugustuhan ito.

Kung mayroon kang ilang karanasan at pagnanais na lumikha ng iyong sariling scrollbar, gumawa ng isang magaan na prototype nito at subukan ito para sa functionality bago gumugol ng oras sa buong pag-unlad.

#9 Subukan ang iyong mga proyekto sa mga mobile device nang mas madalas.

Karamihan sa mga website ay nilikha sa isang PC. Kadalasan sila ay nasubok sa parehong makina kung saan sila binuo. kaya, mobile na bersyon lumabo sa background ang pagganap ng site at animation. Ang ilang teknolohiya ng animation (halimbawa, canvas) ay hindi gagana nang maayos sa mga mobile platform.

Gayunpaman, kung ang animation ay tapos na at na-optimize nang maayos, kung gayon ang resulta karanasan sa mobile ang paggamit ay maaaring mas mataas sa kalidad kaysa sa desktop. Pag-optimize sa mobile dating napakahirap na paksa, ngunit mga bagong iPhone gumana nang mas mabilis kaysa sa karamihan ng mga laptop. Kung susundin mo ang mga tip sa itaas, makakamit mo ang kahanga-hangang pagganap sa iyong mga animation at mga mobile device Oh.

Ang mobile na bersyon ng site ay isang malaki at napakahalagang bahagi nito. Maaaring mukhang kakaiba ito, ngunit inirerekomenda ko ang pag-browse sa iyong site nang eksklusibo sa iyong telepono o tablet sa loob ng isang linggo. Sa isip, hindi mo dapat maramdaman na pinaparusahan ka ng hindi mo makuha ang iyong desktop. Kung ang lahat ay gumagana nang mabilis, maayos at hindi lumalabag sa inilaan na istraktura, pagkatapos ay nakamit mo ang iyong layunin. Kung may mali, kailangan mong patuloy na magtrabaho.

Magpatuloy sa paggawa ng mga pagpapahusay sa disenyo at pagbutihin ang pagganap hanggang sa ganap na mawala ang pagkakaiba sa karanasan ng user sa pagitan ng mga mobile at desktop na bersyon ng site.

Kung pipilitin mo ang iyong sarili na gumamit ng isang mobile site sa loob ng isang linggo, malamang na ma-optimize mo ito nang mas mahusay kaysa sa mas malaking bersyon. Sa pamamagitan ng paglaban sa pangangati sa pamamagitan ng regular na paggamit nito, lubos mong mauunawaan ang mga problemang kakaharapin ng iyong mga user at maaalis ang mga ito bago maging live ang proyekto. Ito ay magliligtas sa iyo mula sa maraming problema sa hinaharap.

#10 Subukan ang mga proyekto sa iba't ibang device

Maraming mga kadahilanan na maaaring makaapekto nang malaki sa pagganap ng isang website sa mga PC at mobile device: resolution ng screen, bilang ng mga pixel sa window, lumang hardware, atbp.

Kahit na ang Chrome at Safari ay binuo sa Webkit at may halos parehong syntax, bawat isa ay may kanya-kanyang kakaiba. Anumang pag-update ng Chrome ay sabay na nag-aayos ng mga lumang bug at nagpapakilala ng mga bago, kaya kailangan mong patuloy na panatilihin ang iyong daliri sa pulso, gaya ng sinasabi nila.

Malinaw na hindi lahat ay gustong sundan ang landas ng hindi bababa sa paglaban, na gumagawa ng mga website ayon sa pinakamababang karaniwang denominator ng kabuuan ng mga bug, upang hindi mapunta sa isa pang gulo pagkatapos ng pinakabagong mga update. mga sikat na browser. Ang paghahanap ng mga matalinong paraan upang magdagdag ng mga pagpapahusay at mag-alis ng ilan upang mapanatiling maayos ang pagtakbo ng iyong site ay maaaring maging napaka-kasiya-siya.

Regular akong nagpapalipat-lipat ng trabaho sa aking maliit MacBook Air at isang malaking iMac. Ang bawat cycle ay nagpapakita ng maliliit na problema at nagpapahiwatig ng mga kinakailangang pagpapabuti. Nababahala ito hindi lamang sa pagganap ng animation, kundi pati na rin sa disenyo ng site sa kabuuan, density ng impormasyon, pagiging madaling mabasa, istraktura, atbp.

Mobile at regular na bersyon Ang mga website ay kadalasang naiiba sa disenyo ng istraktura sa mga tuntunin ng lapad, taas, density ng pixel at iba pang mga katangian. Kaalaman sa mga tampok mga operating system at mga katangian ng hardware ng mga mobile device ay makakatulong sa pag-optimize, dahil ibang-iba ang mga ito sa mga nasa PC.

Umaasa ako na nakita mong kapaki-pakinabang ang mga diskarte sa itaas at gamitin ang mga ito sa iyong susunod na proyekto. Good luck!

Pagsasalin ng artikulo https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29

Pas de Deux, Norman McLaren 1968

Ang animation ay hindi ang sining ng pagguhit sa paggalaw, ngunit ang sining ng paggalaw sa pagguhit. — Norman McLaren

Alam ng lahat kung ano ang animation, ngunit paano kung paano ito pagsamahin sa web at disenyo ng mobile? Ngayon, maraming mga site ang gumagamit ng animation sa isang antas o iba pa, ngunit higit sa lahat para sa kapakanan ng magandang larawan, hindi para pagbutihin ang UX.

Tulad ng tradisyonal na disenyo, ang animation ay may konsepto, prinsipyo, at pagnanais na maghanap hindi karaniwang mga solusyon, na gagawing pabor sa iyo ang animation. Magsimula sa apat na ito kapaki-pakinabang na mga tip tungkol sa paggamit ng animation upang mapabuti ang iyong website.

Tumutok sa paggalaw, hindi code

Pag-isipan ang paggalaw bago ka magsimulang mag-isip tungkol sa code. Papayagan ka nitong bigyang-pansin ang proseso ng animation. Siyempre, may pagkakataon na hindi lahat ng iyong disenyo ay maaaring ma-code nang perpekto, ngunit sa ganitong paraan magkakaroon ka ng pagkakataong gumawa ng mga kompromiso.

Ang mga maagang sketch ng Bugs Bunny ni Chuck Jones ay nagpapakita ng pag-iisip kung paano siya bibigyan ng hugis, timbang, at paggalaw.

Ang pagsisimulang mag-isip tungkol sa code muna ay masisira ang personalidad ng animation sa pamamagitan ng pag-aalala posibleng mga paghihigpit coding.

Ito ay halos tulad ng pagpaplano ng isang paglalarawan batay sa kulay na lapis na mayroon ka (at wala). Ito ay hindi tama.

Pinapatay nito ang anumang dahilan upang magdagdag ng animation sa simula. Subukang mag-focus nang higit sa kung paano mo gustong tingnan at ilipat ang iyong animation. Darating ang mga detalye ng pagpapatupad mamaya.

Sa huli, ang coding ay magiging isang paraan lamang para sa isang dulo. Ang iyong disenyo at sikolohikal na proseso ay gagawing buhay ang animation.

Tumutok sa layunin

Kung ang iyong animation ay walang layunin, kung gayon ito ay nagkakahalaga ng pagsasaalang-alang kung ito ay nangangailangan ng isa. Halimbawa, ang mga animated loading indicator ay may mas malalim na layunin kaysa sa iniisip ng maraming designer: tulad ng "ginagawa ito ng lahat" o "mukhang cool."

Ang paglo-load ng animation ay nilikha upang bigyan ang mga user ng ilan puna(o, ni kahit man lang, pakiramdam ng pag-unlad). Maaaring maging kapaki-pakinabang ang iba pang mga animation ng menu upang ipakita sa user kung saan nakasara ang menu. Pareho sa mga halimbawang ito ay praktikal na benepisyo para sa gumagamit.

Sa kabilang banda, ang pagbubunyag ng nabigasyon at paglo-load ng mga logo ay mga halimbawa ng animation na mas pandekorasyon kaysa sa functional. Tandaan na ang iyong animation ay ginawa upang tulungan ang user, hindi ang lumikha. Hindi ito ang iyong pitch para sa Pixar.

Tingnan natin ang pampalamuti, marangya na animation at isang bagay na mas gumagana.

sumisigaw

matikas

Tulad ng nakikita mo, maaari mong makamit ang halos parehong resulta nang walang marangya, maliwanag na animation. Nagbibigay ito malinis tingnan, at hindi pinababayaan ang gumagamit na mag-isip, "uh... anong nangyari?" Bukod dito, ang mga abalang animation ay tila bumagal kapag mas ginagamit mo ang mga ito.

Alamin ang paggalaw

Mahirap gumawa ng magandang animation nang hindi naiintindihan ang paggalaw. Ang Susi sa Magandang Animation ay Parang Imitasyon tunay na mga galaw kaysa sa kanilang masining na interpretasyon.

Binibigyang-daan ka ng Youtube na manood ng mga video sa iba't ibang bilis ng pag-playback gamit ang panel ng mga setting ng player.

Kung hindi ka sigurado tungkol sa paggalaw, maghanap ng video ng katumbas sa totoong buhay online at matuto sa mabagal na bilis. Mababang bilis ang mga replay ay madalas na nagpapakita ng mahahalagang pagpindot. Hindi alam ng maraming tao na pinapayagan ka ng Youtube na manood ng mga video sa iba't ibang bilis ng pag-playback gamit ang panel ng mga setting ng player.

Kapag iniisip ng mga tao ang paggalaw, kadalasang iniisip nila ang paggalaw pataas, pababa, kaliwa, at kanan, ngunit kahit na gumagalaw ang iyong animation sa ganoong paraan, hindi ito nangangahulugan na magiging natural ito. Ito ay palaging nagkakahalaga ng pagsasaalang-alang sa mga kadahilanan tulad ng materyal, bilis, acceleration, paglukso at pagmuni-muni. Mahalagang lumikha ng tuluy-tuloy na animation upang suportahan ang ilusyon at pantasya. Sa madaling salita, subukang gawing halos "invisible" ang iyong animation.

Mas madaling gumawa ng "invisible animation" kapag naiintindihan mo kung paano nakikita ng mga tao ang paggalaw. Samakatuwid, ang paggalugad sa mundo sa paligid mo ay isang magandang ideya.

Pag-aralan ang mga interface ng video game - lalo na ang mga mula sa nakalipas na 3 taon - at bigyang pansin kung paano nagna-navigate ang mga user sa kanila. Kung wala ka sa mood na manood ng laro, manood na lang ng iba't ibang cartoon movies at palabas. Ang pinakamahalagang bagay ay ang lumikha mga tunay na pagsubok bago mo simulan ang paglalapat ng animation sa mga kumplikadong proyekto.

Pinagmulan: Martin Drapeau - Backbone Game Engine.

Subukang umiwas sa mali-mali at kumikislap na paggalaw. Hayaang maging stable ang animation. Hayaan ang user na mag-enjoy at maunawaan kung ano ang kanilang nakikita, lalo na kung ang animation ay naghahatid mahalagang impormasyon. Ang mga paggalaw ng mga kurba sa mga punto ay perpekto, mayroon din maayos na paglipat sa pamamagitan ng matalim na pagliko at pagliko kung kinakailangan.

Sabihin ang iyong kuwento nang maayos

Pag-synchronize - keyword sa animation. Siyempre, gusto mong gawin muna ang isang elemento, pagkatapos ay isa pa, at iba pa, upang makalikha hangga't maaari higit pang animation. Pero hindi pala ang pinakamahusay na paraan, na sulit na sundin. Anumang animation na gagawin mo, gaano man kalaki o maliit, ay dapat na isang magkakaugnay na bloke.

Ang pinakamahusay na paraan upang gawin ito ay ang lumikha ng isang bagay na malapit sa isang animatic. Ito ay mga animated na storyboard na binubuo ng mga guhit o sketch na na-edit o inayos upang malapit na maging katulad ng huling resulta.

Maniwala ka sa akin, ito ay lubhang kapaki-pakinabang kapag nagtatrabaho sa isang website o pelikula. Ang larawan sa ibaba ay ang storyboard na ginawa ko para sa music video. Hindi na kailangang sabihin, hindi ito ang huling resulta, gayunpaman, nakatulong ito sa akin na hindi malito.

Ang pag-sketch ng iyong animation ay nagbibigay-daan sa iyong makita kung ano ang magiging hitsura ng lahat sa huli at nagbibigay-daan sa iyong makita ang mga imperpeksyon nang maaga. Halimbawa, ang iyong animation sa paglo-load ay isang halo ng mga umiikot na galaw at mga naka-lock na elemento hanggang ang nabigasyon ng iyong site ay nagpapakita ng sarili nito gamit ang mga lupon. Ang pagkakita sa mga hindi pagkakapare-parehong ito ay makakatulong sa iyong gawin ang mga kinakailangang pagbabago o subukan ang isang bagay na ganap na naiiba.

Ang paggawa muna ng maliliit ngunit mahahalagang pangungutya at pagsubok na tulad nito ay makakatulong sa iyong paganahin ang iyong pangkalahatang maayos na paggalaw. Mayroong maraming magagandang site na nakagawa nito nang kamangha-mangha. Gumamit ng animation ang Reverend Danger at Every Last Drop para ikwento ang kanilang kwento.

Bagama't ibang-iba ang pag-animate ng parehong mga site, nilikha ang bawat elemento sa mga ito upang hindi lamang magkuwento, ngunit literal na tulungan itong sumulong.

Bottom line

Kasama sa animation ang isang malaking bilang ng mga istilo at diskarte, ngunit hindi ito nangangahulugan na walang susi at pangunahing mga konsepto. Para masulit ang iyong animation:

• Tanggalin ang "code first" mentality,

• Gawing praktikal at kapaki-pakinabang ang animation,

• Maghintay ng kaunti upang talagang maunawaan kung ano ang sinasabi ng mga paggalaw.


Ngunit ang pinakamahalaga, magsaya sa proseso ng paglikha ng iyong animation.

Ang animation ay isa sa mga pangunahing uso sa modernong paggawa ng website. Ang mga elemento ng animation sa mga interface ay nagpapahusay sa kanilang kakayahang magamit bagong antas, na ginagawang intuitive at naa-access ang mga ito ordinaryong gumagamit. Sa mga landing page o, halimbawa, mga corporate website, nakakatulong ito na mas malinaw na sabihin sa bisita ang tungkol sa iyong produkto o ipakita ang mga pakinabang nito.

Gumawa kami ng isang seleksyon ng 5 mga aklatan para sa paglikha ng animation sa mga website, pinag-uusapan ang kanilang mga pakinabang, disadvantages at mga lugar ng aplikasyon.

GreenSock Animation Platform

Ngunit sa parehong oras, ang tween.js ay ganap na hindi angkop para sa pag-animate ng mga elemento ng HTML - ang sumusunod na dalawang tool ay humahawak nito.

Move.js

Ang Move.js ay isang javascript library na nagbibigay-daan sa iyong gawin ang lahat ng ginagawa ng tween.js, gamit lang ang CSS3 at HTML5 sa halip na Canvas. Hindi ito ang pinakamadali (tulad ng para sa JS), ngunit isa sa pinakasikat. Ang isang hanay ng mga pre-prepared na uri ng animation (pag-ikot, pagtabingi, pag-ikot, atbp.) ay ginagawa rin itong isa sa pinakamadaling gamitin.

Halimbawang code gamit ang Move.js:

Move("#example-4 .box") .rotate(140) .end();

WOW.js + Animate.css

Sa katunayan, ang mga ito ay hindi tunay na animation library o frameworks, kahit man lang sa tradisyonal na kahulugan.

Animate.css lang CSS file, na naglalaman ng ilang dosenang panuntunan na nauugnay sa mga animation, at ang WOW.js ay isang maliit na script lamang na nagpapatakbo ng mga animation na ito habang nag-i-scroll ang pahina.

Gayunpaman, maaaring magkasama ang dalawang script na ito ang pinakamahusay na paraan puwersa Mga elemento ng HTML ilipat, o, sa madaling salita, bigyang-buhay ang mga ito.

Una, ang kagaanan ay nagpapasya. 2 KB lang at walang dependencies!

Pangalawa, Ang wow.js at animate.css ay napakadaling gamitin. Malamang, hindi mo na kailangang magsulat ng isang linya ng dagdag na JS code. Ito ay sapat na upang ikonekta ang dalawang script na ito sa pahina at magdagdag ng ilang mga klase ng css: wow klase at ang klase ng animation na kailangan namin.

Ngayon, kapag nag-load ang page, sa halip na ipakita ang statically, ang elementong ito ay iikot nang maganda:

Upang i-customize ang animation, ginagamit ang mga espesyal na katangian ng data, halimbawa, data-wow-duration=”2s” itatakda ang tagal ng pag-ikot sa 2 segundo.

Demo, mas detalyadong dokumentasyon at buong listahan Ang mga katangian ng data ay matatagpuan sa opisyal na website ng WOW.js, isang kumpletong listahan ng mga klase ng animation ay matatagpuan sa opisyal na website ng Animate.js.

Animation gamit ang JQuery

salita "animation" nanggaling sa sinaunang salitang Latin "anima", ibig sabihin "kaluluwa". Ang mga pagtatangka na huminga ng buhay sa mga static na artipisyal na bagay ay lumitaw libu-libong taon na ang nakalilipas, nang sinubukan ni Pygmalion na gisingin ang kanyang nilikha - ang estatwa ng kaakit-akit na Galatea.

Ngayon, ang animation ay matatag na nakatanim sa disenyo ng web at tila isang mahusay na karagdagan sa maraming mga elemento ng website. Nagbibigay ba ito ng mas maraming buhay sa disenyo o maaari ba itong masira ang lahat? Alamin natin kung anong mga benepisyo ang maidudulot ng animation sa iyong website at kailan mas mabuting iwasan ito?

PAANO LUMITAAS ANG ANIMATION SA WEB DESIGN?

Ang animation ay lumitaw sa Internet medyo matagal na ang nakalipas. Noong una ay maliliit pa sila .GIF-mga file mula sa iba't ibang gumagalaw na larawan at video clip. Ito ay isang madilim na panahon na may maraming kumikislap na mga postkard, sumasayaw na pusa at iba pang mga bagay na mas gusto naming hindi makita.

Sa mga panahong iyon, walang sinuman ang itinuturing na animation tool sa pagpapahusay ng kakayahang magamit ng website. Ito ay pangunahing ginagamit para sa dekorasyon o para lamang sa kasiyahan. Ngayon, maaari mong gamitin mga epekto ng animation upang mapabuti ang pag-navigate at kakayahang magamit ng site.

Kamakailan lamang, ang lahat ng mga animated na elemento at epekto sa mga website ay ginawa gamit ang Mga teknolohiya ng flash. Sa oras na iyon, ito ay isang rebolusyonaryong teknolohiya, bagaman ito ay napakabigat at makabuluhang nadagdagan ang oras ng paglo-load ng site. Sa mga araw na ito, ang animation ay nilikha gamit ang higit pa madaling paraan pag-coding ng JavaScript at CSS na tumutulong sa pagdaragdag ng mga gumagalaw na elemento sa site nang hindi ito nag-overload. At higit sa lahat, ginagamit na ngayon ang mga animation para pahusayin ang UX sa halip na katuwaan lang. Ito ay isang natatanging tool para sa mga web designer upang makatulong na gawing mas mahusay at mas madaling gamitin ang isang website.

PAGPABUTI NG PAGKAKAUSA SA ANIMATION

Sa maraming kaso, ginagamit ang mga animation effect upang maakit ang atensyon ng gumagamit Upang mahahalagang detalye, pati na rin upang matulungan siyang gumawa ng tamang desisyon tungkol sa clickability ng mga elemento, bukod sa iba pang mga bagay.

Kaya, maraming mga website ang gumagamit ng isang nanginginig na epekto para sa pag-login o mga form sa pagpaparehistro upang ipahiwatig sa kanilang mga gumagamit na mayroong isang error. Halimbawa, pagpapakilala maling impormasyon o maling password. Ang trend na ito ay ginagaya ang isang tao na umiiling habang sinasabing "hindi."

Mayroong maraming iba pang mga paraan upang gamitin ang animation upang mapabuti ang UX. Maaari itong magamit sa pag-navigate upang paghiwalayin ang mga kategorya mula sa mga subcategory o sa multi-selection kung saan ang lahat ng iba pang mga item ay nawawala maliban sa napili.

E TECHEVENT – WEBSITE NA MAY MGA ANIMATED ELEMENT

Maaaring gamitin ang mga animation upang gabayan ang user sa buong site at madala pa silang bumili ng isang bagay. Ang pagdaragdag ng mga interactive na elemento at pag-akit ng pansin ng mga user sa kanila gamit ang mga animation effect ay maaaring makatulong sa mga website ng negosyo na mapataas ang kanilang mga conversion atROI.

INTERAKTIBONG SITE A P.P.S.

Websitepagkukuwento maaari ding makinabang sa animation. Makakatulong ito na ipakita sa mga user kung ano ang susunod na hakbang o kung paano pipiliin kung saan susunod na pupuntahan.

PAGGAMIT NG ANIMATION SA MATERIAL DESIGN

Ang animation sa disenyo ng web ay isang magandang hakbang na maaaring maging lubhang kapaki-pakinabang kung hindi ginagamit para lamang sa mga layuning pampalamuti. Ang mga taga-disenyo ng UI at UX ngayon ay madalas na gumagamit ng animation upang mapabuti ang kanilang daloy ng trabaho. Kahit na ang Google ay nauunawaan ang kahalagahan ng kilusang ito para sa kakayahang magamit. At kaya ito lumitaw disenyo ng materyal.

Ang disenyo ng materyal ay nagiging mas at mas sunod sa moda at ngayon ito ay ginagamit sa iba't ibang mga aplikasyon at disenyo ng web. Ang sikreto ng katanyagan nito ay nakasalalay sa mataas na atensyon nito sa kung paano nakikita ang isang bagay o elemento. Paano masasabi ng paggalaw sa user ang higit pa tungkol sa elemento at kung paano ito gamitin.

Sa kanyang Gabay sa Disenyo ng Materyal Sinasabi ng Google na maaaring sabihin ng paggalaw sa mga user na ang isang bagay ay magaan, mabigat, nababaluktot, at kahit malaki o maliit. Dapat gamitin ang animation upang bigyan ang mga user ng higit na pang-unawa sa kung ano ang katangian ng isang bagay, at samakatuwid kung paano ito magagamit at dapat gamitin sa isang disenyo.

Ang Google ay nagpapatuloy sa animation nito at nagrerekomenda ng paggamit ng mga gumagalaw na elemento na nagbabago ng kanilang bilis at tagal depende sa kung anong layunin o epekto ang gusto mong makamit. kaya, kumpanya ng Google nalalapat ang mga papasok at papalabas na elemento na lumalabas sa screen kapag kailangan nilang makaakit ng atensyon, o mawala sa screen kapag hindi na kailangan ang mga ito.

MGA TIP PARA SA MGA ANIMATION NA GINAMIT SA MGA WEBSITE

Kapag nagpapatupad ng animation sa iyong website, dapat mo ring maingat na pag-aralan ang lahat ng mga pitfalls. Ang mga animated na elemento ay maaari pa ring makapinsala sa pagganap ng site at UX.

Una dapat mong suriin na mabuti kung ang animation hindi nagpapabagal sa iyong site, bilis ng pag-download at pangkalahatang pagganap. Ito ay maaaring ibunyag gamit ang simpleng paghahambing iyong website na may animation at pagganap ng isang heavyweight na laro ng PC. Kung ang laro ay tumatakbo nang mas maayos sa iyong desktop kaysa sa website, ito ay dapat na dahilan upang muling isaalang-alang ang mga animation na ginamit.

Ang Website ng Maligayang Pagtataya

Gumamit ng CSS kapag gumagawa ng mga animation para sa iyong website. Ang JQuery ay perpekto at ginagamit sa maraming proyekto, ngunit maaari nitong pabagalin ang pagganap ng iyong website. Binibigyang-daan ka ng CSS code na lumikha ng mga simpleng animation na maganda ang hitsura sa anumang device nang hindi pinapalaki ang iyong disenyo at ginagawa itong maganda.

Tiyaking ang iyong animation tumutugon. Ang isang tumutugon na website ay kinakailangan kung nais mong maging matagumpay. At kung gagana lang ito at mukhang maganda sa desktop screen, maaaring matalo ka sa labanan para sa mga user. Maraming mga tool na nagbibigay-daan sa iyong lumikha ng mga tumutugon na animation (halimbawa, Adobe Pagkatapos Effects o Invision) at mga tagabuo ng website (Webflow at MotoCMS) na nagsasama ng tumutugong mga animated na epekto sa kanilang daloy ng trabaho. Nag-aalok sila iba't ibang uri mga animation na maaaring magamit sa loob ng site upang mapabuti ang kakayahang magamit at disenyo nito.

Animasyon dapat makaakit ng pansin, ngunit hindi masyadong marami. Siguraduhin na ang paggalaw ay hindi tumatagal ng masyadong maraming oras o masyadong mahaba sa screen. Ito ay lalong mahalaga kung pinag-uusapan natin ang tungkol sa mga elemento na kailangan ng mga user na makipag-ugnayan nang madalas. Maaari itong maging masaya nang isang beses o dalawang beses, ngunit sa madalas na paggamit ay nagiging nakakainis ang animation.

Website ng Laererepenger

Magsimula sa pamamagitan ng paggamit ng maliliit na gumagalaw na elemento sa iyong site. Sa katunayan, ang animation ay isang paraan lamang sa isang layunin, hindi ang mismong wakas. Hindi mo kailangang i-on ito kahit saan mo gusto. Tandaan - ang paggamit ay dapat na makatwiran.

Pinakamahusay isama ang animation sa mga elemento ng UI o mga bagay na pinakamadalas na nakikipag-ugnayan ang mga user. Tulad ng menu ng nabigasyon o subscription form. At pag-isipang mabuti bago magdagdag ng nagba-bounce na box o sliding na larawan: paano ito makakaapekto sa karanasan ng user, mapapabuti ba nito ang pakikipag-ugnayan sa site?

Mahusay ang animation para sa paglikha ng mga di-malilimutang disenyo. Malawak pa rin itong ginagamit sa disenyo ng web, sa kabila ng iba't ibang maliliit na problema sa bilis ng paglo-load o pagyeyelo. Ngunit ang pangunahing bagay na dapat mong tandaan kapag nagpapakilala ng mga animated na elemento ay ang epekto nito sa kakayahang magamit. Ngunit kung saan at sa kung anong dami ang pagsasama-sama ng animation sa iyong website ay nasa iyo.

At sa wakas, ilang halimbawa kung saan ginamit ang animation eksaktong hit sa target.

Website ng Kikk
Nodeplus Digital Agency
Creative Cruise
Animated na Scenery Vintage Farm
Pomade Digital Agency