mo.js. Poate că ați confruntat deja bibliotecă foarte puternic de animație grafică de Oleg Solomka. Cu el se poate face o tona de animații uimitoare, iar astăzi am dori să împărtășesc cu voi pictogramele mele de animate.
Ar fi foarte frumos să fie capabil de a anima cu ușurință pictograme precum Laika în Twitter, dar după ce am văzut împușcat Dribbble hibrid de Daryl Ginn (se va arata ca animație Laika Twitter, dacă ar fi fost puse în aplicare în Facebook), ne-am dorit să încercăm să combine mo.js cu font fonturi web Awesome de Dave Gandy și a vedea ce se întâmplă.
Am animat acțiuni icoane, unde puteți viziona starea activă. De exemplu, „favorit“, „Like“ sau „plus“. Teoretic, puteți aplica efecte la orice pictogramă, dar această animație pictogramă de acțiune se potrivește mai bine.
mo.js biblioteca este într-adevăr foarte ușor de utilizat. Până în prezent disponibil doar o lecție, dar puteți obține deja o idee despre cum să controleze funcția de sincronizare pe elementele. Biblioteca deschide multe posibilități și vă permite să creați complexe de animație, realist. Depozitul GitHub veți găsi mai multe informații și ajutor în lucrare.
Avertisment: Am creat o animație complexă nebun, undeva inutil și supra-Chur! Utilizați pe propriul risc
Să considerăm un exemplu. Am prins Font ikonochny Awesome și a adăugat o pictogramă la butonul:
În stilul unui cuplu de proprietăți pot fi resetate, și adăugați dimensiunea butonului. Și setați animația poate fi după cum urmează:
Rețineți că vom folosi o dimensiune fixă pentru efectul. Într-o variantă mai flexibilă poate seta dinamic dimensiunea. Acum, face animația; posibilitățile sunt nelimitate! Sperăm că ați bucurat de animație, și se bazează pe ea te va veni cu ceva din propria lor! Proiectul pe Github.
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram