Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. TimelineMax
Webdesign

TimelineMax: un'introduzione

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called The Beginner’s Guide to TimelineMax.
TimelineMax: Understanding the Mechanics

Italian (Italiano) translation by Emanuele Ravera (you can also view the original English article)

Che cosa è TimelineMax? Cosa la rende diversa da altre librerie della piattafoma GreenSock Animation? Perchè dovrei utilizzare TimelineMax piuttosto che TimelineLite? Come faccio a capire i parametri di TimelineMax? Se vi ritrovate in una qualsiasi di queste domande allora siete capitati nel posto giusto.

Benvenuti all'introduzione per una serie Tuts + su TimelineMax di GreenSock. Preparatevi per una serie esplosiva e complessa, che vi aiuterà a diventare un professionista dell'animazione.

Che cos'è TimelineMax?

TimelineMax è uno strumento di sequenziamento JavaScript, che funge da contenitore per le interpolazioni e altre linee temporali, rendendo più facile controllarle nel loro complesso e gestire con precisione la loro tempistica. TimelineMax fornisce i metodi per consentire l'accesso a molteplici aspetti dell'animazione. Può anche regolare in maniera dinamica la velocità di una sequenza temporale in runtime, e molto, molto di più.

Nota: interpolazione è l'abbreviazione di intercalazione; creazione fotogrammi tra stati in una sequenza di animazione.

TimelineMax  estende TimelineLite, offrendo esattamente le stesse funzionalità con caratteristiche aggiuntive (ma non indispensabili) come:

  • repeat
  • repeatDelay
  • yoyo
  • currentLabel()
  • tweenTo()
  • tweenFromTo()
  • getLabelAfter()
  • getLabelBefore()
  • e getActive()

Caratteristiche e vantaggi

TimelineMax ti consente, come autore, di poter far sovrapporre a piacere le interpolazioni sulla timeline. Come uno strumento di animazione professionale, si ha il controllo completo sul come e dove le interpolazioni sono collocate nella timeline. La maggior parte degli strumenti di animazione riesce principalmente ad eseguire un semplice ordinamento uno-dopo-l'-altro, ma non permettono alle animazioni di sovrapporsi. Immaginate di aggiungere un'interpolazione che muova un oggetto e vorreste iniziare a farlo dissolvere 0,5 secondi prima della fine dell'interpolazione stessa. Con TimelineMax saràpossibile creare tutto questo in maniera molto più pulita, ed estremamente più robusta.

Per convenienza, i principali plugin come CSSPlugin (per fornire i prefissi vendor CSS), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin e BezierPlugin sono tutti inclusi con TweenMax e TimelineMax. Poiché TweenMax fornisce TimelineMax e tutti gli altri bonus elencati precedentemente, GreenSock consiglia di utilizzare TweenMax per la maggior parte dei casi. Caricare TweenMax è semplicemente più conveniente in quanto unico file che contiene praticamente tutto ciò di cui avete bisogno.

Installazione

Per iniziare ti serve lo script TweenMax e devi caricarlo nel tuo documento HTML prima del tuo script con l'animazione personalizzata. Fortunatamente per noi CDNJS ha una copia disponibile per noi (c'è ne è una anche su GitHub).

Configurazione

TimelineMax consente una configurazione personalizzata delle opzioni tramite l'utilizzo di un object literal. Vediamo come è fatto

La parte che vedete utilizzare le { } parentesi graffe è l'object literal che conterrà la nostra configurazione. Questo significa che possiamo inserire coppie key:value entro le parentesi per definire come si comporterà la nostra linea temporale. L'intera riga  TimelineMax(vars: {})  è ciò che viene segnalato nella documentazione di TimelineMax come il "Costruttore".

Ecco l'intera configurazione di TimelineMax  con ogni chiave col suo valore di default. Inserte questo in cima al vostro file di animazione JavaScript (che abbiamo chiamato “my-timelinemax-animation.js” nel nostro esempio sopra). Qui stiamo solo elencando la configurazione completa, così che possiate vedere la varietà di opzioni di configurazione che TimelineMax può offrire. Tipicamente il vostro oggetto di configurazione conterrà solo le proprietà che servono per le vostre regolazioni. Potete approfondire queste opzioni nella TimelineMax documentation.

Ora che avete il config in posizione e capite le sue opzioni, potete passare la vostra configurazione object literal personale al costruttore TimelineMax(), quindi aggiungete le seguenti righe all fine del vostro file:

La vostra prima animazione

Le interpolazioni vengono create utilizzando metodi come to(), from() e staggerFrom(),  solo per citarne alcuni. Come avete visto in precedenza abbiamo il nostro oggetto di opzioni e l'abbiamo passato come argomento al costruttore TimelineMax. Ora abbiamo bisogno di muovere alcuni oggetti per "cominciare a sposrcarsi le mani". Per semplicità, muoviamo i due cerchi dalla sinistra e dall'alto del riquadro di visualizzazione:

Controllate la scheda JS nell'esempio qui sopra per capire come si raggiunge l'effetto Come segnalato in precedenza, ho impostato il costruttore TimelineMax per la scena appena vista, e ho passato l'object literal contenente le opzioni della timeline:

Ogni cerchi contiene un id per potermi riferire ad essi:

e in seguito il metodo to() viene utilizzato per controllare l'interpolazione.

All'interno di to() stiamo dicendo effettivamente "utilizza l'elemento che ti viene passato come primo argomento e spostarlo da sinistra di 100px. Poi usa il metodo to() concatenato dopo il nostro primo metodo to() per fare la stessa cosa, ma spostando quell'elemento di 100px dall'alto."

Notate che il cerchio in movimento dall'alto viene attivato una volta che il cerchio che si sta  muovendo da sinistra ha completato il suo movimento (interpolazione). Impareremo nei prossimi tutorial come controllare elementi lungo la linea temporale con tempi e velocità diverse, utilizzando il parametro di posizione.

Per la prossima volta

Se volete andare oltre in questo viaggio nell'animazione non esitate ad immergervi nella documentazione getting started di GreenSock. Restate sintonizzati per la prossima puntata della serie di questa avventura nell'animazione,  dove affronterò elementi come etichette, offset, pause, argomenti e impareremo a rifinire le opzioni al massimo. Alla prossima!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.