Οι γωνιακές κινούμενες εικόνες εξηγούνται με παραδείγματα

Γιατί να χρησιμοποιήσετε κινούμενα σχέδια;

Τα σύγχρονα στοιχεία ιστού χρησιμοποιούν συχνά κινούμενα σχέδια. Προγραμματιστές όπλων Cascading Style-sheet (CSS) με τα εργαλεία για τη δημιουργία εντυπωσιακών κινούμενων σχεδίων. Οι μεταβάσεις ιδιοτήτων, τα κινούμενα σχέδια με μοναδικό όνομα, τα βασικά καρέ πολλαπλών τμημάτων είναι δυνατά με CSS. Οι δυνατές δυνατότητες είναι ατελείωτες χάρη στο CSS.

Σε μια σύγχρονη εφαρμογή ιστού, το animation εστιάζει την προσοχή του χρήστη. Τα καλά κινούμενα σχέδια επιδιώκουν να καθοδηγήσουν την προσοχή του χρήστη με ικανοποιητικό και παραγωγικό τρόπο. Τα κινούμενα σχέδια δεν πρέπει να αποδειχθούν ενοχλητικά για τον χρήστη.

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

Τα κινούμενα σχέδια συνεχίζουν να αναπτύσσονται όλο και περισσότερο σχετικά με την περίπτωση του Angular. Η Google αναπτύσσει το Angular ενώ προωθεί τη φιλοσοφία του Σχεδιασμού Υλικών. Ενθαρρύνει τη συνοπτική διεπαφή χρήστη (UI) που συμπληρώνεται με κινούμενα σχόλια χρήστη. Κάνει τις διαδικτυακές εφαρμογές να αισθάνονται κάπως ζωντανές και διασκεδαστικές στη χρήση.

Η γωνιακή κοινότητα αναπτύσσει μια βασική βιβλιοθήκη widget που ονομάζεται Material2. Αυτό το έργο προσθέτει μια ποικιλία από ενότητες widget στο Angular. Τα περισσότερα διαθέτουν κινούμενα σχέδια. Για να καταλάβετε πώς λειτουργούν, αυτό το άρθρο συνιστά τη μελέτη κινούμενων σχεδίων CSS προτού το διαβάσετε.

Οι γωνιακές κινούμενες εικόνες είναι η απλοποιημένη έκδοση του πλαισίου αυτού που παρέχει το CSS εγγενώς. Το CSS είναι η βασική τεχνολογία για γωνιακές κινούμενες εικόνες που εμφανίζονται στο πρόγραμμα περιήγησης στο Web. Το CSS είναι εκτός του πεδίου αυτού του άρθρου. Ήρθε η ώρα να αντιμετωπίσετε τις γωνιακές κινούμενες εικόνες.

Ρύθμιση κινούμενων σχεδίων

Πριν από την κινούμενη εικόνα, το BrowserAnimationsModulemust πρέπει να συμπεριληφθεί στον πίνακα εισαγωγών του root module. Είναι διαθέσιμο από @angular/platform-browser/animations. Αυτό το NgModule διασφαλίζει ότι τα κινούμενα σχέδια λειτουργούν για τη δεδομένη πλατφόρμα. Αυτό το άρθρο προϋποθέτει το τυπικό πρόγραμμα περιήγησης ιστού για κάθε παράδειγμα.

Οι γωνιακές κινούμενες εικόνες δηλώνουν μέσα στα @Componentμεταδεδομένα. @Componentδιακοσμεί μια τάξη για να τη διακρίνει ως συστατικό του Angular. Τα μεταδεδομένα του περιέχουν διαμορφώσεις στοιχείων, συμπεριλαμβανομένου του animations: []πεδίου. Κάθε στοιχείο πίνακα από αυτό το πεδίο αντιπροσωπεύει μια σκανδάλη κίνησης ( AnimationTriggerMetadata).

Τα κινούμενα σχέδια είναι αποκλειστικά στο στοιχείο φιλοξενίας τους μέσω των μεταδεδομένων του διακοσμητή. Τα κινούμενα σχέδια μπορούν να χρησιμοποιηθούν μόνο στο πρότυπο του κεντρικού στοιχείου. Τα κινούμενα σχέδια δεν κληρονομούν στα παιδιά του συστατικού. Υπάρχει μια εύκολη λύση για αυτό.

Θα μπορούσατε πάντα να δημιουργήσετε ένα ξεχωριστό αρχείο που εξάγει έναν πίνακα. Οποιαδήποτε κλάση συστατικών μπορεί να εισαγάγει αυτόν τον πίνακα από την κορυφή του κεντρικού αρχείου. Το εισαγόμενο διακριτικό πίνακα μεταβαίνει στη συνέχεια στα μεταδεδομένα κινούμενων σχεδίων του στοιχείου. Επαναλάβετε αυτήν τη διαδικασία για οποιαδήποτε άλλα στοιχεία που απαιτούν τον ίδιο πίνακα στα μεταδεδομένα κινούμενων σχεδίων.

Η προβολή περιεχομένου σάς επιτρέπει να εφαρμόζετε κινούμενες εικόνες στο περιεχόμενο DOM του συστατικού Α (Document Object Model). Το στοιχείο Β που τυλίγει αυτό το περιεχόμενο, το DOM μπορεί να προβάλει τα περιεχόμενα στο δικό του πρότυπο. Μόλις το κάνει, οι κινούμενες εικόνες του συστατικού Α δεν αναιρούνται. Το στοιχείο Β ενσωματώνει τα κινούμενα σχέδια του Α μέσω προβολής περιεχομένου.

ΕΝΤΑΞΕΙ. Ξέρετε πώς να ρυθμίσετε κινούμενα σχέδια και πού να τα δηλώσετε. Η εφαρμογή είναι το επόμενο βήμα.

Μέθοδοι ζωτικότητας

Τα γωνιακά κινούμενα σχέδια χρησιμοποιούν μια σειρά από κλήσεις μεθόδου που μπορούν να εισαχθούν από @angular/animations. Κάθε στοιχείο του @Componentπίνακα κινούμενων σχεδίων ξεκινά ως μία μόνο μέθοδο. Τα επιχειρήματά του ξετυλίγονται ως μια ακολουθία κλήσεων μεθόδου υψηλότερης τάξης. Η ακόλουθη λίστα δείχνει μερικές από τις μεθόδους που χρησιμοποιούνται για τη δημιουργία γωνιακών κινούμενων σχεδίων.

  • trigger(selector: string, AnimationMetadata[])

επιστρέφει AnimationTriggerMetadata

  • state(data: string, AnimationStyleMetadata, options?: object)

επιστρέφει AnimationStateMetadata

  • style(CSSKeyValues: object)

επιστρέφει AnimationStyleMetadata

  • animate(timing: string|number, AnimationStyleMetadata|KeyframesMetadata)

επιστρέφει AnimationAnimateMetadata

  • transition(stateChange: string, AnimationMetadata|AnimationMetadata[], options?: object)

επιστρέφει AnimationTransitionMetadata

Ενώ υπάρχουν σίγουρα περισσότερες μέθοδοι για να διαλέξετε, αυτές οι πέντε μέθοδοι χειρίζονται τα βασικά. Η προσπάθεια κατανόησης αυτών των βασικών μεθόδων ως λίστας δεν βοηθά πολύ. Οι εξηγήσεις Bullet-by-bullet ακολουθούμενες από ένα παράδειγμα θα το κατανοήσουν καλύτερα.

trigger (επιλογέας: string, AnimationMetadata [])

Η trigger(...)μέθοδος ενσωματώνει ένα μόνο στοιχείο κινούμενης εικόνας μέσα στον πίνακα κινούμενων σχεδίων.

Το πρώτο όρισμα της μεθόδου selector: stringταιριάζει με το [@selector]χαρακτηριστικό μέλους. Λειτουργεί σαν οδηγία χαρακτηριστικών στο πρότυπο στοιχείων. Συνδέει ουσιαστικά το στοιχείο κίνησης με το πρότυπο μέσω ενός επιλογέα χαρακτηριστικών.

Το δεύτερο όρισμα είναι ένας πίνακας που περιέχει μια λίστα με εφαρμόσιμες μεθόδους κινούμενης εικόνας. Το trigger(...)διατηρεί εντελώς σε έναν πίνακα.

κατάσταση (δεδομένα: συμβολοσειρά, AnimationStyleMetadata, επιλογές ?: αντικείμενο)

Η state(...)μέθοδος καθορίζει την τελική κατάσταση του animation. Εφαρμόζει μια λίστα ιδιοτήτων CSS στο στοιχείο προορισμού μετά την ολοκλήρωση μιας κινούμενης εικόνας. Αυτό συμβαίνει έτσι ώστε το CSS του κινούμενου στοιχείου να ταιριάζει με την ανάλυση της κινούμενης εικόνας.

Το πρώτο όρισμα ταιριάζει με την τιμή των δεδομένων που συνδέονται με τη σύνδεση κινούμενων σχεδίων. Δηλαδή, η τιμή που δεσμεύεται [@selector]στο πρότυπο ταιριάζει με το πρώτο όρισμα του a state(...). Η τιμή των δεδομένων καθορίζει την τελική κατάσταση. Η αλλαγή της τιμής καθορίζει τα μέσα κίνησης (δείτε transition(...)).

Το δεύτερο όρισμα φιλοξενεί τα στυλ CSS που ισχύουν για ένα στοιχείο μετά την κίνηση. Τα στυλ περνούν με την επίκληση style(...)και μεταβιβάζοντας στο επιχείρημά τους τα επιθυμητά στυλ ως αντικείμενο.

Μια λίστα επιλογών καταλαμβάνει προαιρετικά το τρίτο όρισμα. Οι προεπιλεγμένες state(...)επιλογές θα πρέπει να παραμείνουν αμετάβλητες, εκτός εάν αιτιολογείται διαφορετικά.

στυλ (CSSKeyValues: αντικείμενο)

Μπορεί να έχετε παρατηρήσει AnimationStyleMetadataαρκετές φορές στην προηγούμενη λίστα. Το style(...)στοιχείο επιστρέφει αυτόν τον ακριβή τύπο μεταδεδομένων. Όπου εφαρμόζονται τα στυλ CSS, η style(...)μέθοδος πρέπει να επικαλείται. Ένα αντικείμενο που περιέχει στυλ CSS αντιπροσωπεύει το επιχείρημά του.

Φυσικά, τα στυλ που είναι κινούμενα στο CSS μεταφέρονται στη style(...)μέθοδο Angular . Βεβαίως, τίποτα αδύνατο για το CSS γίνεται ξαφνικά δυνατό με κινούμενα σχέδια γωνίας.

animate (χρονισμός: συμβολοσειρά | αριθμός, AnimationStyleMetadata | AnimationKeyframesMetadata)

Η animate(...)συνάρτηση δέχεται μια παράσταση χρονισμού ως το πρώτο όρισμα. Αυτό το όρισμα χρόνοι, ρυθμοί ή / και καθυστερεί την κίνηση της μεθόδου. Αυτό το όρισμα αποδέχεται είτε μια έκφραση αριθμού ή συμβολοσειράς. Η μορφοποίηση εξηγείται εδώ.

Το δεύτερο επιχείρημα animate(...)είναι η ιδιότητα CSS που εγγυάται την κινούμενη εικόνα. Αυτό παίρνει τη μορφή της style(...)μεθόδου που επιστρέφει AnimationStyleMetadata. Σκεφτείτε animate(...)ως τη μέθοδο που ξεκινά την κίνηση.

Μια σειρά από βασικά καρέ μπορεί επίσης να εφαρμοστεί στο δεύτερο όρισμα. Τα βασικά καρέ είναι μια πιο σύνθετη επιλογή που εξηγεί αυτό το άρθρο αργότερα. Τα βασικά καρέ διακρίνουν διάφορα τμήματα της κινούμενης εικόνας.

animate(...)ενδέχεται να μην λάβει δεύτερο επιχείρημα. Σε αυτήν την περίπτωση, ο χρόνος κίνησης της μεθόδου ισχύει μόνο για το CSS που αντικατοπτρίζεται στις state(...)μεθόδους. Οι αλλαγές ιδιοτήτων στις state(...)μεθόδους του κανόνα ετικέτας θα κινούνται.

μετάβαση (changExpr: string, AnimationMetadata | AnimationMetadata [], options ?: αντικείμενο)

animate(...)ξεκινά μια κίνηση ενώ transition(...)καθορίζει ποια κίνηση κινείται.

The first argument consists of a unique form of micro-syntax. It denotes a change in state (or change in data) taking place. The data bound to the template animation binding ([selector]="value") determines this expression. The upcoming section titled “Animation State” explains this concept a bit further.

The second argument of transition(...) comprises AnimationMetadata (returned by animate(...)). The argument accepts either an array of AnimationMetadata or a single instance.

The first argument’s value matches against the value of the data bound in the template ([selector]="value") . If a perfect match occurs, the argument evaluates successfully. The second argument then initiates an animation in response to the success of the first.

A list of options optionally occupies the third argument. The default transition(...) options should remain unchanged unless reasoned otherwise.

Animation Example

import { Component, OnInit } from '@angular/core'; import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ selector: 'app-example', template: ` 

Click the button to change its color!

Toggle Me! // animation binding `, animations: [ // metadata array trigger('toggleClick', [ // trigger block state('true', style({ // final CSS following animation backgroundColor: 'green' })), state('false', style({ backgroundColor: 'red' })), transition('true => false', animate('1000ms linear')), // animation timing transition('false => true', animate('1000ms linear')) ]) ] // end of trigger block }) export class ExampleComponent { isGreen: string = 'true'; toggleIsCorrect() { this.isGreen = this.isGreen === 'true' ? 'false' : 'true'; // change in data-bound value } }

The above example performs a very simple color swap with each button click. Of course, the color transitions quickly in a linear fade as per animate('1000ms linear'). The animation binds to the button by matching the first argument of trigger(...) to the [@toggleClick] animation binding.

The binding binds to the value of isGreen from the component class. This value determines the resulting color as set by the two style(...) methods inside the trigger(...) block. The animation binding is one-way so that changes to isGreen in the component class notify the template binding. That is, the animation binding [@toggleClick].

The button element in the template also has a click event bound to it. Clicking the button causes isGreen to toggle values. This changes the component class data. The animation binding picks up on this and invokes its matching trigger(...) method. The trigger(...) lies within the animations array of the component’s metadata. Two things occur upon the trigger’s invocation.

The first occurrence concerns the two state(...) methods. The new value of isGreen matches against a state(...) method’s first argument. Once it matches, the CSS styles of style(...) apply to the final state of the animation binding’s host element. `The final state takes effect following all animation.

Now for the second occurrence. The data change that invoked the animation binding compares across the two transition(...) methods. One of them matches the change in data to their first argument. The first button click caused isGreen to go from ‘true’ to ‘false’ (‘true => false’). That means the first transition(...) method activates its second argument.

The animate(...) function corresponding the successfully evaluated transition(...) method initiates. This method sets the duration of the animated color fade along with the fade’s pacing. The animation executes and the button fades to red.

This process can happen any number of times following a button click. The backgroundColor of the button will cycle between green and red in a linear fade.

Animation State

The transition(...) micro-syntax is worth addressing in detail. Angular determines animations and their timing by evaluating this syntax. There exists the following state transitions. They model a changes in data bound to an animation binding.

  • ‘someValue’ => ‘anotherValue’

An animation trigger where the bound data changes from ‘someValue’ to ‘anotherValue’.

  • ‘anotherValue’ => ‘someValue’

An animation trigger where the bound data changes from ‘anotherValue’ to ‘someValue’.

  • ‘someValue’ ‘anotherValue’

Data changes from ‘someValue` to ‘anotherValue’ or vice versa.

There also exists void and * states. void indicates that the component is either entering or leaving the DOM. This is perfect for entry and exit animations.

  • ‘someValue’ => void : host component of bound data is leaving the DOM
  • void => ‘someValue’ : host component of bound data is entering the DOM

* denotes a wildcard state. Wildcard states can interpret to “any state”. This includes void plus any other change to the bound data.

Keyframes

This article touched on the basics for animating Angular applications. Advanced animation techniques exist alongside these basics. Grouping together keyframes is one such technique. Its inspired from the @keyframes CSS rule. If you have worked with CSS @keyframes, you already understand how keyframes in Angular work. It becomes just a matter of syntax

The keyframes(...) method imports from @angular/animations. It passes into the second argument of animate(...) instead of the typical AnimationStyleMetadata. The keyframes(...) method accepts one argument as an array of AnimationStyleMetadata. This can also be referred to as an array of style(...) methods.

Each keyframe of the animation goes inside the keyframes(...) array. These keyframe elements are style(...) methods supporting the offset property. offset indicates a point in the animation’s duration where its accompanying style properties should apply. Its value spans from 0 (animation start) to 1 (animation end).

import { Component } from '@angular/core'; import { trigger, state, style, animate, transition, keyframes } from '@angular/animations'; @Component({ selector: 'app-example', styles: [ `.ball { position: relative; background-color: black; border-radius: 50%; top: 200px; height: 25px; width: 25px; }` ], template: ` 

Arcing Ball Animation

Arc the Ball! `, animations: [ trigger('animateArc', [ state('true', style({ left: '400px', top: '200px' })), state('false', style({ left: '0', top: '200px' })), transition('false => true', animate('1000ms linear', keyframes([ style({ left: '0', top: '200px', offset: 0 }), style({ left: '200px', top: '100px', offset: 0.50 }), style({ left: '400px', top: '200px', offset: 1 }) ]))), transition('true => false', animate('1000ms linear', keyframes([ style({ left: '400px', top: '200px', offset: 0 }), style({ left: '200px', top: '100px', offset: 0.50 }), style({ left: '0', top: '200px', offset: 1 }) ]))) ]) ] }) export class ExampleComponent { arc: string = 'false'; toggleBounce(){ this.arc = this.arc === 'false' ? 'true' : 'false'; } }

The main difference of the above example compared to the other example is the second argument of animate(...). It now contains a keyframes(...) method hosting an array of animation keyframes. While the animation itself is also different, the technique to animate is similar.

Clicking the button causes the button to arc across the screen. The arc moves as per the keyframes(...) method’s array elements (keyframes). At the animation’s mid-point (offset: 0.50), the ball changes trajectory. It descends to its original height as it continues across the screen. Clicking the button again reverses the animation.

left and top are animatable properties after setting position: relative; for the element. The transform property can perform similar movement-based animations. transform is an expansive yet fully animatable property.

Any number of keyframes can existing between offset 0 and 1. Intricate animation sequences take the form of keyframes. They are one of many advanced techniques in Angular animations.

Animations With Host Binding

You will undoubtedly come across the situation where you want to attach an animation to the HTML element of a component itself, instead of an element in the component’s template. This requires a little more effort since you can’t just go into the template HTML and attach the animation there. Instead, you’ll have to import HostBinding and utilize that.

The minimal code for this scenario is shown below. I’ll re-use the same animation condition for the code above for consistency and I don’t show any of the actual animation code since you can easily find that above.

import { Component, HostBinding } from '@angular/core'; @Component({ ... }) export class ExampleComponent { @HostBinding('@animateArc') get arcAnimation() { return this.arc; } }

The idea behind animating the host component is pretty much the same as animating a element from the template with the only difference being your lack of access to the element you are animating. You still have to pass the name of the animation (@animateArc) when declaring the HostBinding and you still have to return the current state of the animation (this.arc). The name of the function doesn’t actual matter, so arcAnimation could have been changed to anything, as long as it doesn’t clash with existing property names on the component, and it would work perfectly fine.

Conclusion

Αυτό καλύπτει τα βασικά στοιχεία του animation with Angular. Το Angular καθιστά τη ρύθμιση κινούμενων σχεδίων πολύ εύκολη χρησιμοποιώντας το Angular CLI. Για να ξεκινήσετε με την πρώτη σας κινούμενη εικόνα απαιτείται μόνο μια κατηγορία συστατικών. Θυμηθείτε, τα κινούμενα σχέδια καλύπτουν το πρότυπο του στοιχείου. Εξαγάγετε τον πίνακα μεταβάσεων από ένα ξεχωριστό αρχείο εάν σκοπεύετε να το χρησιμοποιήσετε σε πολλά στοιχεία.

Κάθε βοηθητικό πρόγραμμα / μέθοδος animation εξάγει από @angular/animations. Όλοι συνεργάζονται για να παρέχουν ένα ισχυρό σύστημα κινούμενων σχεδίων εμπνευσμένο από το CSS. Υπάρχουν περισσότερες μέθοδοι πέρα ​​από αυτό που θα μπορούσε να καλύψει αυτό το άρθρο.

Τώρα που γνωρίζετε τα βασικά, μη διστάσετε να εξερευνήσετε τους παρακάτω συνδέσμους για περισσότερα σχετικά με τις γωνιακές κινούμενες εικόνες.

Περισσότερες πληροφορίες για γωνιακές κινούμενες εικόνες:

  • Γωνιακή τεκμηρίωση
  • Πώς να χρησιμοποιήσετε κινούμενα σχέδια με το Angular 6