PropertyAnimation QML Type

Anime les changements de valeur des propriétés. Plus d'informations...

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

Propriétés

• 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

Description détaillée

PropertyAnimation permet d'animer les modifications de la valeur d'une propriété.

Il peut être utilisé pour définir des animations de différentes manières :

• Dans un Transition

  Par exemple, pour animer tous les objets dont les propriétés x ou y ont été modifiées à la suite d'un changement d'état, à l'aide d'une courbe d'assouplissement 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 }
      }
  }

• Dans un Behavior

  Par exemple, pour animer tous les changements de la propriété x d'un rectangle :

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

• En tant que source de la valeur de la propriété

  Par exemple, pour animer de façon répétée la propriété x du rectangle :

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

• Dans un gestionnaire de signal

  Par exemple, pour faire disparaître theObject lorsqu'on clique dessus :

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

• Autonome

  Par exemple, pour animer la propriété width de rect pendant 500 ms, de sa largeur actuelle à 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 }
  }

Selon la manière dont l'animation est utilisée, l'ensemble des propriétés normalement utilisées sera différent. Pour plus d'informations, voir la documentation relative à chaque propriété, ainsi que l'introduction à l'animation et aux transitions sur le site Qt Quick.

Notez que PropertyAnimation hérite du type abstrait Animation. Celui-ci comprend des propriétés et des méthodes supplémentaires permettant de contrôler l'animation.

Modifier les animations en cours

Depuis Qt XML 6.4, il est possible de définir les propriétés from, to, duration, et easing sur une animation de niveau supérieur pendant qu'elle est en cours d'exécution. L'animation prendra en compte les modifications lors de la prochaine boucle.

Voir aussi Animation et transitions dans Qt Quick et Qt Quick Exemples - Animation.

Documentation sur les propriétés

duration : int

Cette propriété indique la durée de l'animation, en millisecondes.

La valeur par défaut est 250.

easing group

Spécifie la courbe d'assouplissement utilisée pour l'animation

Pour spécifier une courbe d'assouplissement, vous devez au moins spécifier le type. Pour certaines courbes, vous pouvez également spécifier l'amplitude, la période et/ou le dépassement (plus de détails sont fournis après le tableau). La courbe d'assouplissement par défaut est Easing.Linear.

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

Les types disponibles sont les suivants :

Easing.Linear	Courbe d'assouplissement pour une fonction linéaire (t) : la vitesse est constante.
Easing.InQuad	Courbe d'assouplissement pour une fonction quadratique (t^2) : accélération à partir d'une vitesse nulle.
Easing.OutQuad	Courbe d'assouplissement pour une fonction quadratique (t^2) : décélération jusqu'à une vitesse nulle.
Easing.InOutQuad	Courbe d'assouplissement d'une fonction quadratique (t^2) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInQuad	Courbe d'assouplissement d'une fonction quadratique (t^2) : décélération jusqu'à la moitié, puis accélération.
Easing.InCubic	Courbe d'assouplissement d'une fonction cubique (t^3) : accélération à partir d'une vitesse nulle.
Easing.OutCubic	Courbe d'assouplissement d'une fonction cubique (t^3) : décélération jusqu'à une vitesse nulle.
Easing.InOutCubic	Courbe d'assouplissement d'une fonction cubique (t^3) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInCubic	Courbe d'assouplissement d'une fonction cubique (t^3) : décélération jusqu'à la moitié, puis accélération.
Easing.InQuart	Courbe d'assouplissement d'une fonction quartique (t^4) : accélération à partir d'une vitesse nulle.
Easing.OutQuart	Courbe d'assouplissement d'une fonction quartique (t^4) : décélération jusqu'à une vitesse nulle.
Easing.InOutQuart	Courbe d'assouplissement d'une fonction quartique (t^4) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInQuart	Courbe d'assouplissement d'une fonction quartique (t^4) : décélération jusqu'à la moitié, puis accélération.
Easing.InQuint	Courbe d'assouplissement d'une fonction quintique (t^5) : accélération à partir d'une vitesse nulle.
Easing.OutQuint	Courbe d'assouplissement d'une fonction quintique (t^5) : décélération jusqu'à une vitesse nulle.
Easing.InOutQuint	Courbe d'assouplissement d'une fonction quintique (t^5) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInQuint	Courbe d'assouplissement d'une fonction quintique (t^5) : décélération jusqu'à la moitié, puis accélération.
Easing.InSine	Courbe d'assouplissement d'une fonction sinusoïdale (sin(t)) : accélération à partir d'une vitesse nulle.
Easing.OutSine	Courbe d'assouplissement d'une fonction sinusoïdale (sin(t)) : décélération jusqu'à une vitesse nulle.
Easing.InOutSine	Courbe d'assouplissement d'une fonction sinusoïdale (sin(t)) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInSine	Courbe d'assouplissement d'une fonction sinusoïdale (sin(t)) : décélération jusqu'à la moitié, puis accélération.
Easing.InExpo	Courbe d'assouplissement d'une fonction exponentielle (2^t) : accélération à partir d'une vitesse nulle.
Easing.OutExpo	Courbe d'assouplissement d'une fonction exponentielle (2^t) : décélération jusqu'à une vitesse nulle.
Easing.InOutExpo	Courbe d'assouplissement d'une fonction exponentielle (2^t) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInExpo	Courbe d'assouplissement d'une fonction exponentielle (2^t) : décélération jusqu'à la moitié, puis accélération.
Easing.InCirc	Courbe d'assouplissement d'une fonction circulaire (sqrt(1-t^2)) : accélération à partir d'une vitesse nulle.
Easing.OutCirc	Courbe d'assouplissement d'une fonction circulaire (sqrt(1-t^2)) : décélération jusqu'à une vitesse nulle.
Easing.InOutCirc	Courbe d'assouplissement pour une fonction circulaire (sqrt(1-t^2)) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInCirc	Courbe d'assouplissement d'une fonction circulaire (sqrt(1-t^2)) : décélération jusqu'à la moitié, puis accélération.
Easing.InElastic	Courbe d'assouplissement pour une fonction élastique (onde sinusoïdale à décroissance exponentielle) : accélération à partir d'une vitesse nulle. L'amplitude du pic peut être définie à l'aide du paramètre amplitude, et la période de décroissance à l'aide du paramètre période.
Easing.OutElastic	Courbe d'assouplissement pour une fonction élastique (onde sinusoïdale à décroissance exponentielle) : décélération jusqu'à une vitesse nulle. L'amplitude du pic peut être définie à l'aide du paramètre amplitude, et la période de décroissance à l'aide du paramètre période.
Easing.InOutElastic	Courbe d'assouplissement pour une fonction élastique (onde sinusoïdale à décroissance exponentielle) : accélération jusqu'à la moitié, puis décélération.
Easing.OutInElastic	Courbe d'assouplissement d'une fonction élastique (sinusoïdale à décroissance exponentielle) : décélération jusqu'à la moitié, puis accélération.
Easing.InBack	Courbe d'assouplissement pour un dos (fonction cubique à dépassement : (s+1)*t^3 - s*t^2) assouplissement : accélération à partir d'une vitesse nulle.
Easing.OutBack	Courbe d'assouplissement pour un dos (fonction cubique de dépassement : (s+1)*t^3 - s*t^2) assouplissement : décélération jusqu'à une vitesse nulle.
Easing.InOutBack	Courbe d'assouplissement pour un dos (fonction cubique de dépassement : (s+1)*t^3 - s*t^2) easing in/out : accélération jusqu'à la moitié, puis décélération.
Easing.OutInBack	Courbe d'assouplissement pour un retour (fonction cubique d'assouplissement : (s+1)*t^3 - s*t^2) assouplissement vers l'extérieur/extérieur : décélération jusqu'à la moitié, puis accélération.
Easing.InBounce	Courbe d'assouplissement pour un rebond (rebond parabolique à décroissance exponentielle) fonction : accélération à partir d'une vitesse nulle.
Easing.OutBounce	Courbe d'assouplissement d'un rebond (rebond parabolique à décroissance exponentielle) fonction : décélération jusqu'à une vitesse nulle.
Easing.InOutBounce	Courbe d'assouplissement d'un rebond (rebond parabolique à décroissance exponentielle) fonction d'assouplissement : accélération jusqu'à la moitié, puis décélération.
Easing.OutInBounce	Courbe d'assouplissement pour une fonction de rebond (rebond parabolique à décroissance exponentielle) easing out/in : décélération jusqu'à la moitié, puis accélération.
Easing.BezierSpline	Courbe d'assouplissement personnalisée définie par la propriété easing.bezierCurve.

easing.amplitude ne s'applique qu'aux courbes de rebond et aux courbes élastiques (courbes de type Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic ou Easing.OutInElastic).

easing.overshoot n'est applicable que si easing.type est : Easing.InBack, Easing.OutBack, Easing.InOutBack ou Easing.OutInBack.

easing.period n'est applicable que si easing.type est : , , ou : Easing.InElastic, Easing.OutElastic, Easing.InOutElastic ou Easing.OutInElastic.

easing.bezierCurve n'est applicable que si easing.type est : Easing.BezierSpline. Cette propriété est une liste<réel> contenant des groupes de trois points définissant une courbe de 0,0 à 1,1 - control1, control2, end point : [cx1, cy1, cx2, cy2, endx, endy, ...]. Le dernier point doit être 1,1.

Voir les courbes d'assouplissement pour une démonstration des différents paramètres d'assouplissement.

exclude : list<QtObject> [read-only]

Cette propriété contient les éléments qui ne doivent pas être affectés par cette animation.

Voir aussi PropertyAnimation::targets.

from : variant

Cette propriété contient la valeur de départ de l'animation.

Si l'adresse PropertyAnimation est définie à l'intérieur d'une adresse Transition ou Behavior, cette valeur prend par défaut la valeur définie dans l'état de départ de l'adresse Transition, ou la valeur actuelle de la propriété au moment où l'adresse Behavior est déclenchée.

Voir également Animation et transitions à l'adresse Qt Quick.

Ces propriétés sont utilisées comme un ensemble pour déterminer les propriétés à animer. Les formes singulières et plurielles sont fonctionnellement identiques, par exemple

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

a la même signification que

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

Les formes singulières sont légèrement optimisées, de sorte que si vous n'avez qu'une seule cible/propriété à animer, vous devriez essayer de les utiliser.

La propriété targets permet de définir plusieurs cibles. Par exemple, ceci anime la propriété x de itemA et itemB:

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

Dans de nombreux cas, il n'est pas nécessaire de spécifier explicitement ces propriétés, car elles peuvent être déduites du cadre d'animation :

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()
    }
}

Comme le montre l'exemple ci-dessus, les propriétés sont spécifiées sous la forme d'une chaîne de noms de propriétés à animer, séparés par des virgules.

Voir également exclude et Animation et transitions dans Qt Quick.

to : variant

Cette propriété contient la valeur finale de l'animation.

Si PropertyAnimation est défini à l'intérieur de Transition ou Behavior, cette valeur est par défaut la valeur définie dans l'état final de Transition, ou la valeur du changement de propriété qui a déclenché Behavior.

Voir également Animation et transitions à l'adresse Qt Quick.