Prędkość (biblioteka JavaScript)

Prędkość
Oryginalni autorzy	Julian Szapiro
Wersja stabilna	1.5.2 / 31 lipca 2018 r
Magazyn	github.com/julianshapiro/velocity _ _ _ ;
Napisane w	JavaScript
System operacyjny	Międzyplatformowe
Platforma	Zobacz Obsługa przeglądarki
Typ	Biblioteka JavaScript , animacja
Licencja	MIT
Strona internetowa	prędkośćjs.org _

Velocity to wieloplatformowa biblioteka JavaScript zaprojektowana w celu uproszczenia tworzenia skryptów animacji stron internetowych po stronie klienta . Velocity to darmowe oprogramowanie typu open source, licencjonowane na licencji MIT . Jest to najpopularniejszy silnik animacji internetowych typu open source.

Składnia Velocity ma na celu ułatwienie tworzenia złożonych animacji dla elementów HTML i SVG . Oprócz korzyści płynących z przepływu pracy, Velocity zapewnia wydajność animacji, która jest konkurencyjna w stosunku do CSS . Velocity osiąga swoją wydajność dzięki utrzymywaniu wewnętrznej pamięci podręcznej stanów animacji i minimalizowaniu „ przebijania się układu ”, niepożądanego zachowania przeglądarek internetowych przejść podczas wizualnej aktualizacji w szybkim tempie. Ogólnie rzecz biorąc, jego przepływ pracy i korzyści w zakresie wydajności pozwalają na wykorzystanie Velocity do zaawansowanego programowania animacji, które można zintegrować zarówno z aplikacjami internetowymi, jak i mobilnymi. Szeroka obsługa przeglądarek i urządzeń sprawia, że idealnie nadaje się do dużych dystrybucji korporacyjnych, które muszą obsługiwać urządzenia o niskim poborze mocy.

Velocity jest używany do zasilania interfejsów użytkownika wielu znanych stron internetowych, w tym Uber , Samsung , WhatsApp , Tumblr , HTC , Mazda i Microsoft Windows . Jest to jeden z najbardziej ulubionych projektów w usłudze hostingu kodu GitHub . W 2015 roku Velocity został nominowany do Open Source Project of the Year przez The Net Awards .

Cechy

Funkcje Velocity obejmują:

Okno przeglądarki i przewijanie elementów
Niezależność od frameworka jQuery
Odwrócenie animacji (możliwość cofnięcia poprzedniej animacji) i zapętlenie animacji
Animacja elementu SVG
Animacja kolorów RGB i szesnastkowych
Animacja właściwości transformacji CSS
pakietu interfejsu użytkownika Velocity
Ruch oparty na fizyce za pośrednictwem typu luzowania sprężynowego
Obiecuje integrację

Obsługa przeglądarki

Velocity obsługuje wszystkie główne przeglądarki komputerowe ( Firefox , Google Chrome i Safari ) oraz mobilne systemy operacyjne iOS i Android . Jego obsługa sięga aż do Internet Explorera 8 i Androida 2.3.

Stosowanie

W tym biblioteka

Biblioteka Velocity to pojedynczy plik JavaScript zawierający wszystkie jej podstawowe funkcje. Można go umieścić na stronie internetowej , łącząc się z lokalną kopią lub jedną z wielu kopii dostępnych na serwerach publicznych, w tym jsDelivr MaxCDN lub cdnjs Cloudflare .

  <  script  src  =  "velocity.min.js"  ></  script  >

Możliwe jest również włączenie Velocity bezpośrednio z sieci dostarczania treści. (Atrybut integralności jest używany w przypadku integralności podzasobów .) Zaleca się, aby zawsze używać protokołu HTTPS dla zasobów, ale można to zastąpić // , aby korzystać z względnych adresów URL protokołów .

    <  script  src  =  "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"  integralność  =  "sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+"  crossorigin  =  "anonym my"  </  skrypt  >

Style użytkowania

Prędkość ma dwa style użytkowania:

Funkcja $.Velocity , która jest metodą fabryczną rozszerzoną z obiektu głównego jQuery . Ta metoda animuje surowe DOM zamiast elementów opakowanych w jQuery . Jest to styl stosowany podczas używania Velocity bez jQuery na stronie.
Funkcja $element.velocity() . Jest to styl używany do animacji obiektów elementów jQuery, gdy jQuery jest obecny na stronie.

Wywołania animacji w Velocity składają się z dostarczenia żądanych elementów do animacji, mapy właściwości animacji w celu określenia właściwości CSS do animacji oraz opcjonalnego obiektu opcji w celu określenia ustawień animacji (np. czasu trwania ).

Argumenty

Prędkość przyjmuje jeden lub więcej argumentów. Pierwszym wymaganym argumentem może być albo nazwa predefiniowanego polecenia Velocity (np. scroll lub reverse ) albo obiekt składający się z właściwości CSS do animacji:


      // Animuj szerokość elementu na 100px i jego właściwość left na 200px  $element  .  prędkość  ({  szerokość  :  "100px"  ,  lewa  :  "200px"  });

Drugi argument, który jest opcjonalny, jest obiektem. Służy do określania opcji animacji, takich jak czas trwania , łagodzenie i zakończenie (dowolna funkcja do wykonania po zakończeniu animacji):


          // Animuj szerokość elementu do 100 pikseli w czasie 1000 ms po wstrzymaniu na 100 s opóźnienia.  element $  .  prędkość  ({  szerokość  :  "100px"  },  {  czas trwania  :  1000  ,  opóźnienie  :  100  });

Łańcuch

Tworzenie serii kolejnych wywołań animacji w Velocity polega na umieszczeniu wywołań Velocity() jeden po drugim na docelowym obiekcie elementu jQuery :


           
    
           
   
      0      element $  .  prędkość  ({  wysokość  :  300  },  {  czas trwania  :  1000  })  // Kontynuuj tę animację po zakończeniu poprzedniej  .  prędkość  ({  góra  :  200  },  {  czas trwania  :  600  })  // I jeszcze raz...  .  prędkość  ({  przezroczystość  :  },  {  czas trwania  :  200  });

Przewijanie i odwracanie

Przewijanie w Velocity polega na przekazaniu „scroll” jako pierwszego argumentu Velocity — zamiast typowej mapy właściwości CSS:


     // Przewiń o czasie trwania 750 ms  $element  .  prędkość  (  "przewiń"  ,  {  czas trwania  :  750  });

Następnie przeglądarka przewinie w dół do górnej krawędzi elementu, dla którego wywołano Velocity.

Odwrócenie animacji w Velocity polega na przekazaniu „wstecz” jako pierwszego argumentu Velocity:


       

 // Animuj wysokość elementu  $element  .  prędkość  ({  wysokość  :  "500 pikseli"  },  {  czas trwania  :  500  });  // Odwróć poprzednią animację; animuj z powrotem do pierwotnej wysokości elementu, używając poprzedniego czasu trwania   $element  .  prędkość  (  „wstecz”  );

Domyślne polecenie Velocity to opcje animacji użyte w poprzednim wywołaniu. Przekazanie nowego obiektu opcji rozszerza poprzedni:

       

     element $  .  prędkość  ({  wysokość  :  "500 pikseli"  },  {  czas trwania  :  500  });  // Rozszerz obiekt opcji poprzedniego wywołania odwrotnego o nową wartość czasu trwania  $element  .  prędkość  (  "reverse"  ,  {  czas trwania  :  1000  });

Historia

Velocity został opracowany przez Juliana Shapiro w celu rozwiązania problemu braku wydajnych i zorientowanych na projektantów bibliotek animacji JavaScript . Stripe , popularna firma zajmująca się tworzeniem stron internetowych , zajmująca się technologią internetową, sponsorowała Shapiro w ramach dotacji, aby pomóc w zapewnieniu środków finansowych niezbędnych do dalszego rozwoju Velocity w pełnym wymiarze godzin.

Wysoka wydajność wewnętrznego silnika animacji Velocity pomogła ponownie spopularyzować animację internetową opartą na JavaScript, która wcześniej wypadła z łask animacji opartej na CSS ze względu na jej przewagę szybkości nad starszymi bibliotekami JavaScript, które nie skupiały się na animacji.

We wrześniu 2014 roku firma Shapiro wypuściła Velocity Motion Designer , narzędzie do projektowania animacji na stronach internetowych z produkcją na żywo, które umożliwiało eksportowanie w czasie rzeczywistym wygenerowanego kodu animacji do późniejszego wykorzystania w środowisku IDE . W marcu 2015 roku Peachpit opublikował książkę Shapiro's Web Animation using JavaScript , która uczy zarówno początkowych, jak i zaawansowanych zasad tworzenia animacji internetowych przy użyciu Velocity. ^{[ potrzebne źródło ]} Od połowy 2015 r. Velocity jest rozwijane i utrzymywane wyłącznie przez firmę Shapiro.

Oprócz wykorzystania Velocity w profesjonalnych środowiskach korporacyjnych, jest również szeroko stosowany do eksperymentowania z tworzeniem stron internetowych i ćwiczeń dla początkujących. Proof-of-concept projekty tworzenia stron internetowych zbudowane na bazie Velocity są często publikowane w CodePen ( przykład ), wiodącej społecznościowej usłudze udostępniania kodu.

Zobacz też

Dalsza lektura

Linki zewnętrzne