Aloita GreenSock Animation Platform

Sep 11, 2025

Miten tehdään

GreenSock Animation Platform (GSAP) mahdollistaa animoivan mitä tahansa, mitä voit käyttää JavaScriptin, mukaan lukien DOM, CANVAS ja CSS sekä omat mukautetut esineet.

GSAP auttaa myös ratkaisemaan selaimen epäjohdonmukaisuuksia helpottamaan Käyttäjän testaus (hyvä sivujen ylläpito Voit myös auttaa myös), voit käyttää esineitä monimutkaisten animaatioiden hallintaan ja kestää jopa 20 kertaa nopeammin kuin jQuery. Se on tullut alan standardi, ja sitä on käytetty lukemattomissa palkittuja verkkosivustoja. Onko sinulla rakentaa sivusto? Tässä on opas parhaaseen Verkkosivuston rakentaja noin.

01. Aseta perus HTML-tiedosto

Get started with GSAP: Set up a basic HTML file — Sisältää kuvan kanssa **logo** Luokka HTML-tiedostossasi

Paras tapa oppia GSAP on nähdä se toiminnassa. Tässä opetusohjelmassa opit alustan tärkeimmistä ominaisuuksista, joilla on työesimerkkejä, joita voit käyttää projekteissasi tänään!

Aloita perustamalla perus HTML-tiedosto, jossa voit pudottaa JavaScript-koodisi. Sisällytä kuva a logo Luokka. Käytät GSAP: n animoi ominaisuuksia nähdäksesi, miten se toimii.

 & lt; html lang = "en" & gt;
& lt; pää & gt;
  & lt; tyyli & gt;
    .Logo {Leveys: 150px; }
  & lt; / tyyli & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; img class = "logo"
SRC = "Logo.svg" / & gt;
& lt; skripti & gt;
// koodi täältä
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Sisällytä GSAP-kirjasto

Seuraavaksi sinun on lisättävä GSAP Web-projektiin. Välillä & lt; image & gt; ja & lt; skripti & gt; Lisää yhteys linkki GSAP-kirjastoon. Voit ladata zip suoraan tässä tai tartu siihen Github (Jos sinulla on tiedostoja jakamaan, valitse täydellinen pilvivarasto ). Tiedostot on myös isännöi Super-Fast Cloudflare CDN: ää, joten yksinkertaisin tapa on käyttää näin isännöityjä tiedostoja:

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

03. Animoi Tweening

Tweening on prosessi muuttaa arvoa ajan myötä animaation luomiseen. Esimerkiksi siirrät kohteen A-B: stä, skaalaamalla sitä tai pyörittämällä sitä. Voit myös Tween oman mukautetun arvon.

Yksinkertaisin tapa Tween omaisuuteen on käyttää Tweenmax.To () Toiminto. Tämä tarvitsee kohdeobjektin, keston ja kiinteistön / arvoparien animointia. Jos haluat nähdä toiminnon toiminnasta, kokeile kukin koodin rivillä käyttämällä logo Kohdeobjektina:

 // Tween X-asema nykyisestä
400 yli 2 sekuntia
Tweenmax.To (". Logo", 2, {X: 400});
// Tween Y asema nykyisestä
200 ja opasiteetti 0, yli 1
toinen
Tweenmax.To (". Logo", 1, {Y: 200, opasiteetti: 0});
// Tween X ja Y - 100, asteikko
1.5 ja pyörivät 90 astetta, yli 2
toinen
Tweenmax.To (". Logo", 2, {X: 100, Y: 100, Scale: 1.5, Kierto: 90});

04. Tween ja From

Get started with GSAP: Tween from and FromTo — Voit määrittää sekä aloitus- että loppuarvot Tweeningille

Voit vaihtaa kiinteistön nykyisestä arvosta uudelle käyttämällä () , mutta voit myös Tween peräkkäin arvo sen nykyarvoon. Esimerkiksi, jos logo alkaa x-asennosta 0 Ja haluat sen lopettaa sinne, voisit tehdä tämän:

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

Tässä tapauksessa logo siirtyy välittömästi x = 400 ja sitten Tween x = 0 . Voit jopa määrittää sekä aloitus- että loppuarvot, jättää huomiotta nykyiset arvot fromto () kuten tämä:

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

05. Helping

Get started with GSAP: Easing — Helping lisää merkin animaatioihisi

Helping on animaation "tyyli", koska arvot siirtyvät A: sta B: ksi. Sen sijaan, että vakio nopeus, jota kutsutaan "lineaariseksi", voit käyttää toimintoja nopeuden nopeuden käyrään. He alkavat hitaasti ja nopeuttaa vähitellen? He tulevat äkillisesti pysähtymään ja pomppia hieman lopussa? Animaatiossa nämä tyylit lisäävät luonnetta ja tunteita työhösi. Voit käyttää tätä, kuten tämä:

 Tweenmax.To (". Logo", 2, {X: 100, Y: 100, Kierto: 90, Helppo: Circ.easein});

06. helpottavat toimintoja ja sisään / ulos

Get started with GSAP: Easing functions and In / Out — GSAP: n avulla voit valita runsaasti helpottaa vaihtoehtoja

GSAP sisältää erilaisia helpottavia toimintoja, kuten takaisin , pomppia , elastinen , synti , kiertää ja expo . Olet ehkä huomannut, että helppous Toiminnassa on omaisuus helpi , jota käytimme edellä olevassa vaiheessa. Voit myös käyttää helppous ja helppokäyttöinen . Nämä osoittavat, missä helpotuskäyrää käytetään animaatiossa. Kokeile seuraavaa nähdäksesi tulokset:

 // helpottaa pomppia
Tweenmax.To (". Logo", 2, {X: 100, Y: 100, Kierto: 90, Helppo: Bounce.easeout});
// helpottaa ja ulos elastisella
Tweenmax.To (". Logo", 2, {X: 100, Y: 100, Kierto: 90, helppous: elastinen.easeinout});

07. Viive Tween

Joskus haluat viivyttää animaation alkua joko synkronoida se toisen animaation kanssa tai tehdä se odottaa tapahtumaa. Voit käyttää toista GSAP: n erikoisominaisuuksia kutsutaan viive tehdä tämä. Kokeile seuraava koodi nähdäksesi, miten voit viivyttää Tweens tiettyyn ajoitukseen:

 Tweenmax.To (". Logo", 1, {Y: 100, Helppo: Bounce.easeout});
// Viive tämä Tween 1 sekunnin
Tweenmax.To (". Logo", 1, {Kierto: 90, helppous: Circ.easeou, viive: 1});

08. Soittautumistoiminnot

Integroida animaatiot koodisi kanssa, on tärkeää tietää, milloin tapahtumat tapahtuvat, varsinkin kun animaatio päättyy tai alkaa. Voit käyttää pyritty jhk Tapahtuman soittopyyntö. Haluat ehkä tietää, milloin Tween alkaa käyttää röyhkeä . Ja voit myös synkronoida Tween toisella animaatiolla tai käyttää Tween ja sen helpottaminen päivittää muuta mukautettua kohdetta. Käytä onupdate soittopyyntö tähän. Näin voit käyttää soittopyyntöä:

 Tweenmax.To (". Logo", 1, {
Y: 100,
Helppo: Bounce.ease,
ONCOMPLETE: TweenComplete
});
Toiminto TweenComplete () {
konsoli.log ("Tween Complete");
}

09. Callback-parametrit

Puhelujen polttaminen Voit halutessasi antaa tietoja yhdessä soittopyynnön kanssa, joka käsittelee sitä. Sinun on ehkä välitettävä tietoja soittajasta tai tiettyistä arvoista. Tämän ansiosta voit integroida animaatioidesi loput koodisi. Kaikki parametrit siirretään kautta Callback + "Params" , tuo on ONUPDATEARAMS .

Seuraavassa esimerkissä voit seurata Tweenin etenemistä käyttämällä avainsanaa {SELF} ja voi nähdä, miten kulkee useita parametreja taulukon avulla:

 Tweenmax.To (". Logo", 1, {
Y: 100,
Helppo: Bounce.ease,
ONUPDATE: TweenUpdate,
ONUPDATEARAMS: ["{itse}",
"Valmiit"]
});
Toiminto TweenUpdate (Tween,
viesti) {
var-prosenttiosuus = Tween.
edistyminen () * 100; // edistyminen ()
on arvo 0-1
Console.log (Prosenttiosuus +
"" + viesti);
}

10. Animaatioiden hallinta

Okei, joten voit nyt luoda Tweens ja helpottaa Tweens, palo-soittopyyntöjä ja parametreja. Mutta miten voit hallita animaatioita? Usein haluat aloittaa tai lopettaa ne muiden tapahtumien perusteella.

Jos haluat pysäyttää animaatio, voit käyttää tauko() menetelmä. Jos haluat jatkaa Tween, käytä jatkaa() . Tuhota täysin Tween-käyttö tappaa() . Kokeile seuraavia ja katso, mitä tapahtuu:

 // var, joka pitää viitaten Tween
var tween = tweenmax.to (".
Logo ", 2, {Y: 100, helppous: Bounce.
metout});
// Keskeytä välittömästi
Tween.pause ();
// Aloita tapahtumasta
SetTimeout (toiminto () {Tween.
Jatka ()}, 1000);
// käänteinen animaatio tapahtumassa
SetTimeout (toiminto () {Tween.
käänteinen ()}, 3000);

11. CSS ja CSSPLugin

Get started with GSAP: CSS and CSSPlugin — CSSPLugin automaattisesti havaitsee, kun sitä tarvitaan animaatioihin

CSSPLugin on mukana, kun käytät Tweenmax . Se on valtava aika-säästäjä, sillä siinä normalisoi käyttäytymistä selaimissa ja automaattisesti havaitsee, kun sitä tarvitaan animaatioihin. CSSPLugin voi käsitellä väriä, SVG-animaatioita ja optimoitua suorituskykyä välimuistin ja muiden sisäisten temppujen kanssa - ja se on usein tehokkaampi kääntää kantoja CSS: n kautta.

Olet jo nähnyt tämän toiminnassa, kun käytit peittävyys ja sijainti Animaatiot. Se toimii ilman erityistä koodausta!

12. 2D ja 3D-muunnokset

Get started with GSAP: 2D and 3D transforms — GSAP sisältää sisäänrakennetut muunnokset, joiden avulla voit skaalata, kääntää kääntää ja vino

CSS-transformaatiot mahdollistavat mittakaavan, kääntää kääntää ja vinoa. He työskentelevät molemmissa 2D- että 3D: ssä luomaan kauniita vaikutuksia nopeasti. GSAP sisältää sisäänrakennetut muuntaa ominaisuudet, kuten x , y , kierto , rotationx , pyöriminen , skewx ja asteikko . Yritä soveltaa seuraavia Tweenia kuvasi sen sijaan, että olemme jo yrittäneet:

 Tweenmax.To (". Logo", 3, {
X: 100,
Y: 100,
Scale: 1.5,
Rotationy: 360,
Helppo: Bounce.easeout});

13. Aikataulut

Get started with GSAP: Timelines — GSAP: n aikajana-objekti mahdollistaa useita animaatioita

Kun siirryt yhden tai kaksi Tweensia, saatat miettiä, miten hallita useita animaatioita. GSAP sisältää a aikajana Objekti tehdä täsmälleen. Voit liittää Tweens aikajana esine ja voi käyttää sijainti parametri Tween-ajan jälkeen. Sinulla voi olla Tweens käyttää yhtä toisensa jälkeen, tai sinulla on aukkoja tai jopa päällekkäisiä niitä. Lisää pari lisää kuvia HTML: lle luokkien kanssa Logo2 ja Logo3 vastaavasti.

Jos haluat nähdä, miten se toimii, kokeile seuraavat aikajana koodi:

 // Luo aikajanavan ilmentymä
var tl = uusi Timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{X: 50}));
// Huomaa lopullinen "0"
Tämä alkaa 0 sekunnissa.
tl.add (tweenmax.to (". Logo2", 1,
{Y: 100}), "0");
// Huomaa, että "+.25"
yksi alkaa .25 sek
tl.add (tweenmax.to (". Logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+. 25");

14. Aikajanavalvonta

Sekä animaatioiden hallitsemiseksi voit halutessasi hallita myös aikataulua. Onneksi voit keskeyttää, jatkaa ja kääntää aivan kuten voit animaatioilla. Voit myös lisätä parametreja aikajanalle toistaa , yoyo ja lisää soittopyyntöjä koko aikajanalle. Voit myös hallita aikajanajan nopeutta Aikaskaala Omaisuus. Yritä vaihtaa aikajana-ilmoituksen seuraavalla koodilla nähdäksesi, miten se toimii:

 var tl = uusi Timelinemax ({
// Toista äärettömän
Toista: -1,
Yoyo: True,});

15. Hanki ja aseta ominaisuudet

Yksi ominaisuus, joka on todella hyödyllinen, on Sweensin ja aikataulujen ominaisuuksien saaminen ja asettaminen. Näin voit tutustua yleiseen edistykseen ja kestoon tai kerätä muita tietoja GSAP-esineestä. Tässä koodissa on esimerkki saada aikajanajan kesto ja sitten aseta sen kesto muuttaa sitä. Tämä toimii samana myös Tweensin suhteen. Toinen hieno tapa reagoida reaaliaikaisesti tapahtumiin ja muokata animaatioita lennossa. Lisää seuraava ajankohtainen aikajuukoodi:

 // saat nykyisen keston
aikajana
konsoli.log (tl.duction ());
// asettaa keston 5 sekunniksi
2 sekunnin kuluttua odottaa
SetTimeout (toiminto () {
tl.duction (5);
}, 2000);

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Web-suunnittelija. Osta numero 279 tai tilata .

Lue lisää:

SuperCare SVG-animaatiot GSAP: llä
Vie View Effects Animaatiot HTML5: lle
Kuinka luoda animaatioita, jotka mittakaavassa kaikkiin laitteisiin

Aloita GreenSock Animation Platform

01. Aseta perus HTML-tiedosto

02. Sisällytä GSAP-kirjasto

03. Animoi Tweening

04. Tween ja From

05. Helping

06. helpottavat toimintoja ja sisään / ulos

07. Viive Tween

08. Soittautumistoiminnot

09. Callback-parametrit

10. Animaatioiden hallinta

11. CSS ja CSSPLugin

12. 2D ja 3D-muunnokset

13. Aikataulut

14. Aikajanavalvonta

15. Hanki ja aseta ominaisuudet

Miten tehdään - Suosituimmat artikkelit

Mixed-Media Art Tutorial: Miten vesiväri digitaalisen taideteoksen yli

5 tapaa lisätä verkkosivustosi SEO

Kuinka luoda hehkuvavärit öljymaaleilla

Procreate Tutorial: Uudet työkalut tutkitaan

4 askeleen parempaan VDM Zbrushin kanssa

Rakenna skaalautuvia reagoivia komponentteja

Snapchat Geofilterin luominen Photoshopissa

Luo laadukkaita digitaalisia kopioita taiteestasi

Luokat