États et transitions
Niveau : débutant à intermédiaire
Objectifs : structurer son interface à l'aide de machines d'états et rendre les animations
plus fluides avec les transitions
Prérequis : Premiers pas avec Qt Quick, Présentation de JavaScript (Utiliser la
méthodologie modèle - vue pour la section Section 4, Transitions et vues)
Bon nombre d'éléments d'une interface peuvent être décrits à l'aide d'états : par
exemple, un bouton est enfoncé ou ne l'est pas. Qt Quick intègre cette notion, ce qui
peut simplifier les réactions aux interactions de l'utilisateur. De plus, ces états sont un
marche-pied vers des transitions, qui donnent une apparence plus finie à l'application :
le passage d'un état à l'autre se fait progressivement avec des animations.
Dans le cas d'un bouton, l'état enfoncé correspondrait à une couleur plus sombre, créant
une impression de profondeur ; au contraire, l'état relâché correspondrait à une couleur
plus claire et l'impression que le bouton dépasse. Ces changements sont purement
esthétiques et peuvent être obtenus en modifiant les propriétés de certains composants
utilisés pour afficher le bouton. Les états de Qt Quick servent exactement à cela :
définir un ensemble de valeurs pour des propriétés. Lors d'un passage à un nouvel état,
toutes ces propriétés sont modifiées.
Cette notion d'état est, dans une interface graphique, rapidement liée à celle de
transition : si le bouton passe d'un état enfoncé à un état relâché de manière abrupte,
l'effet sera grossier et peu satisfaisant de nos jours (même si c'était encore la norme en
2010, avec la puissance de calcul limitée des ordinateurs de l'époque). Au contraire,
s'il se fait avec une petite animation qui montre le bouton s'affaisser, l'interface paraîtra
plus aboutie. De même, lors de modifications dans un modèle (ajout d'un livre pour
BiblioApp, par exemple), l'élément peut apparaître de manière douce à l'utilisateur :
l'image du livre qui passe de l'état transparent à opaque, notamment.
Figure 22.1 : Exemple d'animation lors de l'activation d'un bouton dans la barre des tâches de Windows 10
(vidéo)
416
Niveau : débutant à intermédiaire
Objectifs : structurer son interface à l'aide de machines d'états et rendre les animations
plus fluides avec les transitions
Prérequis : Premiers pas avec Qt Quick, Présentation de JavaScript (Utiliser la
méthodologie modèle - vue pour la section Section 4, Transitions et vues)
Bon nombre d'éléments d'une interface peuvent être décrits à l'aide d'états : par
exemple, un bouton est enfoncé ou ne l'est pas. Qt Quick intègre cette notion, ce qui
peut simplifier les réactions aux interactions de l'utilisateur. De plus, ces états sont un
marche-pied vers des transitions, qui donnent une apparence plus finie à l'application :
le passage d'un état à l'autre se fait progressivement avec des animations.
Dans le cas d'un bouton, l'état enfoncé correspondrait à une couleur plus sombre, créant
une impression de profondeur ; au contraire, l'état relâché correspondrait à une couleur
plus claire et l'impression que le bouton dépasse. Ces changements sont purement
esthétiques et peuvent être obtenus en modifiant les propriétés de certains composants
utilisés pour afficher le bouton. Les états de Qt Quick servent exactement à cela :
définir un ensemble de valeurs pour des propriétés. Lors d'un passage à un nouvel état,
toutes ces propriétés sont modifiées.
Cette notion d'état est, dans une interface graphique, rapidement liée à celle de
transition : si le bouton passe d'un état enfoncé à un état relâché de manière abrupte,
l'effet sera grossier et peu satisfaisant de nos jours (même si c'était encore la norme en
2010, avec la puissance de calcul limitée des ordinateurs de l'époque). Au contraire,
s'il se fait avec une petite animation qui montre le bouton s'affaisser, l'interface paraîtra
plus aboutie. De même, lors de modifications dans un modèle (ajout d'un livre pour
BiblioApp, par exemple), l'élément peut apparaître de manière douce à l'utilisateur :
l'image du livre qui passe de l'état transparent à opaque, notamment.
Figure 22.1 : Exemple d'animation lors de l'activation d'un bouton dans la barre des tâches de Windows 10
(vidéo)
416