Kezdje el a Greensock animációs platformot

Greensock Animációs platform (GSAP) Lehetővé teszi, hogy animáljon bármit, amit a JavaScripthez, beleértve a dom, vászon és a CSS, valamint a saját egyéni objektumait is elérheti.

A GSAP megkönnyíti a böngésző ellentmondásainak megoldását is Felhasználói tesztelés (jó web hosting Segíthet itt is), lehetővé teszi, hogy objektumokat használjon az összetett animációk kezeléséhez, és legfeljebb 20-szor gyorsabb, mint a jQuery. Az iparágban szabványos volt, és számtalan díjnyertes webhelyen használták fel. Van egy webhely építeni? Itt van a legjobb útmutatónk weboldal építője körül.

01. Állítsa be az alapvető HTML fájlt

A legjobb módja annak, hogy megtanulják a GSAP-t, hogy lássuk. Ebben a bemutatóban megtudhatja a platform legfontosabb jellemzőit olyan munkapéldákkal, amelyeket ma a projektjeiben használhatod!

Kezdje el az alapvető HTML fájlt, ahol leállhat a JavaScript kódba. Tartalmazzon egy képet a logó osztály. A GSAP-t a tulajdonságok animálásához használhatja, hogy hogyan működik.

 & lt; html lang = "en" & gt;
& lt; head & gt;
  & lt; style & gt;
    .logo {szélesség: 150px; }
  & lt; / style & gt;
& lt; / head & gt;
& lt; test & gt;
& lt; img osztály = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// kód itt
& lt; / script & gt;
& lt; / test & gt;
& lt; / html & gt; 

02. Tartalmazza a GSAP könyvtárat

Ezután hozzáadni kell a GSAP-t a webes projekthez. Az Ön között & lt; image & gt; és & lt; script & gt; Címkék, helyezzen be egy linket a GSAP könyvtárba. Közvetlenül letöltheti a zipet itt , vagy megragadja Github (Ha fájlokat szeretne megosztani, válassza ki a tökéletes felhő tároló ). A fájlok is házigazdája a szupergyors CloudFlare CDN, így a legegyszerűbb módja az, hogy a tárolt fájlokat, mint ez:

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

03. Animál a tweening-szel

A tweening az animáció létrehozásához az érték megváltoztatásának folyamata. Például egy objektumot mozgat az A-tól B-ig, méretezve, vagy forgatja azt. Ön is a saját egyéni értékeit is.

A legegyszerűbb módja az ingatlannak a Tweenmax.to () funkció. Ennek célja, egy időtartam és az animációs ingatlan / értékpárok. A cselekvés funkció megjelenítéséhez próbálja ki az alábbi kódsorokat a logó A cél objektum:

 // Tween X pozíció az áramból
400-ig 2 másodperc alatt
Tweenmax.to (". Logo", 2, {x: 400});
// Y Tween Y pozíció a jelenlegi
200-ra és az átlátszatlanság 0-ra, több mint 1
második
Tweenmax.to (". Logo", 1, {y: 200, opacity: 0});
// Tween X és Y-100, skála
1.5, és forgassa el 90 ° -ot, több mint 2
második
Tweenmax.to (". Logo", 2, {x: 100, Y: 100, skála: 1.5, forgatás: 90}); 

04. Tween-tól és onnan

Az aktuális értéktől egy új értéket használhat nak nek() , de te is Tween is tól től az aktuális értékének értéke. Például, ha az Ön logó X pozícióban kezdődik 0 és azt szeretné, hogy véget érjen, ezt megteheti:

 tweenmax.from (". Logo", 2, {x: 400}); 

Ebben az esetben a logó azonnal elmozdul x = 400 majd tween-ig x = 0 . Még a kezdő és végértékeket is meghatározhatja, figyelmen kívül hagyva az aktuális értékeket tól-ig() mint ez:

 tweenmax.fromto (". Logo", 2, {x: 400}, {x: 200}); 

05. enyhítés

A könnyítés az animáció "stílusa", mivel az A-tól B-ig terjedő értékek átmenete. A "lineáris" állandó sebességű sebesség helyett a sebesség sebességének görbét alkalmazhat. Lassan kezdenek és fokozatosan felgyorsulnak? Elérnek egy hirtelen megállni és ugrál egy kicsit a végén? Az animációban ezek a stílusok hozzáadják a munkát és az érzelmeket a munkájához. Ennek enyhítését alkalmazhatja:

 Tweenmax.to (". Logo", 2, {x: 100, Y: 100, Rotation: 90, Könnyű: circ.asein}); 

06. A funkciók és a be / ki

A GSAP számos könnyítési funkciót tartalmaz, mint például vissza , ugrál , rugalmas , bűn , áramkör és expo . Lehet, hogy észrevette, hogy a könnyed a funkciónak van egy tulajdonsága gátló , amit a fenti lépésben használtunk. Használhatja öröklődés és könnyűszalag . Ezek azt mutatják, hogy az animációban az enyhítő görbét alkalmazzák. Próbálja ki az alábbiakat az eredmények megtekintéséhez:

 // lazítás egy ugrálással
Tweenmax.to (". Logo", 2, {x: 100, Y: 100, forgatás: 90, Könnyű: Bounce.ASEOUT});
// elasztikus és kioldás
Tweenmax.to (". Logo", 2, {x: 100, Y: 100, forgatás: 90, Könnyű: elasztikus.aseinout}); 

07. késedelem egy tween

Néha meg akarja késleltetni az animáció kezdetét, vagy egy másik animációval szinkronizálni, vagy hogy várjon egy esemény bekövetkezését. Használhat egy másik Gsap speciális tulajdonságát késleltetés ezt csináld meg. Próbálja ki a következő kódot, hogy megnézze, hogyan késleltetheti a Tweens-et az adott időzítéshez:

 Tweenmax.to ("Logo", 1, {Y: 100, Könnyebb: Bounce.ASEOUT});
// késlelteti ezt a Tween-t 1 másodperccel
Tweenmax.to (". Logo", 1, {rotáció: 90, könnyedén: circ.ieOut, késleltetés: 1}); 

08. Visszahívási funkciók

A animációk integrálása a kóddal, fontos tudni, hogy mikor történik az események, különösen akkor, ha egy animáció véget ér, vagy elkezdődik. Használhatja a oncomplete Eseményhívás erre. Előfordulhat, hogy tudni akarod, mikor kezdődik, használva onstart . És azt is szeretné, hogy szinkronizálja átkötő másik animáció, vagy használja az átkötő és lazítás frissíteni néhány más egyedi objektumot. Használja a ontrupdate Visszahívja ezt. Itt van a visszahívás használata:

 Tweenmax.to ("Logo", 1, {
Y: 100,
Könnyű: ugráljon.aseout,
OncompleLe: TweenComplete
});
TweenComplet () {
konzol.log ("Tween Teljes");
} 

09. Visszahívási paraméterek

Ha a felhívásokat tüzelni szeretné, akkor az információkat az általa kezelt függvényhez való visszahívás mellett szeretné átadni. Előfordulhat, hogy tájékoztatást kell adnia a hívó vagy a konkrét értékekről. Ez lehetővé teszi, hogy integrálja animációit a többi kódbázis többi részével. Minden paraméter áthalad Visszahívás + "Params" , ez OnUpdateParams .

A következő példában nyomon követheti a Tween előrehaladását a kulcsszó segítségével {maga} és láthatja, hogyan kell több paramétert átadni egy tömb használatával:

 Tweenmax.to ("Logo", 1, {
Y: 100,
Könnyű: ugráljon.aseout,
OnUpdate: Tweenupdate,
OnUpdateParams: ["{self}",
"Befejezett"]
});
Tweenupdate funkció (Tween,
üzenet) {
var százalékos = Tween.
Progress () * 100; // előrehaladás ()
0-1 érték
konzol.log (százalék +
"" + üzenet);
} 

10. Animációk ellenőrzése

Oké, így most megteremtheti a Tweenseket, és megkönnyítheti a Tweens, a tűz visszahívását és a paramétereket. De hogyan irányítod az animációkat? Gyakran meg szeretné kezdeni vagy megállítani őket más eseményeken alapulva.

Ha meg kell állítania az animációt, használhatja a szünet() módszer. Ha szeretné folytatni a Tween-t, használja önéletrajz() . Hogy teljesen elpusztítsa a tween használatát megöl() . Próbálja ki az alábbiakat, és nézze meg, mi történik:

 // var a Tween-re való hivatkozáshoz
var tween = tweenmax.to (".
Logo ", 2, {Y: 100, könnyedén: ugrál.
könnyűbb});
// Szünet azonnal
tween.pauza ();
// kezdődik az eseményen
Settinout (funkció () {Tween.
folytatás ()}, 1000);
// fordított animáció az eseményen
Settinout (funkció () {Tween.
fordított ()}, 3000); 

11. CSS és CSSPLUGIN

A Cssplugin a használat során szerepel Tweenmax . Ez egy hatalmas időtakarékos, mivel normalizálja a böngészők viselkedését, és automatikusan észleli az animációkhoz. A CSSplugin képes kezelni a színes Tweens, SVG animációkat és optimalizált teljesítményt a gyorsítótárazással és más belső trükkökkel - és gyakran hatékonyabb a pozíciókat CSS-en keresztül történő lefordítására.

Már láttad ezt a cselekvést, amikor használta a átlátszatlanság és pozíció Animációk. Különleges kódolás nélkül működik!

12. 2D és 3D transzformációk

A CSS transzformációk lehetővé teszik, hogy méretezhessen, forgassa le a fordítást és a ferdítést. Mind a 2D, mind a 3D-ben dolgoznak, hogy gyorsan megteremtse a gyönyörű hatásokat. A GSAP beépített transzformációs tulajdonságokat tartalmaz, mint például x , y , forgás , rotationx , rotáció , skewx és skála . Próbálja meg alkalmazni a következő Tween-t a képre, ahelyett, hogy már megpróbáltuk:

 Tweenmax.to ("Logo", 3, {
X: 100,
Y: 100,
skála: 1.5,
Rotationy: 360,
Könnyű: Bounce.ASEOUT}); 

13. Timelines

Ha egyszer átmegy egy vagy két Tweensen, akkor lehet, hogy kíváncsi lehet, hogyan kell több animációt kezelni. A GSAP tartalmazza a Idővonal pontosan ezt teszi. Tweens-t ad a Idővonal objektum és használhatja a pozíció paraméter a tween-os idő után. Lehet, hogy a Tweens egy másik után futhat, vagy résszel, vagy akár átfedik őket. Adjon hozzá egy pár képet a HTML-nek az osztályokkal logo2 és logo3 illetőleg.

Hogy lássam, hogyan működik, próbálja ki a következőket Idővonal kód:

 // Timeline példány létrehozása
var tl = új timelinemax ();
tl.add (tweenmax.to ("logo", 1,
{x: 50}));
// Megjegyzés a végső "0" -ot
ez 0 másodpercen belül kezdődik.
tl.add (tweenmax.to ("logo2", 1,
{Y: 100}), "0");
// Megjegyzés a "+.25" -t, hogy ezt tegye
az egyik .25 másodperc alatt
tl.add (tweenmax.to ("logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+. 25"); 

14. Timeline Control

Az animációk ellenőrzése, érdemes is ellenőrizni az idővonalakat is. Szerencsére szüneteltethetsz, folytasd és fordíthatsz, mintha az animációkkal tudsz. A paramétereket is hozzáadhatja az idővonalhoz ismétlés , yoyo és adjon hozzá visszahívást a teljes idővonalhoz. Ön is vezérelheti az idővonal sebességét a időzítés ingatlan. Próbálja meg cserélni az idővonal-nyilatkozatot a következő kóddal, hogy hogyan működik:

 var tl = új timelinemax ({
// megismétli végtelenül
Ismételje meg: -1,
yoyo: true,}); 

15. A tulajdonságok beszerzése és beállítása

Az egyik funkció, amely valóban hasznos a Tweens és az idővonal tulajdonságainak megszerzése és beállítása. Így megismerheti az általános fejlődést és az időtartamot, vagy gyűjtsön más információkat, a GSAP objektumról. Ebben a kódban lehet kap az idővonal időtartama, majd készlet az időtartam megváltoztatására. Ez ugyanaz a Tweens számára is. Ez egy másik nagyszerű módja annak, hogy valós időben reagáljon az eseményekre, és módosítsa az animációkat a repülés során. Az előző idővonal kódja után adja hozzá a következőket:

 // megkapja az aktuális időtartamot
Az idővonal
console.log (tl.duration ());
// az időtartamot 5 másodpercig állítja be
2 másodpercig várjon
Settinout (funkció () {
tl.duration (5);
}, 2000); 

Ezt a cikket eredetileg a Creative Web Design Magazine Web Designer-ben tették közzé. Vásároljon kibocsátást 279 vagy Iratkozz fel .

Olvass tovább:

• SuperCed SVG animációk GSAP-val
• Export után Effects Animációk HTML5
• Hogyan készítsünk animációkat az összes eszközre