Ξεκινήστε με την πλατφόρμα κινουμένων σχεδίων Greensock

Η πλατφόρμα κινουμένων σχεδίων Greensock (GSAP) σάς δίνει τη δυνατότητα να ζωντανέψετε οτιδήποτε μπορείτε να έχετε πρόσβαση στο JavaScript, όπως ο Dom, ο καμβάς και το CSS, καθώς και τα δικά σας αντικείμενα.

Το GSAP βοηθά επίσης την επίλυση των ασυνέπειων του προγράμματος περιήγησης για ευκολότερη Δοκιμή χρηστών (Καλός web hosting Μπορεί επίσης να βοηθήσει εδώ), σας δίνει τη δυνατότητα να χρησιμοποιήσετε αντικείμενα για να διαχειριστείτε σύνθετα κινούμενα σχέδια και να τρέχετε έως και 20 φορές ταχύτερα από το jquery. Έχει γίνει ένα πρότυπο στη βιομηχανία και έχει χρησιμοποιηθεί σε αμέτρητες βραβευμένες ιστοσελίδες. Έχετε έναν ιστότοπο για να χτίσει; Εδώ είναι ο οδηγός μας για το καλύτερο οικοδόμος ιστότοπου περίπου.

01. Ρυθμίστε ένα βασικό αρχείο HTML

Ο καλύτερος τρόπος για να μάθετε το GSAP είναι να το δείτε σε δράση. Σε αυτό το σεμινάριο θα μάθετε σχετικά με τα βασικά χαρακτηριστικά της πλατφόρμας με παραδείγματα εργασίας που μπορείτε να χρησιμοποιήσετε στα έργα σας σήμερα!

Ξεκινήστε με τη δημιουργία ενός βασικού αρχείου HTML, όπου μπορείτε να πέσετε στον κωδικό JavaScript. Συμπεριλάβετε μια εικόνα με ένα λογότυπο τάξη. Θα χρησιμοποιήσετε το GSAP για να ζωντανέψετε τις ιδιότητες για να δείτε πώς λειτουργεί.

 & lt; html lang = "en" & gt;
& lt; κεφάλι & gt;
  & lt; στυλ & gt;
    .Logo {πλάτος: 150px; }
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; img class = "λογότυπο"
src = "logo.svg" / & gt;
& lt; script & gt;
// κώδικα εδώ
& lt; / script & gt;
& lt; / Body & GT;
& lt; / html & gt; 

02. Συμπεριλάβετε τη βιβλιοθήκη GSAP

Στη συνέχεια, θα χρειαστεί να προσθέσετε GSAP στο έργο σας στο Web. Μεταξύ σας & lt; image & gt; και & lt; script & gt; Ετικέτες, εισαγάγετε έναν σύνδεσμο στη βιβλιοθήκη GSAP. Μπορείτε να κατεβάσετε το φερμουάρ απευθείας από εδώ , ή να το αρπάξει Github (Εάν έχετε αρχεία για να μοιραστείτε, επιλέξτε το τέλειο αποθήκευση σύννεφων ). Τα αρχεία φιλοξενούνται επίσης στο Super-Fast CDN CDN CDN, οπότε ο απλούστερος τρόπος είναι να χρησιμοποιήσετε τα φιλοξενούμενα αρχεία όπως αυτή:

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

03. Animate με Tweening

Η Tweening είναι η διαδικασία αλλαγής μιας τιμής με την πάροδο του χρόνου για να δημιουργήσετε ένα κινούμενο σχέδιο. Για παράδειγμα, μετακινώντας ένα αντικείμενο από το Α στο Β, κλιμάκωση ή περιστρέφοντας το. Μπορείτε επίσης να εξετάσετε τις δικές σας προσαρμοσμένες τιμές.

Ο απλούστερος τρόπος προς το Tween μιας ιδιοκτησίας είναι να χρησιμοποιήσετε το Tweenmax.Για () λειτουργία. Αυτό χρειάζεται ένα αντικείμενο στόχου, μια διάρκεια και τα ζεύγη ιδιοκτησίας / αξίας που χρησιμοποιείτε. Για να δείτε τη λειτουργία σε δράση, δοκιμάστε κάθε μία από τις γραμμές του κώδικα παρακάτω χρησιμοποιώντας το λογότυπο Ως αντικείμενο στόχου:

 // Tween x θέση από το ρεύμα
σε 400 σε 2 δευτερόλεπτα
Tweenmax.Για ("λογότυπο", 2, {x: 400});
// Tween y Θέση από το ρεύμα
έως 200 και αδιαφάνεια στο 0, πάνω από 1
δεύτερος
Tweenmax.Για ("λογότυπο", 1, {Y: 200, αδιαφάνεια: 0});
// tween x και y έως 100, κλίμακα σε
1.5, και περιστρέψτε το 90 deg, πάνω από 2
δεύτερος
Tweenmax.Για ("λογότυπο", 2, {x: 100, y: 100, κλίμακα: 1.5, περιστροφή: 90}); 

04. Tween από και από

Μπορείτε να εξετάσετε ένα ακίνητο από την τρέχουσα αξία του σε ένα νέο χρησιμοποιώντας προς την() , αλλά μπορείτε επίσης να tween από μια τιμή στην τρέχουσα τιμή του. Για παράδειγμα, αν σας λογότυπο ξεκινά από τη θέση x 0 Και θέλετε να τελειώσετε εκεί, θα μπορούσατε να το κάνετε αυτό:

 Tweenmax.from ("λογότυπο", 2, {x: 400}); 

Σε αυτή την περίπτωση, το λογότυπό σας θα μετακινηθεί αμέσως x = 400 και στη συνέχεια Tween x = 0 . Μπορείτε ακόμη να ορίσετε τόσο τις τιμές έναρξης όσο και τις τελικές τιμές, αγνοώντας τις τρέχουσες τιμές χρησιμοποιώντας από προς() σαν αυτό:

 Tweenmax.fromto ("λογότυπο", 2, {x: 400}, {x: 200}); 

05. Σύσταση

Η χαλάρωση είναι το «στυλ» της κινούμενης εικόνας, καθώς η μετάβαση των αξιών από το Α στο Β. Αντί για ένα σταθερό ποσοστό ταχύτητας, το οποίο ονομάζεται «γραμμικό», μπορείτε να εφαρμόσετε λειτουργίες για την καμπύλη του ρυθμού ταχύτητας. Ξεκινούν αργά και σταδιακά επιταχύνουν; Έρχονται σε μια απότομη στάση και αναπήδηση λίγο στο τέλος; Σε κινούμενα σχέδια Αυτές οι μορφές προσθέτουν χαρακτήρα και συναίσθημα στην εργασία σας. Μπορείτε να εφαρμόσετε μια χαλαρή λειτουργία όπως αυτή:

 TweenMax.Για ("λογότυπο", 2, {x: 100, y: 100, περιστροφή: 90, ευκολία: circ.easein}); 

06. Σύλληψη λειτουργιών και εντός / έξω

Το GSAP περιλαμβάνει μια ποικιλία από λειτουργίες χαλάρωσης, όπως πίσω , πήδημα , ελαστικό , αμαρτία , αγράμματος , και εκθέτω . Μπορεί να έχετε παρατηρήσει επίσης ότι το ευκολία η λειτουργία έχει μια ιδιότητα του ειλικρινής , που χρησιμοποιήσαμε στο παραπάνω βήμα παραπάνω. Μπορείτε επίσης να χρησιμοποιήσετε ησυχία και ήρεμος . Αυτά υποδεικνύουν πού εφαρμόζεται η καμπύλη χαλάρωσης στην κινούμενη εικόνα. Δοκιμάστε τα παρακάτω για να δείτε τα αποτελέσματα:

 // χαλαρώστε με μια αναπήδηση
Tweenmax.Για ("λογότυπο", 2, {x: 100, y: 100, περιστροφή: 90, ευκολία: bounch.easout});
// χαλάρωση μέσα και έξω με ελαστική
Tweenmax.Για ("λογότυπο", 2, {x: 100, y: 100, περιστροφή: 90, ευκολία: Elastic.EASENOUT}). 

07. Καθυστερημένη ένα tween

Μερικές φορές θα θελήσετε να καθυστερήσετε την έναρξη μιας κινούμενης εικόνας, είτε για να το συγχρονίσετε με ένα άλλο κινούμενο σχέδιο, είτε για να περιμένετε να περιμένετε να συμβεί ένα γεγονός. Μπορείτε να χρησιμοποιήσετε άλλες ειδικές ιδιότητες ενός GSAP που ονομάζονται καθυστέρηση για να γινει αυτο. Δοκιμάστε τον ακόλουθο κώδικα για να δείτε πώς μπορείτε να καθυστερήσετε τα tweens για συγκεκριμένο χρονισμό:

 Tweenmax.Για ("λογότυπο", 1, {Y: 100, ευκολία: bounce.easout});
// καθυστέρηση αυτό tween κατά 1 δευτερόλεπτο
Tweenmax.Για ("λογότυπο", 1, {περιστροφή: 90, ευκολία: circ.easout, καθυστέρηση: 1}); 

08. Λειτουργίες επανάκλησης

Για να ενσωματώσετε κινούμενα σχέδια με τον κωδικό σας, είναι σημαντικό να γνωρίζετε πότε εμφανίζονται γεγονότα, ειδικά όταν τελειώνει ή αρχίζει ένα κινούμενο σχέδιο. Μπορείτε να χρησιμοποιήσετε το αναμορφωμένος Επανάκληση συμβάντος για αυτό. Μπορεί να θέλετε να μάθετε πότε ξεκινάει ένα tween, χρησιμοποιώντας σερχάρισμα . Και ίσως να θέλετε να συγχρονίσετε το tween σας με ένα άλλο κινούμενα σχέδια ή να χρησιμοποιήσετε το Tween και τη χαλάρωση για να ενημερώσετε κάποιο άλλο προσαρμοσμένο αντικείμενο. Χρησιμοποιήστε το ξεφλουδίζω επανάκληση για αυτό. Εδώ είναι πώς χρησιμοποιείτε την επανάκληση:

 Tweenmax.Για ("λογότυπο", 1, {
Y: 100,
Ευκολία: Bounch.ASEASOUT,
onComplete: tweencomplete
});
Λειτουργία TweenComplette () {
console.log ("tween ολοκληρωθεί").
} 

09. Παράμετροι επανάκλησης

Κατά την εκτόξευση των επανάκλησης μπορεί να θέλετε να περάσετε πληροφορίες μαζί με την επανάκληση στη λειτουργία που το χειρίζεται. Μπορεί να χρειαστεί να περάσετε πληροφορίες σχετικά με τον καλούντα ή τις συγκεκριμένες τιμές. Αυτό σας επιτρέπει να ενσωματώσετε τα κινούμενα σχέδια με την υπόλοιπη βάση κωδικού σας. Όλες οι παράμετροι περνούν μέσω Επανάληψη + "Params" , αυτό είναι OnupdateParams .

Στο παρακάτω παράδειγμα, μπορείτε να παρακολουθείτε την πρόοδο του Tween χρησιμοποιώντας τη λέξη-κλειδί {εαυτός} και μπορεί να δει πώς να περάσει πολλαπλές παραμέτρους χρησιμοποιώντας μια συστοιχία:

 Tweenmax.Για ("λογότυπο", 1, {
Y: 100,
Ευκολία: Bounch.ASEASOUT,
OnUpdate: Tweenupdate,
OnupdateParams: ["{{self}",
"ολοκληρώθηκε το"]
});
Λειτουργία Tweenupdate (Tween,
μήνυμα) {
var ποσοστό = tween.
Πρόοδος () * 100; // πρόοδος()
είναι μια τιμή 0-1
Console.log (ποσοστό +
"" μήνυμα);
} 

10. Ελέγχοντας κινούμενα σχέδια

Εντάξει, έτσι μπορείτε να δημιουργήσετε tweens και να διευκολύνετε τα tweens, τις επανάκλησης πυρκαγιάς και τις παραμέτρους. Αλλά πώς ελέγχετε τα κινούμενα σχέδια; Συχνά θέλετε να ξεκινήσετε ή να τα σταματήσετε με βάση άλλα γεγονότα.

Εάν πρέπει να σταματήσετε ένα κινούμενο σχέδιο που μπορείτε να χρησιμοποιήσετε το παύση() μέθοδος. Αν θέλετε να συνεχίσετε μια Tween, χρήση ΒΙΟΓΡΑΦΙΚΟ() . Για να καταστρέψετε εντελώς μια χρήση μεταξύ σκοτώνω() . Δοκιμάστε τα παρακάτω και δείτε τι συμβαίνει:

 // Βάρος για να κρατήσετε αναφορά στο Tween
var tween = tweenmax.Για (".
Λογότυπο ", 2, {Y: 100, ευκολία: Αναπήδηση.
reasout});
// παύση αμέσως
tween.pause ();
// ξεκινήστε το συμβάν
setimeout (λειτουργία () {tween.
Επαναλάβετε ()}, 1000);
// Αντίστροφη κινούμενη εικόνα στο συμβάν
setimeout (λειτουργία () {tween.
Αντίστροφη ()}, 3000). 

11. CSS και CSSPLUGIN

Το CSSPLUGIN συμπεριλαμβάνεται όταν χρησιμοποιείτε Tweenmax . Είναι ένας τεράστιος χρόνος εξοικονόμησης, δεδομένου ότι κανονικοποιεί τις συμπεριφορές σε όλα τα προγράμματα περιήγησης και ανιχνεύει αυτόματα όταν χρειάζεται για κινούμενα σχέδια. Το CSSplugin μπορεί να χειριστεί τα Tweens Color Tweens, SVG Animations και βελτιστοποιημένη απόδοση με προσωρινή αποθήκευση και άλλα εσωτερικά κόλπα - και είναι συχνά πιο αποτελεσματικό να μεταφράσετε τις θέσεις μέσω του CSS.

Έχετε ήδη δει αυτό σε δράση όταν το χρησιμοποιήσατε το αδιαφάνεια και θέση κινούμενα σχέδια. Λειτουργεί χωρίς ειδική κωδικοποίηση!

12. 2D και 3D μετασχηματισμένα

Οι μετασχηματισμοί CSS σας επιτρέπουν να κλιμακώσετε, να περιστρέψετε μεταφράσετε και λοξά. Εργάζονται σε 2D και 3D για να δημιουργήσουν τα όμορφα εφέ γρήγορα. Το GSAP περιλαμβάνει ενσωματωμένες ιδιότητες μετασχηματισμού όπως Χ , y , περιστροφή , περιστροφικός , περιστρεφόμενος , λοξός και κλίμακα . Δοκιμάστε να εφαρμόσετε τα παρακάτω Tween στην εικόνα σας αντί για αυτά που έχουμε ήδη δοκιμάσει:

 Tweenmax.Για ("λογότυπο", 3, {
x: 100,
Y: 100,
Κλίμακα: 1.5,
περιστροφικό: 360,
Ευκολία: Bounce.ASEASOUT}). 

13. Χρονοδιάγραμμα

Μόλις προχωρήσετε πέρα ​​από ένα ή δύο tweens, μπορεί να αναρωτιέστε πώς να διαχειριστείτε πολλαπλά κινούμενα σχέδια. Το GSAP περιλαμβάνει ένα χρονοδιάγραμμα αντικείμενο να το κάνετε ακριβώς αυτό. Προσθέτετε tweens στο χρονοδιάγραμμα αντικείμενο και μπορεί να χρησιμοποιήσει το θέση παράμετρος μετά το tween για να τους χρόνο. Μπορείτε να έχετε tweens τρέχει το ένα μετά το άλλο, ή να έχετε κενά, ή ακόμα και να τα επικαλύψετε. Προσθέστε ένα ζευγάρι περισσότερες εικόνες στο HTML σας με μαθήματα λογότυπο2 και λογότυπο3 αντίστοιχα.

Για να δείτε πώς λειτουργεί, δοκιμάστε τα εξής χρονοδιάγραμμα κώδικας:

 // Δημιουργήστε μια περίπτωση χρονοδιαγράμματος
var tl = νέο timelinemax ();
tl.add (tweenmax.to ("λογότυπο", 1,
{x: 50})).
// σημειώστε το τελικό "0" για να κάνετε
Αυτό ξεκινά στις 0 δευτερόλεπτα.
tl.add (tweenmax.Για ("λογότυπο2", 1,
{Y: 100}), "0").
// σημειώστε το "+.25" για να το κάνετε αυτό
ένα ξεκίνημα στο .25 sec
tl.add (tweenmax.to ("λογότυπο3", 1,
{περιστροφικό: 180, Y: 50,
X: 50}), "+. 25"); 

14. Έλεγχος χρόνου

Εκτός από τον έλεγχο των κινούμενων εικόνων, ίσως θελήσετε να ελέγξετε τα χρονοδιαγράμματα. Ευτυχώς, μπορείτε να κάνετε παύση, να συνεχίσετε και να αντιστραφεί όπως μπορείτε να μπορείτε με κινούμενα σχέδια. Μπορείτε επίσης να προσθέσετε παραμέτρους στο χρονοδιάγραμμα επαναλαμβάνω , γιογιό και προσθέστε επανάκληση για ολόκληρη τη χρονολογική σειρά. Μπορείτε επίσης να ελέγξετε την ταχύτητα του χρονοδιαγράμματος χρησιμοποιώντας το χρονοδιάγραμμα ιδιοκτησία. Δοκιμάστε να αντικαταστήσετε τη δήλωση του χρονοδιαγράμματος με τον ακόλουθο κώδικα για να δείτε πώς λειτουργεί:

 var tl = new timelinemax ({
// επαναλάβετε απεριόριστα
Επαναλάβετε: -1,
Yoyo: TRUE,}); 

15. Πάρτε και ρυθμίστε τις ιδιότητες

Ένα χαρακτηριστικό που είναι πραγματικά χρήσιμο παίρνει και θέτει ιδιότητες των Tweens και Timelines. Με αυτόν τον τρόπο, μπορείτε να γνωρίσετε τη συνολική πρόοδο και τη διάρκεια ή να συγκεντρώσετε άλλες πληροφορίες σχετικά με ένα αντικείμενο GSAP. Σε αυτό το παράδειγμα του κώδικα μπορείτε παίρνω τη διάρκεια του χρονοδιαγράμματος και στη συνέχεια σειρά τη διάρκεια του να το αλλάξει. Αυτό λειτουργεί και για τα tweens επίσης. Είναι ένας άλλος πολύ καλός τρόπος να αντιδράσετε σε πραγματικό χρόνο σε εκδηλώσεις και να τροποποιήσετε κινούμενα σχέδια στη μύγα. Προσθέστε τα παρακάτω μετά το προηγούμενο κωδικό σας χρονοδιαγράμματος:

 // Πάρτε την τρέχουσα διάρκεια του
το χρονοδιάγραμμα
console.log (tl.dation ());
// ορίζει τη διάρκεια σε 5 δευτερόλεπτα
Μετά από 2 δευτερόλεπτα
setimeout (λειτουργία () {
tl.Dation (5);
}, 2000) · 

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Web Design Web Designer. Αγοράστε τεύχος 279 ή Εγγραφείτε .

Διαβάστε περισσότερα:

• Supercharge SVG Animations με GSAP
• Εξαγωγή μετά από εφέ κινούμενα σχέδια σε HTML5
• Πώς να δημιουργήσετε κινούμενα σχέδια που έχουν κλίμακα για όλες τις συσκευές