Začínáme s greensock animační platformou

Sep 12, 2025

jak

Greensock animační platforma (GSAP) umožňuje animovat cokoliv, co můžete přistupovat k JavaScriptu včetně Dom, plátno a CSS, stejně jako vlastní vlastních objektů.

GSAP také pomáhá vyřešit nekonzistence prohlížeče pro snadnější Uživatelské testování (dobrý web hosting Může zde také pomoci), umožňuje použít objekty pro správu komplexních animací a běží až 20krát rychlejší než jQuery. Stala se standardem v průmyslu a byl používán v nesčetných oceněných webových stránkách. Mám stránky stavět? Zde je náš průvodce nejlepším Webové stránky Builder. kolem.

01. Nastavte základní soubor HTML

Get started with GSAP: Set up a basic HTML file — Obsahovat obrázek s **logo** Třída v souboru HTML

Nejlepší způsob, jak se naučit GSAP, je vidět v akci. V tomto tutoriálu se dozvíte o klíčových funkcích platformy s pracovními příklady, které můžete dnes použít ve svých projektech!

Začínáme nastavením základního souboru HTML, kde můžete klesnout do kódu JavaScriptu. Zahrnovat obrázek s logo třída. Pomocí GSAP můžete animovat vlastnosti, abyste zjistili, jak to funguje.

 & lt; html lang = "en" & gt;
& lt; hlava & gt;
  & lt; styl & gt;
    .logo {šířka: 150px; }
  & lt; / styl & gt;
& lt; / hlava & gt;
& lt; tělo & gt;
& lt; img třída = "logo"
SRC = "logo.svg" / & gt;
& lt; scénář a gt;
// kód zde
& lt; / script & gt;
& lt; / tělo & gt;
& lt; / html & gt;

02. Zahrňte knihovnu GSAP

Dále budete muset přidat GSAP na váš webový projekt. Mezi vaším. & lt; image & gt; a & lt; scénář a gt; Tagy, vložte odkaz na knihovnu GSAP. Zip si můžete stáhnout přímo z tady nebo chytit to Github. (Pokud máte soubory sdílet, vyberte perfektní cloudové úložiště ). Soubory jsou také hostovány na super-rychlé cloudflare cdn, takže nejjednodušší způsob je použití hostovaných souborů takto:

 & lt; skript src = "https://cdnjs.cloudflare.com/AJAX/libs/gsap/2.0.1/twewenmax.min.js" & gt;

03. Animovat s doplňováním Tweening

Tweening je proces změny hodnoty v čase vytvořit animaci. Například pohybu objektu z A do B, měřítko, nebo otočení. Můžete také doplnit vlastní vlastní hodnoty.

Nejjednodušší způsob, jak doplnit majetku, je použít TweenMax.To () funkce. To potřebuje cílový objekt, trvání a páry vlastností / hodnoty, které animujete. Chcete-li zobrazit funkci v akci, vyzkoušejte každou z řádků kódu níže pomocí logo Jak cílový objekt:

 // Tween x pozice z aktuálního
na 400 více než 2 sekundy
Tweenmax.to (". Logo", 2, {x: 400});
// Tween y pozice z aktuálního
na 200 a opacity na 0, více než 1
druhý
TweenMax.To (". Logo", 1, {y: 200, opacity: 0});
// tween x a y až 100, měřítko
1.5 a otočte 90 ° C, přes 2
druhý
TweenMax.to (". Logo", 2, {x: 100, y: 100, měřítko: 1.5, rotace: 90});

04. Tween od a FromTo

Get started with GSAP: Tween from and FromTo — Můžete definovat hodnoty start a konce pro doplnění

Vlastnost můžete doplnit z aktuální hodnoty do nového použití na() , ale můžete také doplnit z hodnotu na jeho aktuální hodnotu. Například, pokud váš logo začíná v poloze x 0. A chcete, aby tam skončilo, můžete to udělat:

 TweenMax.From (". Logo", 2, {x: 400});

V tomto případě se vaše logo okamžitě přesune X = 400. a pak doplnit X = 0. . Můžete dokonce definovat hodnoty start a konce, ignorování aktuálních hodnot od Pro() takhle:

 TweenMax.Fromto (". Logo", 2, {x: 400}, {x: 200});

05. uvolnění

Get started with GSAP: Easing — Osnadnění přidává do svých animací znak

Označení je "styl" animace, jako hodnoty přechod z A do B. namísto konstantní rychlosti rychlosti, která se nazývá "lineární", můžete použít funkce k křivce rychlosti rychlosti. Začnou pomalu a postupně se urychlují? Přijdou na náhlé zastavení a na konci se trochu odrazují? V animaci tyto styly přidávají znak a emoce do vaší práce. Takovou funkci uvolnění můžete použít:

 TweenMax.To (".". Logo ", 2, {x: 100, y: 100, rotace: 90, snadnost: circy.eadein});

06. Označení funkce a in / out

Get started with GSAP: Easing functions and In / Out — Existuje spousta možností uvolnění s výběrem GSAP

GSAP obsahuje celou řadu uvolňujících funkcí, jako je například zadní , odskočit , elastický , hřích , kruhový , a expo. . Možná jste si také všimli, že ulehčit Funkce má vlastnost usnadnit , které jsme používali v kroku výše. Můžete také použít usnadnit a usnadnit . Ty označují, kde je v animaci aplikována křivka uvolnění. Vyzkoušejte následující výsledky:

 // uvolnění s odrazem
TweenMax.To (". Logo", 2, {X: 100, Y: 100, otáčení: 90, snadnost: Bounce.aseout});
// uvolnění a ven s elastickým
TweenMax.To (".". Logo ", 2, {x: 100, y: 100, rotace: 90, snadnost: elastic.easeInout});

07. Zpoždění Tween

Někdy budete chtít zpozdit začátek animace, a to buď pro synchronizaci s jinou animací, nebo aby to počkalo, až dojde k události. Můžete použít další speciální vlastnosti jednoho GSAP zpoždění udělat toto. Vyzkoušejte následující kód, abyste zjistili, jak můžete zpozdit doplnění pro konkrétní časování:

 TweenMax.to (".". Logo ", 1, {Y: 100, Snadno: Bounce.aseout});
// zpoždění tohoto doplnění o 1 sekundu
TweenMax.To (". Logo", 1, {rotace: 90, snadnost: circy.ase, zpoždění: 1});

08. Funkce zpětného volání

Chcete-li integrovat animace s kódem, je důležité vědět, kdy se vyskytují události, zejména když animace končí nebo začíná. Můžete použít oncomplete zpětné volání událostí. Možná budete chtít vědět, kdy začne Tween, pomocí Onstart. . A můžete také synchronizovat svůj doplnění s jinou animací nebo použít Tween a jeho uvolnění aktualizovat jiný vlastní objekt. Použijte onupdate. zpětné volání. Zde je způsob, jak používat zpětné volání:

 TweenMax.to (". Logo", 1, {
Y: 100,
Snadné: Bounce.aseout,
OnComplete: TweenComplete.
});
Funkce TweenComplete () {
console.log ("doplnění doplnění");
}

09. Parametry zpětného volání

Při vypálení zpětných volání můžete chtít předat informace spolu s zpětným voláním do funkce, která ji zpracovává. Možná budete muset předat informace o volajícím nebo specifických hodnotách. To vám umožní integrovat své animace se zbytkem kódové základny. Všechny parametry jsou prošly přes zpětné vazby + "params" , to je onupdateParams. .

V následujícím příkladu můžete sledovat postup Tween pomocí klíčového slova {já} a můžete vidět, jak projít více parametrem pomocí pole:

 TweenMax.to (". Logo", 1, {
y: 100,
Snadné: Bounce.aseout,
onUpdate: tweenupdate,
onupdateParams: ["{self}",
"Dokončeno"]
});
Funkce TweenUpdate (Tween,
zpráva) {
var procenta = doplnění.
pokrok () * 100; // pokrok ()
je hodnota 0-1
console.log (procento +
"" + zpráva);
}

10. Ovládání animací

Dobře, takže nyní můžete vytvořit doplnění a usnadnit doplnění, požární zpětné volání a parametry. Jak ale řídíte animace? Často chcete začít nebo zastavit je na základě jiných událostí.

Pokud potřebujete zastavit animaci, můžete použít pauza() metoda. Pokud chcete obnovit doplnění, použijte životopis() . Úplně zničit použití Tween zabít() . Vyzkoušejte následující a zjistěte, co se stane:

 // var tak, aby se odkazoval na odkaz na doplnění
var tween = tweenmax.to (".
logo ", 2, {y: 100, snadnost: odrazit.
usnadnit};
// okamžitě pauza
Tween.Pause ();
// Start na akci
osískání (funkce () {Tween.
obnovení ()}, 1000);
// reverzní animace na akci
osískání (funkce () {Tween.
Reverzní ()}, 3000);

11. CSS a CSSplugin

Get started with GSAP: CSS and CSSPlugin — CSSplugin Auto-detekuje, když je potřeba pro animace

CSSplugin je součástí používání Tweenmax. . Je to obrovský časový spořič, v tom, že normalizuje chování přes prohlížeče a auto-detekuje, když je potřeba pro animace. CSSplugin zvládne barvy tweens, animace SVG a optimalizovaného výkonu s ukládáním do mezipaměti a dalšími vnitřními triky - a je to často účinnější překládat pozice přes CSS.

Už jste to viděli v akci, když jste použili neprůhlednost a pozice animace. Funguje bez zvláštního kódování!

12. 2D a 3D transformace

Get started with GSAP: 2D and 3D transforms — GSAP obsahuje vestavěné transformáty, které vám umožní měřítko, otočit překlad a šikmo

CSS transformace umožňují měřítko, otočit překlad a šikmo. Pracují v obou 2D i 3D, aby se rychle vytvářeli krásné efekty. GSAP obsahuje vestavěné transformové vlastnosti, jako je například X , y , otáčení , rotacex. , rotace , skewx. a měřítko . Zkuste použít následující doplnění na obrázek namísto těch, které jsme již vyzkoušeli:

 TweenMax.To (".". Logo ", 3, {
X: 100,
y: 100,
Měřítko: 1.5,
Rotace: 360,
Snadné: Bounce.aseout});

13. Časové lhůty

Get started with GSAP: Timelines — Objekt GSAP je časová osa umožňuje spravovat více animací

Jakmile se přesunete za jeden nebo dva doplnění, můžete přemýšlet, jak spravovat více animací. GSAP zahrnuje A. Časová osa Objekt to udělat přesně to. Připojte doplnění tun Časová osa objekt a může použít pozice parametr po doplnění. Můžete mít tweens spustit jeden po druhém, nebo mít mezery, nebo dokonce překrývat je. Přidejte pár dalších obrázků do HTML s třídami logo2. a logo3. resp.

Chcete-li zjistit, jak to funguje, zkuste následující Časová osa kód:

 // vytvořit instanci časové osy
var tl = nový timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{x: 50});
// Všimněte si poslední "0"
Tento začátek při 0 sec.
tl.add (tweenmax.to (". logo2", 1,
{y: 100}), "0");
// Všimněte si "+.25", aby bylo možné
jeden začátek na .25 sec
tl.add (tweenmax.to (". logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+. 25");

14. Kontrola časové osy

Stejně jako ovládání animací, možná budete chtít ovládat časové lhůty. Naštěstí se můžete pozastavit, pokračovat a znovu, jako byste mohli s animacemi. Můžete také přidat parametry na časovou osu opakovat , yoyo. a přidejte zpětné volání pro celou časovou osu. Můžete také ovládat rychlost časové osy pomocí pomocí časový pás vlastnictví. Zkuste nahradit prohlášení časové osy s následujícím kódem, abyste zjistili, jak to funguje:

 var tl = nový timelinemax ({
// opakovat nekonečně
Opakovat: -1,
Yoyo: TRUE,});

15. Získejte a nastavte vlastnosti

Jedna funkce, která je opravdu užitečná, získává a nastavují vlastnosti doplňků a časových lhůt. Tímto způsobem se můžete seznámit s celkovým pokrokem a trváním nebo shromáždit další informace o objektu GSAP. V tomto příkladu kódu můžete dostat Trvání časové osy a pak soubor jeho trvání změnit. To funguje stejně pro tweens. Je to další skvělý způsob, jak reagovat v reálném čase na události a modifikovat animace za mouchu. Po předchozí časové ose přidejte následující postup:

 // Získejte aktuální dobu trvání
časová osa
console.log (TL.DUNING ());
// Nastavuje dobu trvání na 5 sekund
Po 2 sekund čekat
osískání (funkce () {
TL.DUNING (5);
}, 2000);

Tento článek byl původně publikován v Creative Web Design Magazine Web Designer. Prodám vydání 279. nebo předplatit .

Přečtěte si více:

Superge SVG animace s GSAP
Exportovat po účincích animace na HTML5
Jak vytvořit animace, které měřítko pro všechna zařízení

Začínáme s greensock animační platformou

01. Nastavte základní soubor HTML

02. Zahrňte knihovnu GSAP

03. Animovat s doplňováním Tweening

04. Tween od a FromTo

05. uvolnění

06. Označení funkce a in / out

07. Zpoždění Tween

08. Funkce zpětného volání

09. Parametry zpětného volání

10. Ovládání animací

11. CSS a CSSplugin

12. 2D a 3D transformace

13. Časové lhůty

14. Kontrola časové osy

15. Získejte a nastavte vlastnosti

jak - Nejoblíbenější články

Jak odstranit vrásky ve Photoshopu

Řešení portrétní lakování olejem

Jak skrýt kód JavaScriptu z zobrazení Zdroj

Jak modelovat pojetí umění v kině 4d

4 Základní tipy pro optimalizaci obrazu

Sestavte aplikace, které pracují offline

Jak vytvořit digitální aktiva

Jak zvolit správný prototypový nástroj

Kategorie