L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Animations angulaires personnalisées dans notre application de tâches à faire Kendo UI
Jusqu'à présent, dans les séries Kendo UI et Angular Unite, nous avons créé une application de tâches fonctionnelle, mais ce qui manque dans l'UX, c'est le mouvement! Apprenez à ajouter des animations à la fois élégantes et utiles pour nos utilisateurs.
Bienvenue à Angular et Kendo UI Unite. Si vous êtes nouveau dans la série, je vous suggère de consulter le premier post ou de regarder la série vidéo sur laquelle ces posts sont basés!
À ce stade, l'application Tâches nous avons construit est fonctionnel avec la possibilité d'ajouter et de supprimer des tâches à faire à la liste des tâches. Nous utilisons les boutons de Kendo UI et une entrée de zone de texte pour rendre cette interface opérationnelle. Les styles personnalisés permettent de modifier facilement les composants de Kendo UI. La seule chose qui manque dans l'UX est le mouvement! Certaines animations rendraient vraiment notre application éblouissante tout en fournissant des commentaires utiles ainsi qu'un modèle mental spatial à nos utilisateurs. Faisons-le!
C’est le post d’animations de notre série. Dans cet article, nous allons ajouter des Animations angulaires personnalisées à l'application des tâches que nous avons construite le dernier message pour lequel je suis tellement excité. Plongeons-nous dedans!
Suivez le code qui se trouve ici.
Donc, pour rappel, ce que nous avons construit dans le dernier post était juste cette simple liste de choses à faire. Si vous cliquez sur un élément de la liste, il le supprime. Si vous ajoutez un nouvel élément, il l’ajoute comme prévu.
Cette application pourrait donc sérieusement bénéficier d'un mouvement dans l'interface. Donc, je vais plonger directement dans l'ajout d'animations à ceci. Désormais, le package Angular Animations est inclus dans notre application. Et c'est parce que l'interface utilisateur de Kendo utilise des animations angulaires.
Maintenant, dans notre composant, nous allons ajouter une propriété de métadonnées, appelée animations et ça va prendre un tableau. À l'intérieur de c'est là que la magie se produit. Nous allons d’abord commencer par utiliser les extraits que j’ai faits. Le premier extrait concerne les tâches:
// todo.component.ts
import {Component, ViewEncapsulation} from '@ angular / core';
importer {trigger, transition, animation, style, animer, images clés} depuis '@ angular / animations';
@Composant({
sélecteur: 'todo',
encapsulation: ViewEncapsulation.None,
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.scss'],
animations: [
trigger('todoItem', [
transition(':enter', [
animate('0.5s cubic-bezier(.88,-0.19,.26,1.27)', keyframes([
style({
height: 0,
opacity: 0,
transform: 'translateX(-100%)'
}),
style({
height: '50px',
}),
style({
opacity: 1,
transform: 'translateX(0)'
})
]))
]),
transition (': quitter', [
style({ backgroundColor: '#df3920' }),
animate('0.5s cubic-bezier(.88,-0.19,.26,1.27)', keyframes([
style({
height: '50px',
opacity: 1,
transform: 'translateX(0)'
}),
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
style({
height: 0
}),
])),
]),
])
})
classe d'exportation TodoComponent {
…
}
Une animation est essentiellement composée d'un déclencheur. À l'intérieur, vous verrez la balise animate et la balise de style utilisées conjointement. Nous avons eu un peu de fantaisie et utilisé deux images clés sur cette première, mais il n'est évidemment pas nécessaire d'être aussi sophistiqué que nous sommes.
Pour utiliser cette animation, nous devons ajouter un déclencheur à un élément HTML. Nous allons donc ajouter un @todoItem et associer cette animation à cet élément (vous pouvez l'associer à n'importe quel élément).
Nous disons transition sur : entrez . : entrez est un alias, vous pouvez utiliser la version plus longue si vous le souhaitez: void => default .
Alias State transition
| : entrez | void => default |
| : leave | default => void |
Nous animons également sur 0,5 seconde (vous pouvez également dire 500 secondes, ce qui serait court pour des millisecondes) et nous utilisons une facilité d'intégration, puis notre image clé. ce qui se passera une étape à la fois. Cette première étape ici:
// todo.component.ts
style({
hauteur: 0,
opacité: 0,
transformer: 'translateX (-100%)'
}),
Donc, ce premier morceau de style commence avec nos styles avec une hauteur de zéro, une opacité de zéro et une transformation qui traduit un X de -100. Donc, si vous ne l’avez pas encore deviné, cela signifie qu’il va être éteint et invisible, à gauche de notre écran.
// todo.component.ts
style({
hauteur: '50px',
}),
Ensuite, nous allons leur donner une hauteur de 50 pixels.
// todo.component.ts
style({
opacité: 1,
transformer: 'translateX (0)'
})
Et enfin, définissez l'opacité sur un et transformez la traduction de X en 0. C'est donc le déplacer sur l'écran. Vous vous demandez peut-être: pourquoi changeons-nous la hauteur sur la marche du milieu? Ainsi, la liste des tâches à faire cède la place au nouvel élément à faire avant qu'il ne commence à bouger. Cela a juste un peu plus de sens.
Il s'agit donc d'une diapositive glorifiée en animation, très longue. Et ensuite, nous allons créer une autre animation qui fait exactement le contraire, comme vous pouvez vous y attendre. Ceci est l'animation coulissante, et bien sûr nous le faisons en congé:
// todo.component.ts
transition (': quitter', [
style({ backgroundColor: '#df3920' }),
animate('0.5s cubic-bezier(.88,-0.19,.26,1.27)', keyframes([
style({
height: '50px',
opacity: 1,
transform: 'translateX(0)'
}),
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
style({
height: 0
}),
])),
]),
Si nous allons au-dessus de maintenant et que nous cliquons sur ces éléments de liste de tâches, vous devriez les voir tous glisser assez doucement au fur et à mesure que vous les supprimez.
![gif d'article à supprimer animant (glissant) de l'écran [19659008] Et puis, si nous ajoutons un nouvel élément à remplacer, vous verrez que, comme je l’ai dit, la liste s’agrandira en fait, ce qui laissera de la place au nouvel élément avant qu’il ne glisse au centre de la page. C'est exactement ce que nous voulions. </p>
<p> <img decoding=](https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2018/11/1543614600_990_animations-angulaires-personnalisees-dans-notre-application-de-taches-a-faire-kendo-ui.gif?resize=660%2C64&ssl=1)
Cependant, ces animations à glisser et à extraire ne sont pas très réutilisables. Qu'est-ce que je veux dire par là? Eh bien, si nous voulions utiliser, par exemple, notre en-tête, notre entrée ou autre chose avec l'une de ces animations, il nous suffirait de réécrire tout cela.
Essayons de le faire d'une meilleure façon – nous allons commencer à créer nos super merveilleuses animations réutilisables en créant un fichier animations.ts .
L'intérieur de ce fichier contient les secrets de la magie. C’est là que nous allons créer une animation réutilisable. Nous l'appellerons slideIn, définissez-le comme une animation. C'est là que nous allons placer notre animation slideIn que nous venons de créer:
// animations.ts
exportation let slideIn = animation ([
animate('0.5s ease-in', keyframes([
style({
height: 0,
opacity: 0,
transform: 'translateX(-100%)'
}),
style({
height: '50px',
}),
style({
opacity: 1,
transform: 'translateX(0)'
})
]))
]);
Nous devons également nous rappeler d'importer ces éléments depuis Angular Animations dans le nouveau fichier:
// animations.ts
importer {animation, style, animer, images clés} de "@ angular / animations";
Nous pouvons maintenant utiliser cette animation réutilisable ici dans notre composant todo:
// todo.component.ts
import {slideIn, moveDown, slideOut} de './../animations';
import {trigger, transition, useAnimation} depuis '@ angular / animations';
…
trigger ('todoItem', [
transition(':enter', [
useAnimation(slideIn),
]),
…
])
Nous pouvons faire la même chose avec l'animation slideOut!
// todo.component.ts
import {slideIn, moveDown, slideOut} de './../animations';
import {trigger, transition, useAnimation} depuis '@ angular / animations';
@Composant({
sélecteur: 'todo',
encapsulation: ViewEncapsulation.None,
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.scss'],
animations: [
trigger ('todoItem', [
transition(':enter', [
useAnimation(slideIn),
]),
transition (': quitter', [
useAnimation(slideOut)
]),
])
]
})
Si nous les testons maintenant dans le navigateur, nous voyons que les tâches sont toujours en train de glisser! Maintenant que nous avons à peu près des animations angulaires et des animations réutilisables, je voulais vous présenter Query.
À l'intérieur de notre composant todo, dans les animations, je vais ajouter une autre animation.
// todo.component.ts
importer {trigger, transition, useAnimation, décalage, animateChild, requête, groupe} depuis '@ angular / animations';
…
déclencheur («todoAnimations», [
transition(':enter', [
group([
query('h1', [
useAnimation(moveDown)
]),
query ('input', [
useAnimation(moveDown)
]),
query ('@ todoItem',
décalage (100, animateChild ()))
])
])
]),
todoAnimations utilise quelques éléments supplémentaires que nous n'avons pas encore importés. Nous allons donc procéder aux opérations d'importation, de décalage, d'animation, de requête et de groupe. Et je vais vous guider à travers cette merveille.
Nous avons créé un déclencheur pour les animations de tâches. Comme promis dans le dernier post, nous avons un wrapper div qui contient tout notre code HTML à faire que nous n'utilisons pas. Eh bien, le moment est venu pour cette petite div de briller. Nous allons placer le déclencheur @todoAnimations !
Vous pouvez ainsi créer un déclencheur comme celui-ci, par exemple. Ensuite, à l'intérieur de cette enveloppe, vous pouvez interroger n'importe lequel de ces éléments, comme h1, ou une entrée, ce que je suis en train de faire, et leur donner une animation.
Comme vous le voyez dans l'animation, vous pouvez en réalité interroger d'autres éléments que les balises HTML. Voici une liste de sélecteurs de requête facultatifs:
Ainsi, lors de la transition, entrez, je dis à ce groupe, hé groupe, je veux que vous fassiez certaines choses lorsque vous entrez. Le premier est que je veux que vous descendiez le h1. Le second est, je veux que vous diminuiez l'entrée. D'accord? Assez simple, assez heureux. Le dernier est mon préféré, et il interroge les tâches que nous avons déjà à l'écran (en utilisant @todoItem ), et nous les décalons de 100 millisecondes. Ainsi, au lieu que les éléments à faire soient claqués ensemble sur la page, ils vont arriver l'un après l'autre, en décalant!
La dernière étape de cette splendeur est que nous devons créer l'animation moveDown que le H1 et Input utilisent tous deux.
// animations.ts
exportation let moveDown = animation ([
style({ transform: 'translateY(-20px)' }),
animate(200)
]);
Nous utilisons maintenant move dans notre requête pour H1 et Input. Ensuite, nous utilisons l’échelonnement pour que nos objets fassent, pour étaler leur animation, qui est donnée dans : entrez .
J'espère vraiment que vous avez aimé plonger dans les animations angulaires et en ajouter de personnalisées au-dessus de notre application Kendo UI et Angular To-Do. Dans le prochain article, nous avons quelques trucs amusants pour choisir le temps. Parce que qu'est-ce qu'un article à faire est vraiment, sans date d'échéance? Alors, merci beaucoup d'avoir regardé et j'espère que vous apprenez beaucoup. Et joyeux codage pour vous.
Si vous êtes nouveau dans Kendo UI pour Angular, vous pouvez en apprendre davantage ici ou simplement vous lancer dans un essai gratuit de 30 jours aujourd'hui. [19659060] Les commentaires sont désactivés en mode de prévisualisation.
Source link