Înainte de a ajunge la soluție, să examinăm mai atent problema. Proprietățile animației CSS și tranziția ne limitează la mișcarea numai în linie dreaptă. Cum se întâmplă acest lucru? alege întotdeauna calea cea mai scurtă de la punctul A la punctul B. Foarte bine - în cele mai multe cazuri, acest lucru este de ajuns - dar nu putem spune CSS mers pe jos „mod frumos“, mai degrabă decât „cel mai scurt.“
Modul cel mai simplu în animarea CSS de la un punct la altul (cu accelerație hardware) este proprietatea transformată cu valoarea traducerii. În acest fel, se poate obține o mișcare de-a lungul unei linii drepte. În cadrul blocului @ keyframes de mai jos, ne mutăm în sus și în jos din punctul (0, 0) până la punctul (100, -100), ca în exemplul de mai sus:
E ușor, dar hai să ne oprim. Pentru a înțelege cum să ne rezolvăm problema, trebuie să divizăm cel puțin vizual animația noastră în părți.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Subiectul este de 0% la punctul (0, 0), 50% folosim translate3D (100px, -100px, 0) pentru a trece la un punct (100, -100), și apoi se mută înapoi. Parafrazând, mutăm obiectul 100px spre dreapta și apoi 100 de pixeli în sus. Două sări împreună muta obiectul în colțul superior.
Soluție: o funcție per axă
Deci, cum creați o mișcare de-a lungul unei curbe, după cum se arată mai sus? Pentru ca obiectul să nu se miște în linie dreaptă, este necesar ca viteza de mișcare de-a lungul axelor X și Y să fie diferită.
Exemplele anterioare toate caracteristică liniară este folosită, dar dacă înfășurați obiectul într-un container, o funcție poate fi utilizată pentru a muta X, iar celălalt pentru mișcarea în SUA Mai jos vom folosi ușurința-in pentru axa X și ușurința de ieșire pentru V:
Implementare: un obiect pe axă
Din păcate, nu putem specifica mai multe proprietăți de transformare, numai acestea din urmă vor fi aplicate. Deci, cum combinați de fapt două animații? Vom pune un obiect în celălalt și vom rula o animație pentru container, iar celălalt pentru elementul copil.
În toate exemplele de mai sus, cu un punct de mișcare de-a lungul curbei, ați văzut cum animația a fost expusă la două elemente, iar recipientul a fost complet transparent. Pentru a înțelege modul în care două obiecte interacționează unul cu celălalt și cum se dovedește mișcarea de-a lungul curbei, am făcut containerul vizibil utilizând caseta de margine pentru valori:
Punctul este situat în interiorul cutiei și se deplasează cu ea de-a lungul axei X, în timp ce punctul se deplasează de-a lungul axei Y Dacă scoateți cadrul containerului, atunci vom ajunge să călătorească în jurul curbei. În loc să utilizați două obiecte în HTML, puteți adăuga o pseudo-clasă. Dacă HTML-ul arată astfel:
Puteți adăuga o clasă pseudo:
Avem nevoie de două blocuri de animație separate: una pentru axa X, cealaltă pentru Y. Observați cum se folosește primul bloc în ușurință și în a doua ușurință:
Adăugați prefixele versiune furnizor pentru browsere WebKit și un cuplu de curbe Bezier în loc de ușurința și ușurința de afară, și vom obține exemplul prezentat la începutul articolului:
Codul ne va conduce spre locul unde am pornit.
Trebuie să fi observat deja că în toate exemplele am folosit animația @keyframes. Cu toate acestea, acest lucru este doar pentru că am nevoie pentru a muta punctul înapoi și înapoi. Dacă doriți să mutați un obiect de la punctul A la punctul B, animația cu straturi funcționează bine cu proprietatea de tranziție.
Dacă obiectul este absolut poziționat, îl puteți anima de-a lungul curbei liniei cu proprietățile stânga și de jos. În acest caz, aveți nevoie de un singur obiect, nu este necesar să adăugați un container. Totuși, există un motiv pentru care ar trebui să evitați o astfel de animație: performanța acestei animații este foarte scăzută și este redată din nou pe fiecare cadru. O animație stratificată cu pseudo-clase și accelerarea hardware a proprietății traduse face mișcarea foarte netedă fără a sacrifica performanța.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
Trimiteți-le prietenilor: