Transition QML Type

Définit les transitions animées qui se produisent lors des changements d'état. Plus d'informations...

• 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 se produit sur le site State.

Par exemple, le site Rectangle suivant a deux états : l'état par défaut et l'état "déplacé". Dans l'état "déplacé", la position du rectangle devient (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'une animation 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 requiert pas les valeurs to et from pour les propriétés NumberAnimation. Par commodité, ces propriétés sont automatiquement définies sur les valeurs 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 fournir les valeurs to et from de toute façon pour remplacer les valeurs par défaut.

Par défaut, les animations d'une Transition sont appliquées pour 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 premier niveau au sein d'une transition sont exécutées en parallèle. Pour les exécuter de manière séquentielle, définissez-les dans une transition 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 transition (celle qui correspond le mieux) sera appliquée pour tout 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 appliquée, ce qui signifie que l'icône sera déplacée vers le point de départ.

Si un changement d'état a une transition qui correspond à la même propriété qu'une Behavior, l'animation de la transition remplace la Behavior pour ce changement d'état.

Voir aussi Animation et transitions dans Qt Quick, exemple d'états, Qt Quick États, et Qt Qml.

Documentation sur les propriétés

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

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

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

Les animations de premier niveau sont exécutées en parallèle. Pour les exécuter de manière séquentielle, définissez-les dans un fichier SequentialAnimation:

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

enabled : bool

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

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

Il convient de noter 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é définie pour animer les changements de "state1" à "state2", cette transition a été désactivée en définissant enabled sur false, de sorte que tout changement d'état de ce type sera en fait 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, de sorte que l'animation est toujours appliquée lors du passage d'un état à l'autre (c'est-à-dire lorsque la souris est pressée et relâchée).

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 remplacée par celle-ci, l'animation ne serait appliquée que lors du passage d'un état à l'autre :

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

L'animation ne serait appliquée que lors du passage de l'état par défaut à l'état "plus lumineux" (c'est-à-dire lorsque la souris est enfoncée, mais pas lorsqu'elle est relâchée).

Plusieurs valeurs to et from peuvent être définies à l'aide d'une chaîne de caractères séparée par des virgules.

Voir également reversible.

reversible : bool

Cette propriété indique 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 sont appliquées à 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 inversé et il n'est pas nécessaire de définir cette propriété pour inverser la transition.

Cependant, si un SequentialAnimation est utilisé, 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 inversé. Par exemple, la transition suivante applique une animation séquentielle lorsque la souris est enfoncée et inverse la séquence de l'animation lorsque la souris est relâchée :

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, au relâchement de la souris, la transition jouera le PropertyAnimation avant le 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.