Transition QML Type

Définit les transitions animées qui se produisent lors des changements d'état. En savoir plus...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• animations : list<Animation>
• enabled : bool
• from : string
• reversible : bool
• running : bool
• to : string

Description détaillée

Une transition définit les animations à appliquer lorsqu'un changement d'State se produit.

Par exemple, l'Rectangle suivante comporte deux états : l'état par défaut et un état « déplacé » ajouté. Dans l'état « déplacé », la position du rectangle passe à (50, 50). La transition ajoutée spécifie que lorsque le rectangle passe de l’état par défaut à l’état « déplacé », toute modification des propriétés x et y doit être animée à l’aide d’un effet de transition ( Easing.InOutQuad).

import QtQuick

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    states: State {
        name: "moved"; when: mouseArea.pressed
        PropertyChanges { target: rect; x: 50; y: 50 }
    }

    transitions: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

Notez que l’exemple ne nécessite pas de valeurs to et from pour la propriété NumberAnimation. Par souci de commodité, ces propriétés sont automatiquement définies sur les valeurs de x et y avant et après le changement d’état ; les valeurs from sont fournies par les valeurs actuelles de x et y, et les valeurs to sont fournies par l’objet PropertyChanges. Si vous le souhaitez, vous pouvez tout de même fournir des valeurs to et from pour remplacer les valeurs par défaut.

Par défaut, les animations d’une transition s’appliquent à tout changement d’état de l’élément parent. Les valeurs from et to de la transition peuvent être définies pour limiter l’application des animations au passage d’un état particulier à un autre.

Les animations de niveau supérieur au sein d’une transition s’exécutent en parallèle. Pour les exécuter séquentiellement, définissez-les au sein d’une SequentialAnimation:

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

Pour définir plusieurs transitions, spécifiez « Item::transitions » sous forme de liste :

    transitions: [
        Transition {
            from: "*"; to: "middleRight"
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 2000;
            }
        },
        Transition {
            from: "*"; to: "bottomLeft";
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 200;
            }
        },
        //If any other rectangle is clicked, the icon will return
        //to the start position at a slow speed and bounce.
        Transition {
            from: "*"; to: "*";
            NumberAnimation {
                easing.type: Easing.OutBounce;
                properties: "x,y";
                duration: 4000;
            }
        }
    ]

Si plusieurs transitions sont spécifiées, une seule (celle qui correspond le mieux) sera appliquée pour chaque changement d’état particulier. Dans l’exemple ci-dessus, si le rectangle entre dans un état autre que "middleRight" ou "bottomLeft", la troisième transition sera exécutée, ce qui signifie que l’icône sera déplacée vers le point de départ.

Si un changement d’état dispose d’une transition correspondant à la même propriété qu’une « Behavior », l’animation de la transition remplace l’« Behavior » pour ce changement d’état.

Voir également «Animation et transitions » dans Qt Quick, l’exemple « États », lesQt Quick d’états, et Qt Qml.

Documentation sur les propriétés

animations : list<Animation> [default read-only]

Cette propriété contient la liste des animations à exécuter pour cette transition.

    transitions: Transition {
        PropertyAnimation { duration: 3000 }
        ColorAnimation { duration: 3000 }
    }

Les animations de niveau supérieur s'exécutent en parallèle. Pour les exécuter séquentiellement, définissez-les au sein d'une ` SequentialAnimation` :

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

enabled : bool

Cette propriété détermine si la transition sera exécutée lors du passage de l'état « from » à l'état « to ».

Par défaut, une transition est activée.

Notez que, dans certaines circonstances, la désactivation d’une transition peut entraîner l’utilisation d’une autre transition à sa place. Dans l’exemple suivant, bien que la première transition ait été configurée pour animer les changements de « state1 » à « state2 », celle-ci a été désactivée en définissant enabled sur false; par conséquent, tout changement d’état de ce type sera en réalité animé par la deuxième transition à la place.

Item {
    states: [
        State { name: "state1" },
        State { name: "state2" }
    ]
    transitions: [
        Transition { from: "state1"; to: "state2"; enabled: false },
        Transition {
            // ...
        }
    ]
}

Ces propriétés indiquent les changements d'état qui déclenchent la transition.

La valeur par défaut de ces propriétés est « * » (c'est-à-dire n'importe quel état).

Par exemple, la transition suivante n’a pas défini les propriétés to et from; l’animation s’applique donc systématiquement lors du passage d’un état à l’autre (c’est-à-dire lorsque le bouton de la souris est enfoncé puis relâché).

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea { id: mouseArea; anchors.fill: parent }

    states: State {
        name: "brighter"; when: mouseArea.pressed
        PropertyChanges { target: rect; color: "yellow" }
    }

    transitions: Transition {
        ColorAnimation { duration: 1000 }
    }
}

Si la transition était modifiée comme suit :

transitions: Transition {
    to: "brighter"
    ColorAnimation { duration: 1000 }
}

L’animation ne s’appliquerait que lors du passage de l’état par défaut à l’état « plus lumineux » (c’est-à-dire lorsque le bouton de la souris est enfoncé, mais pas lors de son relâchement).

Il est possible de définir plusieurs valeurs pour « to » et « from » en utilisant une chaîne de caractères séparée par des virgules.

Voir également reversible.

reversible : bool

Cette propriété détermine si la transition doit être automatiquement inversée lorsque les conditions qui l'ont déclenchée sont inversées.

La valeur par défaut est « false ».

Par défaut, les transitions s'exécutent en parallèle et s'appliquent à tous les changements d'état si les états « from » et « to » n'ont pas été définis. Dans ce cas, la transition est automatiquement appliquée lorsqu'un changement d'état est annulé, et il n'est pas nécessaire de définir cette propriété pour inverser la transition.

Toutefois, si une transition « SequentialAnimation » est utilisée, ou si les propriétés « from » ou « to » ont été définies, cette propriété devra être définie pour inverser une transition lorsqu’un changement d’état est annulé. Par exemple, la transition suivante applique une animation séquentielle lorsque le bouton de la souris est enfoncé, et inverse la séquence de l’animation lorsque le bouton est relâché :

Rectangle {
    id: rect
    width: 100; height: 100
    color: "steelblue"

    TapHandler { id: tapHandler }

    states: State {
        name: "brighter"
        when: tapHandler.pressed
        PropertyChanges { target: rect; color: "lightsteelblue"; x: 50 }
    }

    transitions: Transition {
        to: "brighter"
        reversible: true
        SequentialAnimation {
            PropertyAnimation { property: "x"; duration: 1000 }
            ColorAnimation { duration: 1000 }
        }
    }
}

Si la transition n’a pas défini les valeurs to et reversible, alors, au relâchement de la souris, la transition diffusera l’ PropertyAnimation avant l’ ColorAnimation au lieu d’inverser la séquence.

running : bool [read-only]

Cette propriété indique si la transition est en cours d'exécution.