Animación y transiciones en Qt Quick

Tipos de animación y transiciones

• Transition - Anima transiciones durante cambios de estado
• SequentialAnimation - Ejecuta animaciones secuencialmente
• ParallelAnimation - Ejecuta animaciones en paralelo
• Behavior - Especifica una animación por defecto para los cambios de propiedades
• PropertyAction - Establece cambios inmediatos de propiedades durante la animación
• PauseAnimation - Introduce una pausa en una animación
• SmoothedAnimation - Permite que una propiedad siga suavemente un valor
• SpringAnimation - Permite que una propiedad siga un valor con un movimiento similar a un muelle
• ScriptAction - Ejecuta scripts durante una animación

Tipos que animan propiedades basadas en tipos de datos

Las animaciones se crean aplicando tipos de animación a los valores de las propiedades. Los tipos de animación interpolarán los valores de las propiedades para crear transiciones suaves. Además, las transiciones de estado pueden asignar animaciones a los cambios de estado.

Para crear una animación, utilice un tipo de animación apropiado para el tipo de propiedad que se va a animar, y aplique la animación dependiendo del tipo de comportamiento que se requiera.

Activación de animaciones

Existen varias formas de activar la animación de un objeto.

Animación directa de propiedades

Las animaciones se crean aplicando objetos de animación a los valores de las propiedades para cambiar gradualmente las propiedades a lo largo del tiempo. Estas animaciones de propiedades aplican movimientos suaves interpolando valores entre cambios de valores de propiedades. Las animaciones de propiedades proporcionan controles de temporización y permiten diferentes interpolaciones mediante curvas de flexibilización.

Rectangle {
    id: flashingblob
    width: 75; height: 75
    color: "blue"
    opacity: 1.0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animateColor.start()
            animateOpacity.start()
        }
    }

    PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}

    NumberAnimation {
        id: animateOpacity
        target: flashingblob
        properties: "opacity"
        from: 0.99
        to: 1.0
        loops: Animation.Infinite
        easing {type: Easing.OutBack; overshoot: 500}
   }
}

Los tipos especializados de animación de propiedades tienen implementaciones más eficientes que el tipo PropertyAnimation. Sirven para establecer animaciones a diferentes tipos de QML como int, color, y rotaciones. Del mismo modo, el ParentAnimation puede animar cambios de padre.

Consulte la sección Control de animaciones para obtener más información sobre las diferentes propiedades de animación.

Uso de objetivos y propiedades predefinidos

En el ejemplo anterior, los objetos PropertyAnimation y NumberAnimation necesitaban especificar valores particulares target y properties para especificar los objetos y propiedades que deberían ser animados. Esto puede evitarse utilizando la sintaxis <Animation> on <Property>, que especifica que la animación debe aplicarse como fuente de valor de la propiedad.

A continuación se muestran dos objetos PropertyAnimation que se especifican utilizando esta sintaxis:

import QtQuick 2.0

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

    PropertyAnimation on x { to: 100 }
    PropertyAnimation on y { to: 100 }
}

La animación comienza en cuanto se carga el rectángulo, y se aplicará automáticamente a sus valores x y y. Dado que se ha utilizado la sintaxis <Animation> on <Property>, no es necesario establecer el valor target de los objetos PropertyAnimation en rect, y tampoco es necesario establecer los valores property en x y y.

Esto también puede ser utilizado por animaciones agrupadas para asegurar que todas las animaciones dentro de un grupo se aplican a la misma propiedad. Por ejemplo, el ejemplo anterior podría utilizar SequentialAnimation para animar el rectángulo color primero a amarillo y luego a azul:

import QtQuick 2.0

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

    SequentialAnimation on color {
        ColorAnimation { to: "yellow"; duration: 1000 }
        ColorAnimation { to: "blue"; duration: 1000 }
    }
}

Dado que el objeto SequentialAnimation se ha especificado en la propiedad color utilizando la sintaxis <Animación> en <Propiedad>, sus objetos hijos ColorAnimation también se aplican automáticamente a esta propiedad y no es necesario especificar valores de animación target o property.

Transiciones durante los cambios de estado

Qt Quick States son configuraciones de propiedades en las que una propiedad puede tener diferentes valores para reflejar diferentes estados. Los cambios de estado introducen cambios bruscos en las propiedades; las animaciones suavizan las transiciones para producir cambios de estado visualmente atractivos.

El tipo Transition puede contener tipos de animación para interpolar los cambios de propiedad causados por los cambios de estado. Para asignar la transición a un objeto, enlácela a la propiedad transitions.

Un botón puede tener dos estados, el estado pressed cuando el usuario pulsa sobre el botón y un estado released cuando el usuario suelta el botón. Podemos asignar diferentes configuraciones de propiedades para cada estado. Una transición animaría el cambio del estado pressed al estado released. Del mismo modo, habría una animación durante el cambio del estado released al estado pressed.

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        onPressed: button.state = "PRESSED"
        onReleased: button.state = "RELEASED"
    }

    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]

    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

Vincular las propiedades to y from al nombre del estado asignará esa transición particular al cambio de estado. Para transiciones simples o simétricas, establecer la propiedad a to al símbolo comodín, "*", denota que la transición se aplica a cualquier cambio de estado.

    transitions:
        Transition {
            to: "*"
            ColorAnimation { target: button; duration: 100}
        }

Animación por defecto como comportamiento

Las animaciones por defecto de las propiedades se establecen utilizando animaciones de comportamiento. Las animaciones declaradas en los tipos Behavior se aplican a la propiedad y animan cualquier cambio de valor de la propiedad. Sin embargo, los tipos Behavior tienen una propiedad enabled para habilitar o deshabilitar a propósito las animaciones de comportamiento.

Un componente bola puede tener una animación de comportamiento asignada a sus propiedades x, y, y color. La animación de comportamiento podría configurarse para simular un efecto elástico. En efecto, esta animación de comportamiento aplicaría el efecto elástico a las propiedades cada vez que la pelota se mueva.

Rectangle {
    width: 75; height: 75; radius: width
    id: ball
    color: "salmon"

    component BounceAnimation : NumberAnimation {
       easing {
          type: Easing.OutElastic
          amplitude: 1.0
          period: 0.5
       }
    }

    Behavior on x {
        BounceAnimation {}
    }
    Behavior on y {
        BounceAnimation {}
    }
    Behavior on color {
        ColorAnimation { target: ball; duration: 100 }
    }
}

Existen varios métodos para asignar animaciones de comportamiento a las propiedades. La declaración Behavior on <property> es una forma conveniente de asignar una animación de comportamiento a una propiedad.

Consulte Qt Quick Ejemplos - Animación para ver una demostración de animaciones de comportamiento.

Reproducción de animaciones en paralelo o en secuencia

Las animaciones pueden ejecutarse en paralelo o en secuencia. Las animaciones en paralelo reproducirán un grupo de animaciones al mismo tiempo mientras que las animaciones en secuencia reproducirán un grupo de animaciones en orden: una tras otra. Agrupando animaciones en SequentialAnimation y ParallelAnimation reproducirá las animaciones en secuencia o en paralelo.

Un componente de banner puede tener varios iconos o eslóganes para mostrar, uno tras otro. La propiedad opacity podría transformarse en 1.0 denotando un objeto opaco. Utilizando el tipo SequentialAnimation, las animaciones de opacidad se reproducirán después de que finalice la animación precedente. El tipo ParallelAnimation reproducirá las animaciones al mismo tiempo.

Rectangle {
    id: banner
    width: 150; height: 100; border.color: "black"

    Column {
        anchors.centerIn: parent
        Text {
            id: code
            text: "Code less."
            opacity: 0.01
        }
        Text {
            id: create
            text: "Create more."
            opacity: 0.01
        }
        Text {
            id: deploy
            text: "Deploy everywhere."
            opacity: 0.01
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: playbanner.start()
    }

    SequentialAnimation {
        id: playbanner
        running: false
        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
    }
}

Una vez que las animaciones individuales se colocan en SequentialAnimation o ParallelAnimation, ya no pueden iniciarse y detenerse de forma independiente. La animación secuencial o paralela debe iniciarse y detenerse como un grupo.

El tipo SequentialAnimation también es útil para reproducir animaciones de transición porque las animaciones se reproducen en paralelo dentro de las transiciones.

Control de las animaciones

Existen diferentes métodos para controlar las animaciones.

Reproducción de animaciones

Todos los tipos de animación heredan del tipo Animation. No es posible crear objetos Animation; en su lugar, este tipo proporciona las propiedades y métodos esenciales para los tipos de animación. Los tipos de animación tienen start(), stop(), resume(), pause(), restart(), y complete() - todos estos métodos controlan la ejecución de las animaciones.

Animación

Las curvas de suavizado definen cómo la animación interpolará entre el valor inicial y el valor final. Diferentes curvas de flexibilización pueden ir más allá del rango de interpolación definido. Las curvas de atenuación simplifican la creación de efectos de animación como efectos de rebote, aceleración, desaceleración y animaciones cíclicas.

Un objeto QML puede tener diferentes curvas de flexión para cada propiedad de animación. También existen diferentes parámetros para controlar la curva, algunos de los cuales son exclusivos de una curva en particular. Para obtener más información sobre las curvas de relajación, visite la documentación de easing.

El ejemplo de easing demuestra visualmente cada uno de los diferentes tipos de easing.

Otros tipos de animación

Además, QML proporciona otros tipos útiles para la animación:

• PauseAnimation: permite hacer pausas durante las animaciones
• ScriptActionpermite ejecutar JavaScript durante una animación, y puede utilizarse junto con StateChangeScript para reutilizar scripts existentes
• PropertyActioncambia una propiedad inmediatamente durante una animación, sin animar el cambio de propiedad

Estos son tipos de animación especializados que animan diferentes tipos de propiedades

• SmoothedAnimation NumberAnimation especializado que proporciona cambios suaves en la animación cuando cambia el valor objetivo.
• SpringAnimationuna animación tipo muelle con atributos especializados como mass, damping y epsilon
• ParentAnimationutilizado para animar un cambio padre (ver ParentChange)
• AnchorAnimationse utiliza para animar un cambio de ancla (véase AnchorChanges)

Compartir instancias de animación

Compartir instancias de animación entre Transiciones o Comportamientos no está soportado, y puede conducir a un comportamiento indefinido. En el siguiente ejemplo, es muy probable que los cambios de posición del Rectángulo no se animen correctamente.

Rectangle {
    // NOT SUPPORTED: this will not work correctly as both Behaviors
    // try to control a single animation instance
    NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
    Behavior on x { animation: anim }
    Behavior on y { animation: anim }
}

La solución más sencilla es repetir NumberAnimation para ambos comportamientos. Si la animación repetida es bastante compleja, también puede considerar crear un componente de animación personalizado y asignar una instancia a cada Comportamiento, por ejemplo:

Rectangle {
    component MyNumberAnimation : NumberAnimation {
        duration: 300; easing.type: Easing.InBack
    }
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}