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

Εισαγωγή

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

Το Angular μας επιτρέπει να δημιουργούμε κινούμενες εικόνες που μας παρέχουν παρόμοια εγγενή απόδοση με τα κινούμενα σχέδια CSS. Σε αυτό το άρθρο, θα μάθουμε πώς μπορούμε να δημιουργήσουμε κινούμενα σχέδια χρησιμοποιώντας το Angular 6.

Θα χρησιμοποιήσουμε τον Visual Studio Code για την επίδειξή μας.

Προαπαιτούμενα

Εγκαταστήστε τον κωδικό VS και το Angular CLI.

Εάν είστε νέοι στο Angular, ανατρέξτε στο προηγούμενο άρθρο μου Ξεκινώντας με το Angular 6.0 για να ρυθμίσετε το περιβάλλον ανάπτυξης Angular 6 στο μηχάνημά σας.

Πηγαίος κώδικας

Κατεβάστε τον πηγαίο κώδικα από το GitHub.

Κατανόηση των καταστάσεων γωνιακής ζωτικότητας

Το animation περιλαμβάνει μετάβαση από τη μία κατάσταση ενός στοιχείου σε μια άλλη κατάσταση. Η γωνιά ορίζει τρεις διαφορετικές καταστάσεις για ένα στοιχείο:

  1. Void state - αντιπροσωπεύει την κατάσταση ενός στοιχείου που δεν αποτελεί μέρος του DOM. Αυτή η κατάσταση εμφανίζεται όταν δημιουργείται ένα στοιχείο αλλά δεν έχει ακόμη τοποθετηθεί στο DOM ή το στοιχείο αφαιρείται από το DOM. Αυτή η κατάσταση είναι χρήσιμη όταν θέλουμε να δημιουργήσουμε κινούμενα σχέδια ενώ προσθέτουμε ή αφαιρούμε ένα στοιχείο από το DOM μας. Για να ορίσουμε αυτήν την κατάσταση στον κώδικα μας χρησιμοποιούμε τη λέξη-κλειδί void.
  2. Η κατάσταση μπαλαντέρ - Αυτό είναι επίσης γνωστό ως η προεπιλεγμένη κατάσταση του στοιχείου. Τα στυλ που ορίζονται για αυτήν την κατάσταση ισχύουν για το στοιχείο ανεξάρτητα από την τρέχουσα κατάσταση κινούμενης εικόνας. Για να ορίσουμε αυτήν την κατάσταση στον κωδικό μας χρησιμοποιούμε το *σύμβολο.
  3. Προσαρμοσμένη κατάσταση - Αυτή είναι η προσαρμοσμένη κατάσταση του στοιχείου και πρέπει να οριστεί ρητά στον κώδικα. Για να ορίσουμε αυτήν την κατάσταση στον κωδικό μας, μπορούμε να χρησιμοποιήσουμε οποιοδήποτε προσαρμοσμένο όνομα της επιλογής μας.

Χρόνος μετάβασης κίνησης

Για να δείξουμε τη μετάβαση κίνησης από τη μία κατάσταση στην άλλη, ορίζουμε τον χρόνο μετάβασης κίνησης στην εφαρμογή μας.

Το Angular παρέχει τις ακόλουθες τρεις ιδιότητες χρονισμού:

Διάρκεια

Αυτή η ιδιότητα αντιπροσωπεύει το χρόνο που απαιτείται για την ολοκλήρωση της κίνησης από την αρχή (αρχική κατάσταση) έως το τέλος (τελική κατάσταση). Μπορούμε να καθορίσουμε τη διάρκεια της κινούμενης εικόνας με τους ακόλουθους τρεις τρόπους:

  • Χρησιμοποιώντας μια ακέραια τιμή για την αναπαράσταση του χρόνου σε χιλιοστά του δευτερολέπτου. Π.χ. 500
  • Χρησιμοποιώντας μια τιμή συμβολοσειράς για την αναπαράσταση του χρόνου σε χιλιοστά του δευτερολέπτου. Π.χ. «500ms»
  • Χρήση τιμής συμβολοσειράς για την αναπαράσταση του χρόνου σε δευτερόλεπτα Π.χ. «0,5 δευτ.»

Καθυστέρηση

Αυτή η ιδιότητα αντιπροσωπεύει τη διάρκεια μεταξύ της σκανδάλης κίνησης και της έναρξης της πραγματικής μετάβασης. Αυτή η ιδιότητα ακολουθεί επίσης την ίδια σύνταξη με τη διάρκεια. Για να καθορίσουμε την καθυστέρηση, πρέπει να προσθέσουμε την τιμή καθυστέρησης μετά την τιμή διάρκειας σε μορφή συμβολοσειράς - «Καθυστέρηση διάρκειας». Η καθυστέρηση είναι προαιρετική ιδιοκτησία.

Για παράδειγμα:

  • «0.3s 500ms». Αυτό σημαίνει ότι η μετάβαση θα περιμένει 500ms και στη συνέχεια θα τρέξει για 0,3 δευτερόλεπτα.

Ευκολία

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

Για παράδειγμα:

  • «0.3s 500ms easy-in» - Αυτό σημαίνει ότι η μετάβαση θα περιμένει 500ms και, στη συνέχεια, θα τρέχει για 0.3s (300ms) με εφέ ευκολίας.
  • «300ms ευκολία». - Αυτό σημαίνει ότι η μετάβαση θα εκτελεστεί για 300ms (0,3 δευτ.) Με εφέ ευκολίας.

Δημιουργία της εφαρμογής Angular 6

Ανοίξτε τη γραμμή εντολών στο μηχάνημά σας και εκτελέστε το ακόλουθο σύνολο εντολών:

  • mkdir ngAnimationDemo
  • cd ngAnimationDemo
  • ng νέο ngAnimation

Αυτές οι εντολές θα δημιουργήσουν έναν κατάλογο με το όνομα ngAnimationDemoκαι στη συνέχεια θα δημιουργήσουν μια γωνιακή εφαρμογή με το όνομα ngAnimationμέσα σε αυτόν τον κατάλογο.

Ανοίξτε την εφαρμογή ngAnimation χρησιμοποιώντας τον κωδικό VS. Τώρα θα δημιουργήσουμε το συστατικό μας.

Μεταβείτε στο View >> Integrated Terminal. Αυτό θα ανοίξει ένα παράθυρο τερματικού στον κώδικα VS.

Εκτελέστε την ακόλουθη εντολή για να δημιουργήσετε το στοιχείο.

ng g c animationdemo

Αυτό θα δημιουργήσει το στοιχείο μας animationdemoμέσα στο /src/appφάκελο.

Για να χρησιμοποιήσουμε το Angular animation πρέπει να εισαγάγουμε το BrowserAnimationsModuleοποίο είναι μια συγκεκριμένη ενότητα animation στην εφαρμογή μας. Ανοίξτε το αρχείο app.module.ts και συμπεριλάβετε τον ορισμό εισαγωγής όπως φαίνεται παρακάτω:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // other import definitions @NgModule({ imports: [BrowserAnimationsModule // other imports]})

Κατανόηση της σύνταξης γωνιακής ζωτικότητας

Θα γράψουμε τον κώδικα κίνησης μέσα στα μεταδεδομένα του στοιχείου. Η σύνταξη για την κινούμενη εικόνα εμφανίζεται παρακάτω:

@Component({ // other component properties. animations: [ trigger('triggerName'), [ state('stateName', style()) transition('stateChangeExpression', [Animation Steps]) ] ] })

Εδώ θα χρησιμοποιήσουμε μια ιδιότητα που ονομάζεται animations. Αυτή η ιδιότητα θα λάβει έναν πίνακα ως είσοδο. Ο πίνακας περιέχει ένα ή περισσότερα "trigger". Κάθε σκανδάλη έχει ένα μοναδικό όνομα και μια εφαρμογή. Η κατάσταση και οι μεταβάσεις για την κινούμενη εικόνα μας πρέπει να καθοριστούν στην εφαρμογή ενεργοποίησης.

Κάθε συνάρτηση κατάστασης έχει ένα "stateName" που ορίζεται για να προσδιορίσει μοναδικά την κατάσταση και μια συνάρτηση στυλ για να δείξει το στυλ του στοιχείου σε αυτήν την κατάσταση.

Each transition function has a stateChangeExpression defined to show the change of the state of an element and the corresponding array of animation steps to show how the transition will take place. We can include multiple trigger functions inside the animation property as comma separated values.

These functions trigger, and state and transition are defined in the @angular/animations module. Hence, we need to import this module in our component.

To apply animation on an element, we need to include the trigger name in the element definition. Include the trigger name followed by @ symbol in the element tag. Refer to the sample code below:

This will apply the trigger changeSize to the iv> element.

Let us create a few animations to get a better understanding of the Angular animation concepts.

Change Size Animation

We will create an animation to change the size of a iv> element on a button click.

Open the animationdemo.component.ts file and add the following import definition:

import { trigger, state, style, animate, transition } from '@angular/animations';

Add the following animation property definition in the component metadata:

animations: [ trigger('changeDivSize', [ state('initial', style({ backgroundColor: 'green', width: '100px', height: '100px' })), state('final', style({ backgroundColor: 'red', width: '200px', height: '200px' })), transition('initial=>final', animate('1500ms')), transition('final=>initial', animate('1000ms')) ]), ]

Here we have defined a trigger changeDivSize and two state functions inside the trigger. The element will be green in the “initial” state and will be red with an increased width and height in the “final” state.

We have defined transitions for the state change. Transition from “initial” state to “final” will take 1500ms and from “final” state to “initial” will take 1000ms.

To change the state of our element we will define a function in the class definition of our component. Include the following code in the AnimationdemoComponent class:

currentState = 'initial'; changeState() { this.currentState = this.currentState === 'initial' ? 'final' : 'initial'; }

Here we have defined a changeState method which will switch the state of the element.

Open animationdemo.component.html file and add the following code:

Change the div size

Change Size

We have defined a button which will invoke the changeState function when clicked. We have defined a iv> element and applied the animation tr igger changeDivSize to it. When we click on the button it will flip the state o f the element and its size will change with a transition effect.

Before executing the application, we need to include the reference to our Animationdemo component inside the app.component.html file.

Open app.component.html file. You can see we have some default HTML code in this file. Delete all the code and put the selector of our component as shown below:

To execute the code run the ng serve command in the VS code terminal window. After running this command, it will ask to open //localhost:4200 in the browser. So, open any browser on your machine and navigate to this URL. You can see a webpage as shown below. Click on the button to see the animation.

Balloon effect animation

In the previous animation, the transition happened in two directions. In this section, we will learn how to change the size from all directions. It will be similar to inflating and deflating a balloon, hence the name balloon effect animation.

Add the following trigger definition in the animation property:

trigger('balloonEffect', [ state('initial', style({ backgroundColor: 'green', transform: 'scale(1)' })), state('final', style({ backgroundColor: 'red', transform: 'scale(1.5)' })), transition('final=>initial', animate('1000ms')), transition('initial=>final', animate('1500ms')) ]),

Here, instead of defining the width and height property, we are using the transform property to change the size from all directions. The transition will occur when the state of the element is changed.

Add the following HTML code in the app.component.html file:

Balloon Effect

Here we have defined a div and applied the CSS style to make it a circle. Clicking on the div will invoke the changeState method to switch the element’s state.

Open the browser to see the animation in action as shown below:

Fade In and Fade Out animation

Sometimes we want to show animation while adding or removing an element on the DOM. We will see how to animate the addition and removal of an item to a list with a fade-in and fade-out effect.

Add the following code inside the AnimationdemoComponent class definition for adding and removing the element in a list:

listItem = []; list_order: number = 1; addItem() { var listitem = "ListItem " + this.list_order; this.list_order++; this.listItem.push(listitem); } removeItem() { this.listItem.length -= 1; }

Add the following trigger definition in the animation property:

trigger('fadeInOut', [ state('void', style({ opacity: 0 })), transition('void  *', animate(1000)), ]),

Here we have defined the trigger fadeInOut. When the element is added to the DOM it is a transition from void to wildcard (*) state. This is denoted using void =>; *. When the element is removed from the DOM, it is a transition from wildcard (*) to void state. This is denoted using * =>; void.

When we use the same animation timing for both directions of the animation, we use the shorthand syntax <;=>. As defined in this trigger, the animation from void =&gt; * and * => void will take 1000ms to complete.

Add the following HTML code in app.component.html file.

Fade-In and Fade-Out animation

Add List Remove List
  • {{list}}

Here we are defining two buttons to add items to and remove them from the list. We are binding the fadeInOut trigger to the <li> element, which will show a fade-in and fade-out effect while being added and removed from the DOM.

Open the browser to see the animation in action as shown below:

Enter and Leave animation

When adding to the DOM, the element will enter the screen from the left. When deleting, the element will leave the screen from the right.

The transition from void => * and * => void is very common. Therefore, Angular provides aliases for these animations:

  • for void => * we can use ‘:enter’
  • for * => void we can use ‘:leave’

The aliases make these transitions more readable and easier to understand.

Add the following trigger definition in the animation property:

trigger('EnterLeave', [ state('flyIn', style({ transform: 'translateX(0)' })), transition(':enter', [ style({ transform: 'translateX(-100%)' }), animate('0.5s 300ms ease-in') ]), transition(':leave', [ animate('0.3s ease-out', style({ transform: 'translateX(100%)' })) ]) ])

Here we have defined the trigger EnterLeave. The ‘:enter’ transition will wait for 300ms and then run for 0.5s with an ease-in effect. Whereas the ‘:leave transition will run for 0.3s with an ease-out effect.

Add the following HTML code in the app.component.html file:

Enter and Leave animation

Add List Remove List
  • {{list}}

Here we are defining two buttons to add items to and remove them from the list. We are binding the EnterLeave trigger to the <li> element that will show the enter and leave effect while being added and removed from the DOM.

Open the browser to see the animation in action as shown below:

Conclusion

In this article, we’ve learned about Angular 6 animations. We explored the concept of animation states and transitions. We also saw a few animations in action with the help of a sample application.

Please get the source code from GitHub and play around to get a better understanding.

If you’re preparing for interviews, read my article on C# Coding Questions For Technical Interviews.

See Also

  • ASP.NET Core — Using Highcharts With Angular 5
  • ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
  • CRUD Operations With ASP.NET Core Using Angular 5 And ADO.NET
  • ASP.NET Core — Getting Started With Blazor
  • CRUD Using Blazor with MongoDB
  • Creating An SPA Using Razor Pages With Blazor

Originally published at //ankitsharmablogs.com/