PropertyAnimation QML Type

Anima los cambios en los valores de las propiedades. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• duration : int
• easing
  • easing.amplitude : real
  • easing.bezierCurve : list<real>
  • easing.overshoot : real
  • easing.period : real
  • easing.type : enumeration
• exclude : list<QtObject>
• from : variant
• properties : string
• property : string
• target : QtObject
• targets : list<QtObject>
• to : variant

Descripción detallada

PropertyAnimation proporciona una forma de animar los cambios en el valor de una propiedad.

Se puede utilizar para definir animaciones de varias maneras:

• En un Transition

  Por ejemplo, para animar cualquier objeto que haya cambiado sus propiedades x o y como resultado de un cambio de estado, utilizando una curva de relajación InOutQuad:

  Rectangle {
      id: rect
      width: 100; height: 100
      color: "red"
  
      states: State {
          name: "moved"
          PropertyChanges { target: rect; x: 50 }
      }
  
      transitions: Transition {
          PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
      }
  }

• En un Behavior

  Por ejemplo, para animar todos los cambios de la propiedad x de un rectángulo:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      Behavior on x { PropertyAnimation {} }
  
      MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
  }

• Como fuente de valores de propiedad

  Por ejemplo, para animar repetidamente la propiedad x del rectángulo:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      SequentialAnimation on x {
          loops: Animation.Infinite
          PropertyAnimation { to: 50 }
          PropertyAnimation { to: 0 }
      }
  }

• En un controlador de señal

  Por ejemplo, para desvanecer theObject al hacer clic:

  MouseArea {
      anchors.fill: theObject
      onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
  }

• Independiente

  Por ejemplo, para animar la propiedad width de rect durante 500ms, desde su ancho actual hasta 30:

  Rectangle {
      id: theRect
      width: 100; height: 100
      color: "red"
  
      // this is a standalone animation, it's not running by default
      PropertyAnimation { id: animation;
                          target: theRect;
                          property: "width";
                          to: 30;
                          duration: 500 }
  
      MouseArea { anchors.fill: parent; onClicked: animation.running = true }
  }

Dependiendo de cómo se utilice la animación, el conjunto de propiedades utilizadas normalmente será diferente. Para más información, consulte la documentación de cada propiedad, así como la introducción sobre Animación y transiciones en Qt Quick.

Tenga en cuenta que PropertyAnimation hereda el tipo abstracto Animation. Este incluye propiedades y métodos adicionales para controlar la animación.

Modificando animaciones en ejecución

Desde Qt 6.4, es posible establecer las propiedades from, to, duration, y easing en una animación de nivel superior mientras se está ejecutando. La animación tendrá en cuenta los cambios en el siguiente bucle.

Ver también Animación y Transiciones en Qt Quick y Qt Quick Ejemplos - Animación.

Documentación de Propiedades

duration : int

Esta propiedad contiene la duración de la animación, en milisegundos.

El valor por defecto es 250.

easing group

Especifica la curva de flexión utilizada para la animación.

Para especificar una curva de servidumbre es necesario especificar al menos el tipo. Para algunas curvas también se puede especificar la amplitud, el periodo y/o el rebasamiento (más detalles después de la tabla). La curva por defecto es Easing.Linear.

PropertyAnimation { properties: "y";
                    easing.type: Easing.InOutElastic;
                    easing.amplitude: 2.0;
                    easing.period: 1.5 }

Los tipos disponibles son:

Easing.Linear	Curva de relajación para una función lineal (t): la velocidad es constante.
Easing.InQuad	Curva de relajación para una función cuadrática (t^2): aceleración desde velocidad cero.
Easing.OutQuad	Curva de relajación para una función cuadrática (t^2): desaceleración hasta velocidad cero.
Easing.InOutQuad	Curva de relajación de una función cuadrática (t^2): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInQuad	Curva de relajación de una función cuadrática (t^2): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InCubic	Curva de relajación de una función cúbica (t^3): aceleración a partir de la velocidad cero.
Easing.OutCubic	Curva de relajación de una función cúbica (t^3): desaceleración hasta velocidad cero.
Easing.InOutCubic	Curva de relajación de una función cúbica (t^3): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInCubic	Curva de relajación de una función cúbica (t^3): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InQuart	Curva de relajación de una función cuártica (t^4): aceleración a partir de la velocidad cero.
Easing.OutQuart	Curva de relajación de una función cuártica (t^4): desaceleración hasta velocidad cero.
Easing.InOutQuart	Curva decreciente de una función cuádruple (t^4): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInQuart	Curva decreciente de una función cuártica (t^4): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InQuint	Curva de relajación de una función quíntica (t^5): aceleración a partir de la velocidad cero.
Easing.OutQuint	Curva de relajación de una función quíntica (t^5): desaceleración hasta velocidad cero.
Easing.InOutQuint	Curva de progresión de una función quíntica (t^5): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInQuint	Curva de progresión de una función quíntica (t^5): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InSine	Curva de relajación de una función sinusoidal (sin(t)): aceleración a partir de velocidad cero.
Easing.OutSine	Curva de relajación de una función sinusoidal (sin(t)): desaceleración hasta velocidad cero.
Easing.InOutSine	Curva de relajación de una función sinusoidal (sin(t)): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInSine	Curva de relajación de una función sinusoidal (sin(t)): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InExpo	Curva de relajación de una función exponencial (2^t): aceleración a partir de la velocidad cero.
Easing.OutExpo	Curva de relajación de una función exponencial (2^t): desaceleración hasta velocidad cero.
Easing.InOutExpo	Curva de relajación de una función exponencial (2^t): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInExpo	Curva de relajación de una función exponencial (2^t): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InCirc	Curva de relajación de una función circular (sqrt(1-t^2)): aceleración desde velocidad cero.
Easing.OutCirc	Curva de relajación de una función circular (sqrt(1-t^2)): desaceleración hasta velocidad cero.
Easing.InOutCirc	Curva de relajación de una función circular (sqrt(1-t^2)): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInCirc	Curva de relajación de una función circular (sqrt(1-t^2)): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InElastic	Curva de relajación para una función elástica (onda sinusoidal exponencialmente decreciente): aceleración desde velocidad cero. La amplitud del pico puede ajustarse con el parámetro amplitud, y el periodo de decaimiento con el parámetro periodo.
Easing.OutElastic	Curva de relajación para una función elástica (onda sinusoidal exponencialmente decreciente): desaceleración a velocidad cero. La amplitud del pico puede ajustarse con el parámetro amplitud y el periodo de decaimiento con el parámetro periodo.
Easing.InOutElastic	Curva de atenuación de una función elástica (sinusoidal exponencialmente decreciente): aceleración hasta la mitad y, a continuación, deceleración.
Easing.OutInElastic	Curva de atenuación de una función elástica (senoidal exponencialmente decreciente): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.InBack	Curva de relajación de una función cúbica (s+1)*t^3 - s*t^2) de retroceso: aceleración a partir de la velocidad cero.
Easing.OutBack	Curva de relajación para una espalda (función cúbica de rebasamiento: (s+1)*t^3 - s*t^2) relajación de salida: desaceleración a velocidad cero.
Easing.InOutBack	Curva de relajación para una espalda (función cúbica de rebasamiento: (s+1)*t^3 - s*t^2) aceleración/desaceleración: aceleración hasta la mitad, luego desaceleración.
Easing.OutInBack	Curva de relajación para un rebote (función cúbica de relajación: (s+1)*t^3 - s*t^2) relajación de entrada/salida: desaceleración hasta la mitad, luego aceleración.
Easing.InBounce	Curva de relajación para una función de rebote (rebote parabólico exponencialmente decreciente): aceleración desde velocidad cero.
Easing.OutBounce	Curva de relajación para una función de rebote (rebote parabólico exponencialmente decreciente): desaceleración hasta velocidad cero.
Easing.InOutBounce	Curva de relajación para una función de rebote (rebote parabólico exponencialmente decreciente): aceleración hasta la mitad, luego desaceleración.
Easing.OutInBounce	Curva de relajación para una función de rebote (rebote parabólico con decaimiento exponencial): desaceleración hasta la mitad y, a continuación, aceleración.
Easing.BezierSpline	Curva de relajación personalizada definida por la propiedad easing.bezierCurve.

easing.amplitude sólo es aplicable para curvas de rebote y elásticas (curvas de tipo Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic o Easing.OutInElastic).

easing.overshoot sólo es aplicable si easing.type es Easing.InBack, Easing.OutBack, Easing.InOutBack o Easing.OutInBack.

easing.period sólo es aplicable si easing.type es: Easing.InElastic, Easing.OutElastic, Easing.InOutElastic o Easing.OutInElastic.

easing.bezierCurve sólo es aplicable si easing.type es: Easing.BezierSpline. Esta propiedad es una lista<real> que contiene grupos de tres puntos que definen una curva de 0,0 a 1,1 - control1, control2, punto final: [cx1, cy1, cx2, cy2, endx, endy, ...]. El último punto debe ser 1,1.

Consulte las curvas de suavizado para ver una demostración de los distintos ajustes de suavizado.

exclude : list<QtObject> [read-only]

Esta propiedad contiene los elementos que no se verán afectados por esta animación.

Véase también PropertyAnimation::targets.

from : variant

Esta propiedad contiene el valor inicial de la animación.

Si PropertyAnimation se define dentro de Transition o Behavior, este valor es por defecto el valor definido en el estado inicial de Transition, o el valor actual de la propiedad en el momento en que se activa Behavior.

Véase también Animación y transiciones en Qt Quick.

Estas propiedades se utilizan como un conjunto para determinar qué propiedades deben animarse. Las formas singular y plural son funcionalmente idénticas, por ejemplo

NumberAnimation { target: theItem; property: "x"; to: 500 }

tiene el mismo significado que

NumberAnimation { targets: theItem; properties: "x"; to: 500 }

Las formas singulares están ligeramente optimizadas, por lo que si sólo tiene un único objetivo/propiedad que animar debería intentar utilizarlas.

La propiedad targets permite establecer múltiples objetivos. Por ejemplo, esto anima la propiedad x tanto de itemA como de itemB:

NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 }

En muchos casos no es necesario especificar explícitamente estas propiedades, ya que pueden deducirse del marco de animación:

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
    Behavior on y { NumberAnimation {} } //animate theRect's y property
}

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    Item { id: uselessItem }
    states: State {
        name: "state1"
        PropertyChanges {
            theRect {
                x: 200
                y: 200
                z: 4
            }
            uselessItem {
                x: 10
                y: 10
                z: 2
            }
        }
    }
    transitions: Transition {
        //animate both theRect's and uselessItem's x and y to their final values
        NumberAnimation { properties: "x,y" }

        //animate theRect's z to its final value
        NumberAnimation { target: theRect; property: "z" }
    }
}

Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    //need to explicitly specify target and property
    NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
    MouseArea {
        anchors.fill: parent
        onClicked: theAnim.start()
    }
}

Como se ve en el ejemplo anterior, las propiedades se especifican como una cadena separada por comas de nombres de propiedades a animar.

Véase también exclude y Animación y transiciones en Qt Quick.

to : variant

Esta propiedad contiene el valor final de la animación.

Si PropertyAnimation se define dentro de Transition o Behavior, este valor es por defecto el valor definido en el estado final de Transition, o el valor del cambio de propiedad que desencadenó Behavior.

Véase también Animación y transiciones en Qt Quick.