Transition QML Type

Define las transiciones animadas que se producen en los cambios de estado. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

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

Descripción detallada

Una transición define las animaciones que se aplicarán cuando se produzca un cambio en State.

Por ejemplo, el siguiente Rectangle tiene dos estados: el estado por defecto y un estado "movido" añadido. En el estado "movido", la posición del rectángulo cambia a (50, 50). La Transición añadida especifica que cuando el rectángulo cambia entre el estado por defecto y el estado "movido", cualquier cambio en las propiedades x y y debe ser animado, usando un 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 }
    }
}

Observe que el ejemplo no requiere los valores to y from para las propiedades NumberAnimation. Por comodidad, estas propiedades se establecen automáticamente en los valores de x y y antes y después del cambio de estado; los valores from son proporcionados por los valores actuales de x y y, y los valores to son proporcionados por el objeto PropertyChanges. Si lo desea, puede proporcionar los valores de to y from de todos modos para anular los valores predeterminados.

Por defecto, las animaciones de una Transición se aplican para cualquier cambio de estado en el elemento padre. Los valores from y to de la transición pueden establecerse para restringir las animaciones para que sólo se apliquen al cambiar de un estado concreto a otro.

Las animaciones de nivel superior dentro de una transición se ejecutan en paralelo. Para ejecutarlas secuencialmente, defínalas dentro de una SequentialAnimation:

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

Para definir varias transiciones, especifique Item::transitions como una lista:

    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 se especifican varias transiciones, sólo se aplicará una (la que mejor coincida) para cada cambio de estado. En el ejemplo anterior, si el Rectángulo entra en un estado distinto de "middleRight" o "bottomLeft", se llevará a cabo la tercera Transición, lo que significa que el icono se desplazará al punto de partida.

Si un cambio de estado tiene una Transición que coincide con la misma propiedad que Behavior, la animación de la Transición anula la de Behavior para ese cambio de estado.

Véase también Animación y transiciones en Qt Quick, Ejemplo de estados, Qt Quick Estados, y Qt Qml.

Documentación de propiedades

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

Esta propiedad contiene una lista de las animaciones que se ejecutarán para esta transición.

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

Las animaciones de nivel superior se ejecutan en paralelo. Para ejecutarlas secuencialmente, defínalas dentro de SequentialAnimation:

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

enabled : bool

Esta propiedad indica si la transición se ejecutará al pasar del estado from al estado to.

Por defecto, una Transición está activada.

Tenga en cuenta que, en algunas circunstancias, deshabilitar una Transición puede provocar que se utilice una Transición alternativa en su lugar. En el siguiente ejemplo, aunque la primera transición se ha configurado para animar los cambios de "estado1" a "estado2", esta transición se ha desactivado configurando enabled a false, por lo que cualquier cambio de estado será animado por la segunda transición.

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

Estas propiedades indican los cambios de estado que desencadenan la transición.

El valor por defecto para estas propiedades es "*" (es decir, cualquier estado).

Por ejemplo, la siguiente transición no tiene establecidas las propiedades to y from, por lo que la animación se aplica siempre que se cambia entre los dos estados (es decir, cuando se pulsa y suelta el ratón).

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 transición se cambiara por esta

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

La animación sólo se aplicaría al cambiar del estado por defecto al estado "más brillante" (es decir, cuando se pulsa el ratón, pero no al soltarlo).

Se pueden establecer múltiples valores de to y from utilizando una cadena separada por comas.

Véase también reversible.

reversible : bool

Esta propiedad establece si la transición debe revertirse automáticamente cuando se invierten las condiciones que desencadenaron esta transición.

El valor por defecto es false.

Por defecto, las transiciones se ejecutan en paralelo y se aplican a todos los cambios de estado si no se han establecido los estados from y to. En esta situación, la transición se aplica automáticamente cuando se invierte un cambio de estado, y no es necesario establecer esta propiedad para invertir la transición.

Sin embargo, si se utiliza SequentialAnimation, o si se han establecido las propiedades from o to, será necesario establecer esta propiedad para invertir una transición cuando se revierte un cambio de estado. Por ejemplo, la siguiente transición aplica una animación secuencial cuando se pulsa el ratón, e invierte la secuencia de la animación cuando se suelta el ratón:

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 transición no estableciera los valores to y reversible, entonces al soltar el ratón, la transición reproduciría el PropertyAnimation antes que el ColorAnimation en lugar de invertir la secuencia.

running : bool [read-only]

Esta propiedad indica si la transición se está ejecutando actualmente.