Share
Vad är TimelineMax? Vad skiljer det från andra GreenSock Animation Platform (GSAP) -bibliotek? Varför skulle jag behöva TimelineMax över TimelineLite? Hur går jag över förstå parametrar för TimelineMax? Om du befinner dig och frågar någon av dessa frågor har du kommit till rätt ställe.
Välkommen till primeren för en Tuts + -serie som diskuterar TimelineMax av GreenSock. Gör dig redo för en explosiv, sinneböjande serie för att hjälpa dig till en animationspro.
TimelineMax är ett JavaScript-sekvenseringsverktyg som fungerar som en behållare för tweens och andra tidslinjer, vilket gör det enklare att styra dem som helhet och exakt hantera deras timing. TimelineMax ger metoder för att tillåta åtkomst till flera aspekter av din animering. Det kan också dynamiskt anpassa en tidslinjes hastighet vid körning, plus mycket, mycket mer.
Notera: tweening är en förkortning av inbetweening; skapa ramar mellan stater ien animationssekvens.
TimelineMax utökar TimelineLite, som erbjuder exakt samma funktionalitet tillsammans med ytterligare (men icke nödvändiga) funktioner som:
Accentsconagua
uppreparepeatjojocurrent ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()bli aktiv() Med TimelineMax kan du som författare kraften att göra tweens överlapp på tidslinjen så mycket du vill. Som animationsprojektet har du fullständig kontroll över var tweens placeras på tidslinjen. De flesta andra animeringsverktyg kan i första hand utföra en grundläggande en efter den andra sekvensering, men kan inte tillåta tweens att överlappa varandra. Föreställ dig att du lägger till en mellanslag som rör ett objekt och du vill att det börjar börja blekna ut 0,5 sekunder före slutet av den här tweenen? Med TimelineMax är det mycket renare, plus extremt robust för att göra allt som händer.
För enkelhets skyld ingår stora plugins som CSSPlugin (för leverans av CSS-leverantörs prefix), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin och BezierPlugin alla med TweenMax och TimelineMax. Eftersom TweenMax kommer att förse dig med TimelineMax och alla andra godsaker som tidigare nämnts rekommenderar GreenSock att använda TweenMax för de flesta användningsfall. Att ladda TweenMax är bara bekvämare eftersom en fil innehåller ganska mycket allt du behöver.
För att starta måste du hämta TweenMax-skriptet och ladda det i ditt HTML-dokument tidigare till ditt anpassade animationsskript. Lycklig för oss CDNJS har en kopia tillgänglig för oss (det finns också en på GitHub).
TimelineMax möjliggör anpassade konfigurationsalternativ genom att använda ett objekt bokstavligt. Låt oss undersöka hur det ser ut.
TidslinjeMax (vars: )
Den del du ser använder lockiga hängslen är objektet bokstavligt som håller vår konfiguration. Det betyder att vi kan infoga nyckelvärde parning inom dessa fästen för att definiera hur vår tidslinje kommer att verka. Hela linjen TidslinjeMax (vars: ) är det som hänvisas till i TimelineMax docs som "Constructor".
Här är hela TimelineMax config med varje nyckel med sitt standardvärde. Placera detta högst uppe i din JavaScript-animeringsfil (som vi kallade "my-timelinemax-animation.js" i vårt exempel ovan). Vi listar bara hela konfigurationen här så att du kan se olika konfigurationsalternativ TimelineMax erbjuder. Vanligtvis innehåller ditt konfigurationsobjekt bara de egenskaper som behövs för justeringar. Du kan läsa mer om dessa alternativ i dokumentationen TimelineMax.
var tmax_options = fördröjning: 0, pausad: false, onComplete: function () console.log ('animationen är klar'); , onCompleteScope: , tweens: [], stagger: 0, justera: "normal", useFrames: false, onStart: function () console.log ('på start kallad'); , onStartScope: , onUpdate: function () console.log ('på uppdaterad kallad'); , onUpdateScope: , onRepeat: function () console.log ('på upprepad kallad'); , onRepeatScope: , onReverseComplete: function () console.log ('omvänd komplett'); , onReverseCompleteScope: , autoRemoveChildren: false, smoothChildTiming: false, repeat: 0, repeatDelay: 0, yoyo: false, onCompleteParams: [], påReverseCompleteParams: [], onStartParams: [], onUpdateParams: [], onRepeatParams: ]; Nu när du har konfigurationen på plats och förstår dess alternativ kan du skicka ditt anpassade objekt bokstavligt config till TimelineMax () konstruktör, så lägg till följande i botten av din fil:
var tmax_tl = ny TimelineMax (tmax_options);
Tweens skapas med hjälp av metoder som till(), från() och staggerFrom () bara för att nämna några. Som du såg tidigare tog vi vårt alternativobjekt och skickade det som ett argument till TimelineMax-konstruktören. Nu måste vi flytta några föremål för att få fötterna våta. För enkelhetens skull låt oss flytta två cirklar från vänster och toppen av visningsporten:
Kolla JS fliken i exemplet ovan för att se hur effekten uppnås. Som tidigare noterat har jag satt upp TimelineMax-konstruktorn för scenen ovan och passerat i objektet bokstavligt innehåll som innehåller tidslinjens alternativ:
var tl = ny TimelineMax (tmax_optioner)
Varje cirkel innehåller en id för mig att hänvisa dem till:
var tl = ny TimelineMax (tmax_options), circle_top = $ ('# circle-top'), circle_bottom = $ ('# cirkelbotten'); och sedan till() Metoden används för att styra tweenen.
tl.to (circle_top, 1, left: 100) .to (circle_bottom, 1, top: 100);
Inom till() vi säger effektivt "använd det element som passerat som första argumentet och flytta det från vänster 100px. Använd sedan till() metod kedjad efter vår första till() metod att göra detsamma, men flytta det elementet från toppen 100px. "
Observera att cirkeln som rör sig från toppen utlöses när cirkeln som rör sig från vänster har avslutad dess rörelse (tween). Vi lär oss i kommande handledning hur man kontrollerar elementen vid olika tider och hastighet längs tidslinjen med hjälp av placera parameter.
Om du skulle vilja hoppa framåt på den här animationsresan är du välkommen att gå vidare till GreenSocks startdokumentation. Stanna in för nästa i serien av det här animationseventyret där jag täcker saker som etiketter, offsets, pausar, argument och lär dig hur du anpassar alternativ till elva. Tills nästa gång!
