Zacznij od platformy animacji Greensock

Platforma animacji Greensock (GSAP) umożliwia animowanie wszystkiego, do czego można uzyskać dostęp do JavaScript, w tym DOM, Canvas i CSS, a także własne niestandardowe obiekty.

GSAP pomaga również rozwiązać niespójności przeglądarki na łatwiejsze Testowanie użytkownika (dobrze hosting Może również pomóc tutaj, umożliwia korzystanie z obiektów do zarządzania kompleksowymi animacjami i biegnie do 20 razy szybsze niż jQuery. Stało się standardem w branży i został użyty w niezliczonych nagradzanych stronach internetowych. Masz stronę do zbudowania? Oto nasz przewodnik po najlepszych Kreator strony internetowej na około.

01. Skonfiguruj podstawowy plik HTML

Najlepszym sposobem na nauki GSAP jest widzenie w akcji. W tym samouczku dowiesz się o kluczowych cechach platformy z przykładami pracy, które można używać w swoich projektach już dziś!

Zacznij od konfigurowania podstawowego pliku HTML, w którym możesz upuścić kod JavaScript. Dołącz obraz za pomocą logo klasa. Użyjesz GSAP, aby animować właściwości, aby zobaczyć, jak działa.

 HTML Lang = "EN" & GT;
& lt; Head & GT;
  & lt; style & gt;
    .logo {szerokość: 150px; }
  & LT; / Style & GT;
& LT; / Head & GT;
& lt; body & gt;
& lt; img class = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// kod tutaj
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Dołącz bibliotekę GSAP

Następnie musisz dodać GSAP do projektu Web. Między tobą & lt; Image & GT; i & lt; script & gt; Tagi, włóż link do biblioteki GSAP. Możesz pobrać zip bezpośrednio z tutaj lub złap go Github (Jeśli masz pliki do dzielenia się, wybierz idealny magazyn w chmurze ). Pliki są również hostowane na Super-Fast Cloudflare CDN, więc najprostszym sposobem jest użycie takich jak hosted pliki:

 Skrypt SRC = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; / script & gt; 

03. Animuj z Tweening

Tweening jest procesem zmiany wartości w czasie, aby stworzyć animację. Na przykład przesuwając obiekt z A do B, skalowanie go lub obróć go. Możesz także zmieść do własnych wartości niestandardowych.

Najprostszym sposobem na Między obiektem jest użycie Tweenmax.to () funkcjonować. Potrzebuje to obiektu docelowego, czasu trwania i parami właściwości / wartości, które są ożywione. Aby zobaczyć funkcję w akcji, wypróbuj każdą z linii kodu poniżej, używając logo Jako obiekt docelowy:

 // Tween X pozycja z prądu
do 400 ponad 2 sekundy
Tweenmax.to (". Logo", 2, {X: 400});
// Tween Y pozycja z prądu
do 200 i krycia do 0, ponad 1
druga
Tweenmax.to (". Logo", 1, {Y: 200, Krycie: 0});
// Tween X i Y do 100, skala
1.5 i obróć 90 ° C, ponad 2
druga
Tweenmax.to (". Logo", 2, {X: 100, Y: 100, skala: 1,5, obrót: 90}); 

04. Tween z i od

Możesz zmieszać nieruchomości z bieżącej wartości do nowego użycia do() , ale możesz także zmieszać od wartość do jego bieżącej wartości. Na przykład, jeśli jesteś logo zaczyna się od pozycji x 0. I chcesz tam się skończyć, możesz to zrobić:

 Tweenmax.From (". Logo", 2, {X: 400}); 

W takim przypadku Twoje logo natychmiast się przeniesie x = 400. a potem Tween x = 0. . Możesz nawet zdefiniować zarówno wartości startowi, jak i końcowe, ignorując bieżące wartości za pomocą () lubię to:

 Tweenmax.Fromto (". Logo", 2, {X: 400}, {X: 200}); 

05. Łatwość

Łatwienia jest "stylem" animacji, jako wartości przejść od A do B. Zamiast stałej szybkości prędkości, która jest nazywana "liniową", można zastosować funkcje, aby zakrzywić szybkość prędkości. Czy zaczynają się powoli i stopniowo przyspieszają? Czy przychodzą na gwałtowne zatrzymanie i odbijają się na końcu? W Animacja te style dodają postaci i emocji do pracy. Możesz zastosować funkcję łagodzenia takiego:

 Tweeenmax.to (". Logo", 2, {X: 100, Y: 100, Rotacja: 90, Łatwość: Circ.easein}); 

06. Funkcje łagodzące i / out

GSAP zawiera różnorodne funkcje łagodzące, takie jak z powrotem , odbić się , elastyczny , grzech , okrasa , i expo. . Możesz także zauważyć, że łatwość Funkcja ma własność łatwość , które używaliśmy w powyższym etapie. Możesz także użyć usaczyć i łatwość . Wskazują, gdzie krzywa łagodząca jest stosowana w animacji. Wypróbuj następujące czynności, aby zobaczyć wyniki:

 // z łatwością z odbiciem
Tweenmax.to (". Logo", 2, {X: 100, Y: 100, obrót: 90, łatwość: Bounce.easeOut});
// łagodzący się z elastyczną
Tweenmax.to (". Logo", 2, {X: 100, Y: 100, Rotacja: 90, Łatwość: Elastic.easeinout}); 

07. Opóźnij Tween

Czasami będziesz chciał opóźnić rozpoczęcie animacji, aby zsynchronizować go z inną animacją, albo na czekanie na wystąpienie zdarzenia. Możesz użyć innego właściwości specjalnych GSAP o nazwie opóźnienie zrobić to. Wypróbuj następujący kod, aby zobaczyć, jak możesz opóźnić TAKEN dla określonego czasu:

 Tweenmax.to (". Logo", 1, {Y: 100, łatwość: Bounce.easeOut});
// opóźnij ten między 1 sekundą
Tweenmax.to (". Logo", 1, {rotacja: 90, łatwość: CIRC.EtiOut, opóźnienie: 1});
  

  
  

   08. Funkcje zwrotne
  
  

   Aby zintegrować animacje z kodem, ważne jest, aby wiedzieć, kiedy wystąpią zdarzenia, zwłaszcza gdy animacja kończy się lub zaczyna. Możesz użyć
   
    oncomplete.
   
   Wydarzenie Callback dla tego. Możesz wiedzieć, kiedy rozpoczyna się między Tween, używając
   
    onstart.
   
   . Możesz także zsynchronizować się z inną animacją, albo używać Tween i jego łagodzenia zaktualizowania innego obiektu niestandardowego. Użyj
   
    OnUpdate.
   
   Oddzwanianie dla tego. Oto jak korzystasz z wywołania zwrotnego:
  
  
 Tweenmax.to (". Logo", 1, {
Y: 100,
łatwość: Bounce.easeOut,
oncomplete: tweencomplete.
});
Funkcja Tweencomplete () {
Console.log ("Tween Complete");
} 
  

   09. Parametry zwrotne
  
  

   Podczas wypalania połączeń zwrotnych możesz przekazać informacje wraz z wywołaniem zwrotu z funkcją, która go obsługuje. Może być konieczne przekazanie informacji o rozmówcy lub określonych wartościach. Umożliwia to integrację animacji z resztą podstawy kodu. Wszystkie parametry są przekazywane przez
   
    Callback + "Params"
   
   , to jest
   
    onupdateparams.
   
   .
  
  

   W poniższym przykładzie możesz śledzić postęp między Tween za pomocą słowa kluczowego
   
    {samego siebie}
   
   i widzę, jak przekazać wiele parametrów za pomocą tablicy:
  
  
 Tweenmax.to (". Logo", 1, {
Y: 100,
łatwość: Bounce.easeOut,
OnUpdate: TweeneUpdate,
onupdateParams: ["{self}",
"zakończony"]
});
funkcja TweeneUpdate (Tween,
wiadomość) {
procent var = Tween.
postęp () * 100; // Progress ()
jest wartością 0-1
konsola.log (procent +
"" + wiadomość);
} 
  

   10. Kontrolowanie animacji
  
  

   Dobra, więc możesz teraz utworzyć Tweazy i złagodzić Tweens, Callbacks przeciwpożarowy i parametry. Ale jak kontrolujesz animacje? Często chcesz rozpocząć lub zatrzymać je na podstawie innych wydarzeń.
  
  

   Jeśli musisz zatrzymać animację, możesz użyć
   
    pauza()
   
   metoda. Jeśli chcesz wznowić między Tween, użyj
   
    wznawianie()
   
   . Całkowicie zniszczyć między Tween
   
    zabić()
   
   . Wypróbuj poniższe i zobacz, co się dzieje:
  
  
 // var, aby przytrzymać odwołanie do Tween
var Tween = tweeenmax.to (".
Logo ", 2, {Y: 100, łatwość: odbicia.
ułatwić});
// Pauza natychmiast
Tween.Pause ();
// start na wydarzeniu
Settimeout (funkcja () {Tween.
wznowienie ()}, 1000);
// Animacja odwrotna na wydarzeniu
Settimeout (funkcja () {Tween.
Reverse ()}, 3000); 
  

   11. CSS i CSSPLUGIN
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   CSSPLUGIN jest włączony, gdy używasz
   
    Tweenmax.
   . Jest to ogromny wygaszacz czasu, w tym normalizuje zachowania przez przeglądarki i automatyczne wykrywa, gdy jest potrzebny do animacji. CSSPLUGIN może obsługiwać kolorowe tweny, animacje SVG i zoptymalizowaną wydajność z buforowaniem i innymi wewnętrznymi sztuczkami - i często jest bardziej wydajny do tłumaczenia pozycji za pośrednictwem CSS.
  
  

   Widziałeś to już w akcji, kiedy użyłeś
   
    nieprzezroczystość
   
   i
   
    pozycja
   
   animacje. Działa bez specjalnego kodowania!
  
  

   12. 2D i transformacje 3D
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   Transformacje CSS umożliwiają skalowanie, obrócić translate i skew. Pracują zarówno w 2D, jak i 3D, aby szybko tworzyć piękne efekty. GSAP zawiera wbudowane właściwości transformacji, takie jak
   
    X.
   
   ,
   
    Y.
   
   ,
   
    obrót
   
   ,
   
    rotacja
   
   ,
   
    rotacyjny
   
   ,
   
    skewx.
   
   i
   
    skala
   
   . Spróbuj zastosować następującą animację do swojego obrazu zamiast tych, które już próbowaliśmy:
  
  
 Tweenmax.to (". Logo", 3, {
x: 100,
Y: 100,
Skala: 1,5,
Rotacja: 360,
Łatwość: Bounce.easeOut}); 
  

   13. Terminy
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   Po przejściu poza jedną lub dwiema Tweens możesz zastanawiać się, jak zarządzać wieloma animacje. GSAP zawiera A.
   
    osi czasu
   
   obiekt, aby dokładnie to zrobić. Dołączasz Twceens do
   
    osi czasu
   
   obiekt i może używać
   
    pozycja
   
   parametr po międzyniterze do nich. Możesz mieć Tweens uciekać jeden po drugim lub mieć luki, a nawet ich pokrywają. Dodaj parę więcej zdjęć do HTML z klas
   
    logo2.
   
   i
   
    logo3.
   
   odpowiednio.
  
  

   Aby zobaczyć, jak to działa, wypróbuj następujące
   
    osi czasu
   
   kod:
  
  
 // Utwórz instancję osi czasu
var tl = nowy timelinemax ();
tl.add (tweenmax.to (". Logo", 1,
{X: 50}));
// Zwróć uwagę na ostateczne "0"
Ten zaczyna się od 0 sekund.
tl.add (tweenmax.to (". logo2", 1,
{Y: 100}), "0");
// Uwaga "+,25", aby to zrobić
jeden zaczyna się od 0,25 sek
tl.add (tweenmax.to (". logo3", 1,
{rotacja: 180, Y: 50,
X: 50}), "+. 25"); 
  

   14. Sterowanie osi czasu
  
  

   Oprócz animacji kontrolujących, możesz również kontrolować terem liniowe. Na szczęście możesz wstrzymać, wznawiać i odwracać, tak jak możesz z animacjami. Możesz także dodać parametry do osi czasu
   
    powtarzać
   
   ,
   
    yoyo.
   
   i dodaj połączenia zwrotne dla całej osi czasu. Możesz także kontrolować prędkość osi czasu za pomocą
   
    Timescale.
   
   własność. Spróbuj zastąpić deklarację osi czasu z poniższym kodem, aby zobaczyć, jak to działa:
  
  
 VAR TL = Nowy Timelinemax ({
// powtórz nieskończenie
Powtórz: -1,
yoyo: true,}); 
  

   15. Uzyskaj i ustaw właściwości
  
  

   Jedną z funkcji, która jest naprawdę przydatna, jest uzyskiwanie i ustawianie właściwości Tweens i linii terminowych. W ten sposób możesz poznać ogólny postęp i czas trwania lub zebrać inne informacje, o obiekcie GSAP. W tym przykładzie możesz
   
    otrzymać
   
   czas trwania osi czasu, a następnie
   
    zestaw
   
   czas jej zmienić. Działa tak samo dla Tweens. To kolejny świetny sposób na reagowanie w czasie rzeczywistym na imprezy i modyfikować animacje w locie. Dodaj następujące czynności po poprzednim kodzie oświetlenia:
  
  
 // Uzyskaj bieżący czas trwania
osi czasu
console.log (tl.duration ());
// Ustawia czas trwania do 5 sekund
Po 2 sekundach czekać
Settimeout (funkcja () {
tl.duration (5);
}, 2000); 
  

   
    Ten artykuł został pierwotnie opublikowany w kreatywnym projektowaniu stron internetowych projektantów projektowania stron internetowych.
   
   
    
     Kup problem 279.
    
   
   
    lub
   
   
    
     Subskrybuj
    
   
   
    .
   
  
  

   
    Czytaj więcej:
   
  
  

   

    
     Supercharte animacje SVG z GSAP
    
   
   

    
     Eksport After Effects Animations do HTML5
    
   
   

    
     Jak tworzyć animacje, które skalują dla wszystkich urządzeń