PropertyAnimation QML Type

Anime les modifications des valeurs des propriétés. En savoir plus…

• 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 apportées à 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 changé à la suite d’un changement d’état, en utilisant une courbe d’accélération de type « 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 toutes les modifications apportées à 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 valeur de propriété

  Par exemple, pour animer de manière 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 progressivement « theObject » lorsque l’on clique dessus :

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

• En mode autonome

  Par exemple, pour animer la propriété « width » d'rect sur 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 habituellement utilisées variera. Pour plus d’informations, consultez la documentation relative à chaque propriété, ainsi que l’introduction aux animations et transitions dans Qt Quick.

Notez que PropertyAnimation hérite du type abstrait Animation. Cela inclut des propriétés et des méthodes supplémentaires permettant de contrôler l’animation.

Modification d’animations en cours d’exécution

Depuis Qt 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 son exécution. L'animation tiendra compte de ces modifications lors de la boucle suivante.

Voir également «Animations et transitions » dans Qt Quick et « Exemples d’Qt Quick » - 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'accélération utilisée pour l'animation

Pour définir une courbe d'accélération, vous devez au moins préciser son type. Pour certaines courbes, vous pouvez également définir l'amplitude, la période et/ou le dépassement (plus de détails sont fournis après le tableau). La courbe d'accélération 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'accélération pour une fonction linéaire (t) : la vitesse est constante.
Easing.InQuad	Courbe d'accélération pour une fonction quadratique (t²) : accélération à partir d'une vitesse nulle.
Easing.OutQuad	Courbe d'accélération/décélération pour une fonction quadratique (t²) : décélération jusqu’à une vitesse nulle.
Easing.InOutQuad	Courbe d'accélération/décélération pour une fonction quadratique (t²) : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInQuad	Courbe d'accélération/décélération pour une fonction quadratique (t²) : décélération jusqu'à mi-parcours, puis accélération.
Easing.InCubic	Courbe d'accélération pour une fonction cubique (t³) : accélération à partir d'une vitesse nulle.
Easing.OutCubic	Courbe d'accélération/décélération pour une fonction cubique (t³) : décélération jusqu'à une vitesse nulle.
Easing.InOutCubic	Courbe d'accélération/décélération pour une fonction cubique (t³) : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInCubic	Courbe d'accélération/décélération pour une fonction cubique (t³) : décélération jusqu'à mi-parcours, puis accélération.
Easing.InQuart	Courbe d'accélération/décélération pour une fonction de quatrième degré (t^4) : accélération à partir d’une vitesse nulle.
Easing.OutQuart	Courbe d'accélération/décélération pour une fonction du quatrième degré (t^4) : décélération jusqu'à une vitesse nulle.
Easing.InOutQuart	Courbe d'accélération/décélération pour une fonction de quatrième degré (t^4) : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInQuart	Courbe d'accélération/décélération pour une fonction du quatrième degré (t^4) : décélération jusqu'à mi-parcours, puis accélération.
Easing.InQuint	Courbe d'accélération/décélération pour une fonction quintique (t^5) : accélération à partir d'une vitesse nulle.
Easing.OutQuint	Courbe d'accélération/décélération pour une fonction du cinquième degré (t^5) : décélération jusqu'à une vitesse nulle.
Easing.InOutQuint	Courbe d'accélération/décélération pour une fonction quintique (t^5) : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInQuint	Courbe d'accélération/décélération pour une fonction de cinquième degré (t^5) : décélération jusqu'à mi-parcours, puis accélération.
Easing.InSine	Courbe d'accélération/décélération pour une fonction sinusoïdale (sin(t)) : accélération à partir d'une vitesse nulle.
Easing.OutSine	Courbe d'accélération/décélération pour une fonction sinusoïdale (sin(t)) : décélération jusqu'à une vitesse nulle.
Easing.InOutSine	Courbe d'accélération/décélération pour une fonction sinusoïdale (sin(t)) : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInSine	Courbe d'accélération/décélération pour une fonction sinusoïdale (sin(t)) : décélération jusqu'à la moitié du parcours, puis accélération.
Easing.InExpo	Courbe d'accélération/décélération pour une fonction exponentielle (2^t) : accélération à partir d’une vitesse nulle.
Easing.OutExpo	Courbe d'accélération/décélération pour une fonction exponentielle (2^t) : décélération jusqu’à une vitesse nulle.
Easing.InOutExpo	Courbe d'accélération/décélération pour une fonction exponentielle (2^t) : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInExpo	Courbe d'accélération/décélération pour une fonction exponentielle (2^t) : décélération jusqu'à mi-parcours, puis accélération.
Easing.InCirc	Courbe d'accélération/décélération pour une fonction circulaire (√(1-t²)) : accélération à partir d'une vitesse nulle.
Easing.OutCirc	Courbe d'accélération/décélération pour une fonction circulaire (√(1-t²)) : décélération jusqu'à une vitesse nulle.
Easing.InOutCirc	Courbe d'accélération/décélération pour une fonction circulaire (√(1-t²)) : accélération jusqu’à mi-parcours, puis décélération.
Easing.OutInCirc	Courbe d'atténuation pour une fonction circulaire (√(1-t²)) : décélération jusqu'à mi-parcours, puis accélération.
Easing.InElastic	Courbe d'accélération/décélération pour une fonction élastique (onde sinusoïdale à décroissance exponentielle) : accélération à partir d'une vitesse nulle. L'amplitude maximale 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'accélération/décélération pour une fonction élastique (onde sinusoïdale décroissant de manière exponentielle) : décélération jusqu’à une vitesse nulle. L’amplitude maximale 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’accélération/décélération pour une fonction élastique (onde sinusoïdale à décroissance exponentielle) : accélération jusqu’à mi-parcours, puis décélération.
Easing.OutInElastic	Courbe d’accélération/décélération pour une fonction élastique (onde sinusoïdale à décroissance exponentielle) : décélération jusqu’à mi-parcours, puis accélération.
Easing.InBack	Courbe d'accélération/décélération pour une fonction « back » (fonction cubique avec dépassement : (s+1)*t^3 - s*t^2) : accélération à partir d’une vitesse nulle.
Easing.OutBack	Courbe d’accélération/décélération pour une fonction « back » (fonction cubique avec dépassement : (s+1)*t^3 - s*t^2) en sortie : décélération jusqu’à une vitesse nulle.
Easing.InOutBack	Courbe d'atténuation pour une fonction cubique à dépassement (s+1)*t^3 - s*t² avec accélération et décélération : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInBack	Courbe d’accélération/décélération pour un retour (accélération/décélération cubique avec dépassement : (s+1)*t^3 - s*t^2) : décélération jusqu’à mi-parcours, puis accélération.
Easing.InBounce	Courbe d’accélération pour une fonction de rebond (rebond parabolique à décroissance exponentielle) : accélération à partir d’une vitesse nulle.
Easing.OutBounce	Courbe d’accélération/décélération pour une fonction de rebond (rebond parabolique à décroissance exponentielle) : décélération jusqu’à une vitesse nulle.
Easing.InOutBounce	Courbe d'atténuation pour une fonction de rebond (rebond parabolique à décroissance exponentielle) avec accélération et décélération : accélération jusqu'à mi-parcours, puis décélération.
Easing.OutInBounce	Courbe d'accélération/décélération pour une fonction de rebond (rebond parabolique décroissant de manière exponentielle) avec accélération/décélération : décélération jusqu'à mi-parcours, puis accélération.
Easing.BezierSpline	Courbe d’accélération/décélération personnalisée définie par la propriété easing.bezierCurve.

easing.amplitude N'est applicable qu'aux courbes de rebond et é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 : 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 <real> contenant des groupes de trois points définissant une courbe allant de 0,0 à 1,1 – point de contrôle 1, point de contrôle 2, point final : [cx1, cy1, cx2, cy2, endx, endy, ...]. Le dernier point doit être 1,1.

Consultez la section « Courbes d’accélération » pour une démonstration des différents réglages d’accélération.

exclude : list<QtObject> [read-only]

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

Voir également PropertyAnimation::targets.

from : variant

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

Si l'PropertyAnimation est définie au sein d'un Transition ou d'un Behavior, cette valeur prend par défaut la valeur définie dans l'état initial de l'Transition, ou la valeur actuelle de la propriété au moment où l'Behavior est déclenchée.

Voir également «Animation et transitions » dans Qt Quick.

Ces propriétés sont utilisées comme ensemble pour déterminer quelles propriétés doivent être animées. Les formes au singulier et au pluriel 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 au singulier sont légèrement optimisées ; par conséquent, si vous n’avez qu’une seule cible ou propriété à animer, essayez de les utiliser.

La propriété ` targets ` permet de définir plusieurs cibles. Par exemple, cela anime la propriété ` x ` à la fois sur 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 par le moteur 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 » sur Qt Quick.

to : variant

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

Si l'PropertyAnimation est définie dans un Transition ou un Behavior, cette valeur prend par défaut la valeur définie dans l'état final de l'Transition, ou la valeur de la modification de propriété qui a déclenché l'Behavior.

Voir également «Animation et transitions » dans Qt Quick.