TimelineLite Ultimate Guide Starter: Avansert Sequencing
en
Del
6
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Jeg er spent på å avsløre for deg den mest kraftfulle verktøy i hele GreenSock Tweening Platform. Alt jeg har diskutert i de siste fire videoer har blitt skreddersydde for å forberede deg for den utrolige kraften du er i ferd med å se. Jeg skal vise deg to metoder som vil endre måten du nærmer deg noen script-basert animasjon fra dette tidspunktet.
Med appendMultiple () og insertMultiple () vil du ha nøyaktig kontroll over sekvensering og timing av hundrevis av tweens og tidslinjer med svært lite kode.
TimelineLite in Action
I SWF nedenfor, moder tidslinje som blir kontrollert av scrubber har bare to linjer med kode , men det er bokstavelig talt over hundre tweens pågår.
Du kan finne alle filer som brukes til å lage SWF ovenfor i kildefilene for denne opplæringen.
Se Screencast
Meet appendMultiple ()
TimelineLite sin appendMultiple () metoden gjør det mulig å legge til mange tweens og /eller tidslinjer til en tidslinje og har nøyaktig kontroll over den relative timingen av alle tweens /tidslinjer. Hva gjør denne metoden så kraftig er at den godtar en rekke tweens /tidslinjer og behandler dem alle som én gruppe som kan bli forskjøvet og forskjøvet slik du vil.
For å få mest mulig ut av appendMultiple () du må forstå alle fire parametere
appendMultiple (tweens: Array, offset: Antall = 0, justerer: String = "normal", rave: Number = 0): Array
tweens. Array - en Array inneholder noen eller alle av følgende: TweenLite, TweenMax, TimelineLite, og /eller TimelineMax tilfeller
forskyvning: Antall (standard = 0) - Mengde sekunder (eller rammer for rammer baserte tidslinjer) for å kompensere innsettingspunktet av tweens fra slutten av tidslinjen. For eksempel, for å begynne å tilføye det innsatte former 3 sekunder etter utløpet av tidslinjen (forlater et 3-sekunders mellomrom), bestemmer forskyvningen til 3. Eller for å ha tweens vedlagte slik at innsettingspunktet overlapper med de siste 2 sekundene av tidslinje, bestemmer forskyvningen til -2. Standardverdien er 0, slik at innsettingspunktet er akkurat på slutten av tidslinjen.
align: String (standard = "normal") - bestemmer hvordan tweens vil bli justert i forhold til hverandre før du får tilføyd. Alternativene er: TweenAlign.SEQUENCE (justerer tweens one-etter-the-annet i en sekvens), TweenAlign.START (justerer starttidene av alle tweens, ignorerer forsinkelser), og TweenAlign.NORMAL (justerer starttider alle tweens, hedre forsinkelser). Standard er NORMAL
rave. Antall (standard = 0) - sjangler tweens etter en viss tid (i sekunder) (eller i rammer for frames-baserte tidslinjer). For eksempel, hvis rave verdien er 0.5 og "align" eiendommen er satt til TweenAlign.START, den andre tween vil starte 0,5 sekunder etter den første starter, deretter 0,5 sekunder senere den tredje vil starte, etc. Hvis sluttar Eiendommen er TweenAlign.SEQUENCE, ville det være 0,5 sekunder ekstra mellom hver tween. Standard er 0.
De ovennevnte beskrivelsene ble tatt direkte fra GreenSock dokumentasjon.
I videoen går jeg over en rekke måter å skape rekken av tweens som appendMultiple () vil godta. Nedenfor er de to mest populære tilnærminger
Opprett en rekke unike Tweens
tl = new TimelineLite ();. //Bg tweentl.insert (TweenMax.to (bg,. 5, {alpha: 1}); tl.appendMultiple ([TweenLite.from (meet_mc, 0,5, {x: -100, rotasjon: -90, scaleX: 0, Scaley: 0, letthet: Back.easeOut}), TweenLite.from (the_mc, 0,5, {y: -100, rotasjon: -90, scaleX: 0, Scaley: 0, letthet: Back.easeOut}), TweenLite.from (blobs_mc, 0,5, {x: 700, rotasjon: 90, scaleX: 0, Scaley: 0, letthet: Back.easeOut})], 0, "sekvens", 0,5);
I koden ovenfor tre tweens lagt via appendMultiple () vil bli lagt umiddelbart etter BG tween slutter fordi forskyvningsverdien er 0. Hver tween vil starte .5 sekunder etter forrige tween slutter fordi justere parameteren er satt til "sekvens" og rave er satt til 0,5.
Opprett en Array of Lignende Tweens Bruke allFrom ()
TweenMax.allFrom () skaper en rekke tweens basert på en rekke gjenstander. Det gjelder de samme verdiene til tweens av alle objektene i tabellen. Du kan også bruke TweenMax.allTo () hvis du ønsker å spesifisere hvor gjenstander bør Tween til i motsetning til der de skal tween fra.
//skape en rekke objekter for å være tweenedallBlobs = [blob1_mc , blob2_mc, blob3_mc, blob4_mc, blob5_mc, blob6_mc, blob7_mc] tl = new TimelineLite (); //bruker allFrom () til tween hver blob Fra samme sett av eiendommer med samme duration.tl.appendMultiple (TweenMax.allFrom (allBlobs , 0,3, {scaleX: 0, Scaley: 0, x: "100"}), 0, "normal", 0,1)
Koden ovenfor vil lom hver blob for .3 sekunder fra verdiene som følger med i vars objekt ({scaleX: 0, Scaley: 0, x: "100"}). Hver tween starter 0,1 sekund etter den forrige tween har startet fordi sluttar modus er satt til "normal" og rave er 0,1.
Det er viktig å merke seg at allFrom () returnerer en matrise Juster moduser er litt vanskelig å forstå uten å se dem i aksjon. Jeg bygde TweenAlign visualiserer for å gi deg en enkel måte å teste hvordan de arbeider med en kombinasjon av forskjellige tween forsinkelser, sjangler og forskyvninger Bruk swf ovenfor for å utføre følgende tester:. Test 1: Forstå forskjellen mellom TweenAlign.NORMAL og TweenAlign.START Legg merke til hvordan forsinkelsen blir ignorert med TweenAlign.START Test 2: Se hvordan rave fungerer forskjellig avhengig justere modus Legg merke til hvordan rave fungerer annerledes med TweenAlign .NORMAL og TweenAlign.START. Gå gal kombinere ulike innstillinger og holde et øye med hvordan de påvirke starttidspunktet for hver tween og den totale varigheten av tidslinjen. Den TweenAlign Visualizer er også tilgjengelig i kildefilene for denne opplæringen. Selv om jeg referere appendMultiple () ganske mye i denne teksten, insertMultiple () fungerer nesten på samme måte. Den eneste forskjellen med insertMultiple () er at offset parameter refererer til en eksakt tid eller etikett som tweens /tidslinjer bør legges. Les mer i TimelineLite dokumentasjon. Når du angir justere modus du kan referere til den statiske contsant verdi i TweenAlign klassen eller den strengverdi. TweenAlign.NORMAL er det samme som å bruke "normal ". Når du får et håndtak på hvordan appendMultiple () og insertMultiple () jobber du i utgangspunktet har ubegrenset potensial for å skape forseggjorte og fleksible animasjoner med svært lite kode. Jeg håper virkelig at demonstrasjonen av hekkende flere TimelineLites inspirerer deg til å lage noen virkelig fantastiske effekter. Ved å legge til et snev av tilfeldig til hver tidslinjen kan du virkelig begynne å ta animasjoner til neste nivå og opprettholde en sinnsyk mengde av kontroll. Kanskje nå har du kunnskap og styrke til å forsøke "starburst" effekt som ble omtalt i innledningen til TimelineLite video? Kom til å tenke på det, jeg tildele som utfordring til deg som lekser. I neste tutorial jeg kommer til å bli vist noen funksjoner eksklusive til TimelineMax og noen andre triks du kan gjøre med alle dine tidslinjer. Hvis du har spørsmål eller kommentarer til denne opplæringen bare legge inn en kommentar under. Takk for å se! Anmeldelser
av tweens og det er derfor vi kan bruke den som verdien for tweens parameter i appendMultiple (). Hvis du skulle bruke allFrom () i en append () vil du få en feilmelding som det krever en enkelt tween snarere enn en rekke tweens.
TweenAlign Visualizer
Sett bar en forsinkelse på to
Veksle mellom TweenAlign.NORMAL og TweenAlign.START
Sett alle tween varig til en Anmeldelser
Sett alle tween forsinkelser til 0
Sett rave til en
Veksle mellom TweenAlign.NORMAL og TweenAlign.SEQUENCE
Bruk TweenAlign.NORMAL, er rave tiden mellom starten av hver tween
Med TweenAlign.SEQUENCE, er rave mengden gang mellom slutten av en tween og neste tween.
Flere merknader
Konklusjon