Share
Am construit ghiduri complete pentru a vă ajuta să învățați CSS și să animați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați tehnici mai avansate.
Propunerea a devenit o parte foarte importantă a domeniului web design în ultimii ani. Propunerea și animația adaugă straturi de dimensiuni unei interfețe, ajutând utilizatorul, oferind feedback, încântătoare și angajându-se de-a lungul drumului.
În acest articol, voi trece prin pașii implicați în animația de învățare pentru web, din ceea ce este vorba, deși tranziții simple, animații mai complexe și resurse utile. Vor fi câteva exerciții practice și interactive pentru a trasa puncte de acasă. Până la urmă, veți avea o idee solidă despre actualul peisaj de animație web și despre modul în care vă puteți ocupa de el.
Vom analiza următoarele:
Disciplina de design web este în continuă schimbare, iar un aspect care a apărut în ultimii ani este abilitatea de a anima. Navigatorii au devenit mai capabili, procesoarele mai rapide, iar dispozitivele manuale au pregătit calea pentru "gesturi"; scuturarea, ciupirea si forta atingerii.
Motion oferă interfețe unui număr de lucruri care îmbunătățesc experiența utilizatorilor, inclusiv:
Propunerea îmbunătățește experiența utilizatorului și aduce viața pe web. Având în vedere toate acestea, este important ca, în calitate de designer de interfețe, să țineți cont de animație. Să mergem cu elementele de bază!
Sau să sară direct cu cursul de animație practic al lui Craig Campbell!
Transitările CSS sunt adesea un gateway de web designer în lumea mișcării. Ei instruiesc browserul să ia o stare inițială a unui element, apoi o stare finală și o tranziție fără probleme între cele două. Sintaxa este relativ directă, cuprinzând patru proprietăți și o versiune prescurtată:
Accentsconagua
tranziție-proprietatedurata tranzițieitranziție-sincronizare-funcțietranziție întârziereSă începem cu un buton. În acest exemplu, avem un buton cu câteva stiluri de bază pentru a face să pară ca și cum ar fi crescut puțin din pagină. În mod prestabilit, dacă treceți deasupra acestuia, se schimbă culoarea. Apoi, dacă faceți clic pe el, pare să fie împins în jos. Am făcut acest lucru folosind fundal, poziția-top, si poziția stânga proprietăți, dar schimbarea în fiecare caz este instantanee:
Acum, hai să facem efectul mai subtil, adăugând a tranziție la .buton element. Adăugarea, de exemplu, tranziție: toate 1s; va asigura asta toate schimbările de proprietate vor fi tranziționate fără probleme pe parcursul a 1 secundă.
Dezactivați prima regulă din panoul CSS și veți vedea că aceasta va avea efect:
Acum, ați văzut lucrul acesta, încercați să dezactivați a doua regulă. În al doilea exemplu, am enumerat fiecare dintre proprietățile în schimbare în mod individual, astfel încât să putem defini diferite viteze de tranziție pentru fiecare dintre acestea.
În cele din urmă, încercați să dezarhivați al treilea exemplu, unde veți vedea că am adăugat funcții de temporizare de asemenea. Acestea afectează rata de tranziție - vom vorbi mai târziu despre ele.
Cu tranzițiile CSS sub centură, este timpul să faceți lucrurile într-o notă. Animație CSS keyframe oferă control mult mai mult, permițându-vă să specificați modificările de-a lungul unei cronologii. Sunt necesari doi pași pentru animarea keyframe-ului; definirea cadrelor cheie și atribuirea animației elementului dvs. de alegere.
Să spunem că începem cu o minge.
Acum putem defini câteva cadre cheie, setând a din stat și a la stat. Aici spunem asta stânga poziția proprietății va începe la 5%, animând la 85%, mișcând efectiv mingea pe ecran.
cadrele cheie @ se mișcă din stânga: 5%; la stânga: 85%;
Puteți vedea că am implantat din și la intr-un @keyframes declaraţie. Și ne-am numit animația noastră mișcare. Acum trebuie să alocăm această animație mingii noastre, pe care o facem așa:
.minge animație: mutați 1s;
Acest lucru este pus în aplicare în forma sa cea mai simplă, cotidiană. Trebuie să definim cât timp dorim ca animația să dureze și animația pe care o aplicăm. Acum, când vom încărca demo-ul, veți vedea că animația va avea efect:
Notă: animația începe în momentul încărcării paginii, deci va trebui să atingeți rerun butonul din colțul acestui stilou încorporat pentru a vedea ce se întâmplă.
Mergând dincolo de simplu din și la etape, putem defini puncte de-a lungul cronologiei folosind procente. Folosind 0% și 100% ne-ar da exact același rezultat ca înainte:
cadrele cheie @ se mișcă 0% stânga: 5%; 100% stânga: 85%;
Să adăugăm un pas suplimentar în mijloc și să aducem mingea înapoi în poziția sa inițială. De asemenea, vom face numărătoarea iterației animației infinit, așa că se menține în buclă. Editați valorile din stiloul de mai jos și vedeți-le să aibă efect:
Este posibil să adăugați mai multe animații la un singur element, să modificați direcția de animație și să modificați complet sincronizările. Uitați-vă la aceste resurse pentru a afla mai multe!
Mișcarea aduce la viață obiecte statice și diferența autentic mișcarea poate face acest lucru este imensă. Propunerea dă o masă obiect, o plasează în spațiu, iar fizica din lumea reală se aplică la ea. Dacă un obiect se mișcă într-un mod cu care suntem familiarizați, suntem mult mai predispuși să facem această conexiune emoțională foarte importantă. Este diferența dintre un cerc care se deplasează în sus și în jos și o minge care se învârte:
Diferența dintre aceste două este clară (deși bounce este departe de a fi perfectă). Învățarea modului de a da autenticitatea animației este crucială.
"Acțiunea cea mai naturală tinde să urmeze o traiectorie arcuită, iar animația ar trebui să respecte acest principiu urmărind" arce "implicite pentru un realism mai mare." - Doisprezece principii de bază ale animației
Am acoperit "relaxarea" de câteva ori deja în acest articol; este rata la care se mișcă ceva și poate fi exprimată ca o curbă de-a lungul a două axe. În CSS există câteva funcții de sincronizare încorporate pe care le puteți utiliza cu cuvintele cheie (liniar, ușurința în, ușurința în-out etc), dar puteți descrie aceste sincronizări mai precis cu a funcția cubică bezier, care arată astfel:
.1, .25, .1,1Pe măsură ce timpul se mișcă constant de-a lungul axei x, rata de mișcare crește și se încetinește de-a lungul axei y. Acest exemplu de mai sus este utilizat pe bilele noastre de bouncing de la mai devreme; vă puteți imagina mingea în mișcare rapidă în sus, apoi încetinirea atunci când ajunge la apex. Aruncați o privire la această curbă pe cubic-bezier.com pentru a vă ajuta să o vizualizați.
Curba este controlată de cele două mânere (pe care le veți cunoaște dacă ați folosit instrumentul stilou în Adobe Illustrator sau Sketch) și funcția bezier cubică pe care o putem folosi în CSS reflectă acele mânere. Deci, funcția noastră arată ca:
cub-bezier (.1, .25, .1,1)
Există patru valori, fiecare variind (de dragul argumentului) de la 0 la 1 Acestea reprezintă:
Înțelegerea modului în care funcționează funcțiile bezier va îmbunătăți dramatic animațiile dvs., mai ales dacă doriți autentic mişcare.
Codarea animației CSS bine arătate manual poate fi dificilă, dar există o serie de biblioteci disponibile care fac ridicarea greu pentru tine. Animate.css, de Dan Eden, este o foaie de stiluri plina de animatii bazate pe cadre cheie, toate cu nume de clase personalizate, gata de utilizare.
SVG (Scalable Vector Graphics) au devenit cel mai bun prieten al web designerului în ultimii ani, oferindu-ne grafică clară, pagini mai ușoare și elemente animabile. Unele dintre ceea ce am discutat pot fi aplicate direct elementelor SVG, dar multe proprietăți se comportă diferit.
Iată un SVG inline, cu o tranziție aplicată pe culoarea sa pe hover. Cu toate acestea, veți observa că folosim completati proprietate, nu culoare de fundal pe care ne-am aștepta cu un element HTML:
SVG poate fi animat cu CSS la fel cum am discutat în restul acestui articol. Dacă îl puteți transforma sau traduce cu HTML, puteți face același lucru și cu SVG.
Dar SVG poate fi de asemenea manipulat prin SMIL (Synchronized Multimedia Integration Language), care vă permite să utilizați lucruri precum
Acesta este un cerc care conține un cx coordonați în acest caz), de la o poziție de la 50px la 400px, durata de 2 secunde și repetarea pe termen nelimitat.
SMIL este un set foarte puternic de instrumente, începeți să citiți mai jos!
Dragoste ideea animării SVG, dar nu sigură ce să animați? Consultați serviciile de ilustrații vectoriale de pe Envato Studio și aflați ce oferă!
Caractere, elemente și obiecte gata pentru animație videoMulți dezvoltatori de la începutul jocului, cu JavaScript (sau jQuery), prin adăugarea de animație în paginile web. În cazul în care browser-ul de sprijin pentru alternative CSS este schiță, JS este un pariu bun.
jQuery biblioteca UI vine ambalate cu un număr de ajutoare UI off-the-raft, inclusiv efect() , exemplificat mai jos (alegeți un efect din meniul derulant și din ceas, așa cum este aplicat conținutului:
Dincolo de aceasta, JavaScript (în mâinile drepte, nu ale mele) poate oferi serios animație, iar din moment ce Adobe Flash a înmânat oficial demisia, au apărut câteva biblioteci strălucitoare de JavaScript. Platforma de animație a GreenSock (GSAP) este, fără îndoială, cel mai puternic dezvoltator care dă dovadă o întreagă serie de instrumente de timp și de tween.
Aruncați o privire la cursul începătorului nostru și vedeți cum vă rezervați tariful cu GSAP!
Au dispărut zilele în care rezultatele livrabile statice sunt suficiente - imaginile și diagramele de flux nu comunică suficiente informații. Clientii sinceri din zilele noastre vor sa vada si sa simta ceea ce proiectati, sa experimentati mișcarea, motiv pentru care prototipurile raspund mult mai multe intrebari.
"Dacă o imagine este în valoare de 1000 de cuvinte, un prototip este în valoare de 1000 de întâlniri." - sosind la @ideo
- John Maeda (@ johnmaeda) 5 octombrie 2014
Prototipurile pot fi destul de crude sau pot reflecta produsul final destul de precis, dar ori de câte ori se încadrează pe această scală, acestea trebuie să fie eficiente. În cazul mișcării și al animației, există o serie de aplicații care vă ajută să comunicați desenele.
Adobe Animate este Flash pentru noua generație, oferind instrumente avansate de animație. Adobe After Effects este un instrument de producție video, dar oferă și o mișcare avansată bazată pe cronologie. Apoi, există aplicații mai simple, cum ar fi Principiul pentru Mac și chiar Keynote:
Keynote Motion Graphic Experiment, de Linda DongOdată ce proiectarea mișcării a devenit o parte a ceea ce faceți, găsirea celor mai bune instrumente pentru a arăta lumii este un pas important!
Și acolo avem! Acest ghid ar trebui să vă ofere o înțelegere solidă a peisajului de animație web așa cum există astăzi. Cu toate aceste resurse de învățare sub centură veți fi înarmați cu un set complet de abilități pentru a explora lumea designului mișcării.
Sper că ați găsit-o utilă. Vă rugăm să împărtășiți sfaturile și resursele proprii în comentariile de mai jos sau pe forumul comunității Envato.
