3. Définition de transitions
Une fois tous les états bien distincts pour chaque élément, l'ajout de transitions se fait
en un rien de temps. La différence est que l'attention se porte cette fois sur la propriété
transitions (au même niveau que states) : elle contiendra une liste de composants
Transition, d'un état (from) vers un autre (to). Chacune de ces transitions indiquera les
propriétés dont la valeur doit évoluer de manière plus douce lors du changement d'état,
avec une syntaxe identique à celle des changements d'état ; la différence est que la
transition ne donne pas de valeur à donner à une propriété, puisqu'elle ne fait
qu'adoucir le passage entre deux états, c'est-à-dire deux valeurs définies au niveau des
états.
Ici, nous utiliserons le type d'animation ColorAnimation, étant donné que la transition à
adoucir correspond à une couleur. D'autres types de transitions existent, comme les
PathAnimation pour déplacer des éléments le long d'une courbe définie.
SequentialAnimation impose que deux animations se déroulent l'une après l'autre,
tandis que Parallel​ Animation les fait se dérouler en simultané. [26]
Le code adapté sera très similaire au cas précédent, où les PropertyChanges sont
recopiés comme ColorAnimation en précisant la propriété à modifier sous properties
et le temps de l'animation sous duration :
ApplicationWindow {
// …
Rectangle {
// …
states: [
State { name: "blinkingOn"; … },
State { name: "blinkingOff"; …},
State {
name: "off"
PropertyChanges { target: red1; color: "black" }
}
]
transitions: [
Transition {
from: "off"; to: "blinkingOn"
ColorAnimation {
target: red1
properties: "color"
duration: 300
}
},
423