Miért érdemes használni az animációkat?

A modern webkomponensek gyakran használnak animációkat. A lépcsőzetes stíluslapok (CSS) felfedezik a fejlesztőket a lenyűgöző animációk létrehozásának eszközeivel. Tulajdonságátmenetek, egyedi elnevezésű animációk, többrészes kulcsképek lehetségesek a CSS-sel. A CSS-nek köszönhetően az animálható lehetőségek végtelenek.

Egy modern webalkalmazásban az animáció összpontosítja a felhasználó figyelmét. A jó animációk kielégítő, eredményes módon irányítják a felhasználó figyelmét. Az animációk nem lehetnek idegesítőek a felhasználó számára.

Az animációk visszajelzést kínálnak mozgás formájában. Megmutatják a felhasználónak, hogy az alkalmazás aktívan kezeli a kéréseiket. Olyan egyszerű dolog, mint egy látható gombnyomás vagy egy betöltő, amikor az alkalmazást be kell tölteni, leköti a felhasználó figyelmét.

Az animációk továbbra is egyre relevánsabbak Angular esetében. A Google fejleszti az Angulart, miközben népszerűsíti az anyagtervezés filozófiáját. Bátorítja a tömör felhasználói felületeket (UI), kiegészítve animált felhasználói visszajelzésekkel. Ez a webalkalmazások számára kissé élénknek és szórakoztatónak érzi magát.

A szögletes közösség kifejleszti az alap widget könyvtárat, amelynek neve Material2. Ez a projekt különféle widget modulokat ad hozzá az Angularhoz. Legtöbbjük animációkat tartalmaz. A működésük megértése érdekében ez a cikk a CSS-animációk tanulmányozását javasolja a tovább olvasás előtt.

A szögletes animációk a keretrendszer egyszerűsített verziója annak, amit a CSS natív módon nyújt. A CSS a böngészőben megjelenő szögletes animációk alapvető technológiája. A CSS azonban túlmutat e cikk keretein. Itt az ideje, hogy frontálisan foglalkozzon az Angular animációkkal.

Animációk beállítása

Az animáció előtt be BrowserAnimationsModulekell építeni a root modul import tömbjébe. Ez elérhető @angular/platform-browser/animations. Ez az NgModule biztosítja az animációk működését az adott platformon. Ez a cikk feltételezi az egyes példák szabványos webböngészőjét.

Szögletes animációk deklarálódnak a @Componentmetaadatokon belül . @Componentegy osztályt feldíszít, hogy megkülönböztesse azt az Angular alkotóelemeként. Metaadatai komponenskonfigurációkat tartalmaznak, beleértve a animations: []mezőt is. A mező minden tömbeleme egy animációs ravaszt ( AnimationTriggerMetadata) jelent.

Az animációk kizárólagosak a gazdakomponens számára a dekorátor metaadatain keresztül. Az animációk csak a gazdagép sablonjában használhatók. Az animációk nem öröklik a komponens gyermekeit. Ennek könnyű megoldása van.

Mindig létrehozhat egy külön fájlt, amely exportál egy tömböt. Bármely összetevő osztály importálhatja azt a tömböt a gazdagépfájljának tetejéről. Az importált tömb token ezután az összetevő animációs metaadataiba kerül. Ismételje meg ezt a folyamatot minden olyan összetevőnél, amelyhez ugyanazt a tömböt kell megadni az animációs metaadatokban.

A tartalmi vetítés lehetővé teszi az animációk alkalmazását az A komponens DOM (Document Object Model) tartalmára. B komponens, amely ezt a tartalmat becsomagolja A DOM kivetítheti a tartalmat a saját sablonjába. Miután ez megtörtént, az A komponens animációi nem tagadják. A B komponens tartalmi vetítésen keresztül integrálja A animációit.

RENDBEN. Tudja, hogyan kell beállítani az animációkat, és hol deklarálhatja őket. A megvalósítás a következő lépés.

Animációs módszerek

A szögletes animációk a következőkből importálható módszerhívások sorozatát használják @angular/animations. Az @Componentanimációs tömb minden eleme egyetlen módszerként kezdődik. Argumentumai magasabb rendű metódushívások sorozataként bontakoznak ki. Az alábbi lista bemutatja a szögletes animációk készítéséhez használt néhány módszert.

• trigger(selector: string, AnimationMetadata[])

visszatér AnimationTriggerMetadata

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

visszatér AnimationStateMetadata

• style(CSSKeyValues: object)

visszatér AnimationStyleMetadata

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

visszatér AnimationAnimateMetadata

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

visszatér AnimationTransitionMetadata

Bár bizonyosan több módszer közül lehet választani, ez az öt módszer kezeli az alapokat. Az, hogy megpróbálja megérteni ezeket az alapvető módszereket listaként, nem sokat segít. A bullet-bullet-magyarázatok, amelyeket egy példa követ, jobban megérthetik.

trigger (választó: karakterlánc, AnimationMetadata [])

A trigger(...)módszer az animáció tömbjébe foglalja az animáció egyetlen elemét.

A módszer első argumentuma selector: stringmegegyezik a [@selector]member attribútummal. Úgy működik, mint egy attribútum irányelv az összetevő sablonban. Lényegében egy attribútumválasztóval kapcsolja össze az animációs elemet a sablonnal.

A második érv egy tömb, amely az alkalmazható animációs módszerek listáját tartalmazza. A The trigger(...)tartja ezt egyetlen tömbben.

állapot (adatok: karakterlánc, AnimationStyleMetadata, opciók ?: objektum)

A state(...)módszer meghatározza az animáció végső állapotát. Az animáció befejezése után a CSS tulajdonságok listáját alkalmazza a célelemre. Ez az animált elem CSS-je megegyezik az animáció felbontásával.

Az első argumentum megegyezik az animáció-összerendeléshez kötött adatok értékével. Vagyis [@selector]a sablonban kötött érték megegyezik az a első argumentumával state(...). Az adatok értéke határozza meg a végső állapotot. Az érték megváltoztatása meghatározza az animáció eszközét (lásd transition(...)).

A második argumentum tartalmazza azokat a CSS-stílusokat, amelyek egy elem után-animációra vonatkoznak. A stílusok úgy kerülnek átadásra, hogy style(...)a kívánt stílusokat objektumként meghívják és argumentumába továbbítják.

Az opciók listája opcionálisan foglalja el a harmadik argumentumot. Az alapértelmezett state(...)opciók változatlanok maradjanak, hacsak másként nem indokolják.

stílus (CSSKeyValues: objektum)

Lehet, hogy AnimationStyleMetadataaz előző listában többször is észrevette . Az style(...)összetevő pontosan ezt a metaadatot adja vissza. Bárhol alkalmazzák a CSS stílusokat, a style(...)metódust meg kell hívni. A CSS stílusokat tartalmazó objektum kiáll az argumentuma mellett.

Természetesen a CSS-ben animálható stílusok átkerülnek az Angular style(...)módszerbe. Igaz, a CSS számára semmi lehetetlen hirtelen lehetségessé válik az Angular animációkkal.

animálás (időzítés: karakterlánc | szám, AnimationStyleMetadata | AnimationKeyframesMetadata)

A animate(...)függvény első argumentumként egy időzítési kifejezést fogad el. Ez az argumentum időzíti, ütemezi és / vagy késlelteti a módszer animációját. Ez az argumentum elfogad egy szám- vagy karakterlánc-kifejezést. A formázást itt magyarázzuk el.

A második érv animate(...)a CSS tulajdonság garantálja az animációt. Ez a style(...)visszatérő módszer formájában történik AnimationStyleMetadata. Gondoljon arra, animate(...)mint az animációt kezdeményező módszerre.

Kulcsképek sorozata is alkalmazható a második argumentumra. A kulcsképek egy fejlettebb lehetőség, amelyet ez a cikk később ismertet. A kulcsképek megkülönböztetik az animáció különféle szakaszait.

animate(...)lehet, hogy nem kap második érvet. Ebben az esetben a módszer animációs időzítése csak a state(...)metódusokban megjelenő CSS-re vonatkozik . A kiváltó state(...)módszereinek tulajdonságváltozásai animálódnak.

átmenet (changExpr: string, AnimationMetadata | AnimationMetadata [], options ?: object)

animate(...)transition(...)animációt kezdeményez, miközben meghatározza, melyik animációt kezdeményezi.

Az első argumentum a mikroszintaxis egyedi formájából áll. Jelzi az állapotváltozást (vagy az adatok változását). A sablonanimáció-kötéshez ( [selector]="value") kötött adatok határozzák meg ezt a kifejezést. A készülő „Animációs állapot” szakasz ezt a koncepciót egy kicsit tovább magyarázza.

A második argumentuma transition(...)tartalmazza AnimationMetadata(adja vissza animate(...)). Az argumentum egy tömböt AnimationMetadatavagy egy példányt fogad el .

Az első argumentum értéke megegyezik a sablonban ( [selector]="value") szereplő adatok értékével . Tökéletes egyezés esetén az érv sikeresen kiértékelődik. Ezután a második érv animációt indít az első sikerére reagálva.

Az opciók listája opcionálisan foglalja el a harmadik argumentumot. Az alapértelmezett transition(...)opciók változatlanok maradjanak, hacsak másként nem indokolják.

Animációs példa

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 } }

A fenti példa nagyon egyszerű színcserét hajt végre minden egyes gombnyomással. Természetesen a színek gyorsan elmozdulnak, lineárisan elhalványulnak animate('1000ms linear'). Az animáció úgy kötődik a gombhoz, hogy az első argumentumát illeszti trigger(...)az [@toggleClick]animációs kötéshez.

A kötés isGreena komponens osztály értékéhez kötődik . Ez az érték határozza meg a kapott színt, amelyet style(...)a trigger(...)blokkon belüli két módszer állít be . Az animáció-összerendelés egyirányú, így isGreena komponensosztály változásai értesítik a sablonkötést. Vagyis az animációs kötés [@toggleClick].

A sablonban található gombelemhez clickesemény is kapcsolódik. A gombra kattintva változik az isGreenérték. Ez megváltoztatja az összetevő osztály adatait. Az animációs kötés felveszi ezt és meghívja annak egyeztetési trigger(...)módszerét. A trigger(...)komponens metaadatainak animációs tömbjében rejlik. Két dolog történik a ravasz meghívásakor.

Az első előfordulás a két state(...)módszert érinti . A metódusok új értéke isGreenmegegyezik a state(...)módszer első argumentumával. Amint egyezik, a CSS-stílusok style(...)az animációs kötés gazdagépének végső állapotára vonatkoznak. A végső állapot minden animációt követően életbe lép.

Most a második előfordulás. Az animáció-összerendelést idéző ​​adatváltozás összehasonlítja a két transition(...)módszert. Az egyik az adatok változását az első érvükhöz illeszti. Az első gombnyomással isGreen„igaz” -ról „hamis” -ra váltott ('true => hamis'). Ez azt jelenti, hogy az első transition(...)módszer aktiválja a második argumentumot.

A animate(...)sikeresen kiértékelt transition(...)módszernek megfelelő függvény elindul. Ez a módszer beállítja az animált szín elhalványulásának időtartamát a halványodás ütemével együtt. Az animáció végrehajtódik, és a gomb pirosra vált.

Ez a folyamat egy gombnyomást követően akárhányszor megtörténhet. A backgroundColorgomb jelzője zöld és piros között mozog lineáris elhalványulással.

Animációs állapot

A transition(...)mikroszintaxissal érdemes részletesen foglalkozni. Az Angular ennek a szintaxisnak az értékelésével határozza meg az animációkat és azok időzítését. A következő állapotátmenetek vannak. Modellezik az animációkötéshez kötött adatok változását.

• ‘someValue’ => ‘anotherValue’

Animációindító, ahol a kötött adatok „someValue” -ról „anotherValue” -ra váltanak.

• ‘anotherValue’ => ‘someValue’

Animációindító, ahol a kötött adatok „anotherValue” -ról „someValue” -ra váltanak.

• ‘someValue’ ‘anotherValue’

Az adatok "someValue" értékről "anotherValue" értékre vagy fordítva váltanak.

Léteznek voidés *állapotok is. voidazt jelzi, hogy az összetevő vagy belép, vagy elhagyja a DOM-ot. Ez tökéletes be- és kilépés animációkhoz.

• ‘someValue’ => void: a kötött adatok gazdagép-összetevője elhagyja a DOM-ot
• void => ‘someValue’: a kötött adatok gazdagép-összetevője belép a DOM-ba

* 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

This covers the basics of animating with Angular. Angular makes setting up animations very easy using the Angular CLI. Getting started with your first animation only requires a single component class. Remember, animations scope to the component’s template. Export your transitions array from a separate file if you plan to use it across multiple components.

Every animation utility/method exports from @angular/animations. They all work together to provide a robust system of animation inspired from CSS. There are more methods beyond what this article could cover.

Now that you know the basics, feel free to explore the links below for more on Angular animations.

More info on Angular Animations:

• Angular Documentation
• How to use animation with Angular 6