Animations en QML

Dans QML, les animations sont créées en utilisant les objets d'animation sur les valeurs des propriétés d'autres objets. Les objets d'animation sont créés à partir de l'ensemble d'éléments d'animation inclus de base dans QML. Elles peuvent servir à animer différents types de valeurs. De plus, les objets d'animation peuvent être appliqués de différentes manières selon le contexte dans lequel ils sont nécessaires.

Pour créer une animation, utilisez un élément d'animation approprié au type de la propriété qui doit être animée et appliquez l'animation selon le type de comportement voulu. Cette page décrit les types d'animation qui peuvent être créés et les éléments d'animation qui sont utilisés pour créer ces animations.

Types d'animation

Une animation est créée de manière différente selon le contexte dans lequel elle est utile. Supposez un mouvement de Rectangle qui consiste à changer les valeurs des propriétés x ou y en les animant. La sémantique de l'animation diffère selon ce que vous voulez créer :

• une animation qui déplace le Rectangle à une position connue, dès qu'il est créé ;
• une animation qui se déclenche seulement lorsque le Rectangle est déplacé par une source externe - par exemple, lorsque la souris est cliquée, le rectangle se déplace à la position de la souris ;
• une animation qui se déclenche lorsqu'un signal particulier est reçu ;
• une animation autonome qui n'est pas liée au mouvement du Rectangle mais qui peut être démarrée et arrêtée à partir d'un script ;
• une animation qui se déclenche lors d'un changement d'état.

Pour implémenter ces différentes méthodes d'animation, le QML propose plusieurs méthodes pour définir une animation, qui sont :

• de créer une animation utilisant les ''property value sources'', pour animer immédiatement la propriété spécifiée ;
• d'utiliser une animation de comportement, qui est déclenchée lorsqu'une propriété change de valeur ;
• D'utiliser un gestionnaire de signal, afin de déclencher l'animation lorsque le signal est reçu ;
• d'utiliser une animation autonome, qui peut être démarrée/stoppée à partir d'un script et reliée à plusieurs objets ;
• d'utiliser les transitions, pour fournir des animations entre les changements d'état.

Ces méthodes sont présentées ci-dessous. Remarquez que ces exemples utilisent PropertyAnimation, qui est l'un des nombreux éléments QML pouvant être utilisés pour créer une animation. Voir la section éléments d'animation plus loin pour plus de détails.

Animations utilisant les ''Property value Sources''

Une animation est appliquée à l'aide d'une property value source en utilisant la syntaxe Animation on Property. Voici un rectangle Rectangle dont le mouvement est animé avec cette méthode :

 import QtQuick 1.0
 
 Rectangle {
     width: 100; height: 100
     color: "red"
 
     PropertyAnimation on x { to: 50; duration: 1000; loops: Animation.Infinite }
     PropertyAnimation on y { to: 50; duration: 1000; loops: Animation.Infinite }
 }

Les PropertyAnimation sont appliquées sur les propriétés x et y de Rectangle de leur valeur actuelle (c'est-à-dire, zéro) à 50. Le changement s'effectue sur 1000 millisecondes. L'animation commence dès que le Rectangle est chargé. Pour animer les valeurs x et y d'une valeur spécifique au lieu de la valeur actuelle des propriétés, utilisez la propriété from de PropertyAnimation.

La spécification d'une animation à l'aide d'une property value source est utile pour animer, une seule fois, une propriété d'une valeur particulière dès que l'objet est chargé.

Animations de comportement

Souvent, une animation doit être effectuée à chaque fois que la valeur d'une propriété particulière change. Dans ces cas, un Behavior peut être utilisé pour spécifier une animation par défaut lors d'un changement de propriété. Voici un exemple :

 import QtQuick 1.0
 
 Item {
     width: 100; height: 100
 
     Rectangle {
         id: rect
         width: 100; height: 100
         color: "red"
 
         Behavior on x { PropertyAnimation { duration: 500 } }
         Behavior on y { PropertyAnimation { duration: 500 } }
     }
 
     MouseArea {
         anchors.fill: parent
         onClicked: { rect.x = mouse.x; rect.y = mouse.y }
     }
 }

Ce Rectangle possède des objets Behavior appliqués sur ses propriétés x et y. Chaque fois que ces propriétés changent (dans ce cas, lorsque la souris est cliquée dans l'élément Item parent), les objets PropertyAnimation définis dans les comportements Behavior vont être appliqués à ces propriétés, donc en animant le mouvement du Rectangle vers sa nouvelle position. Contrairement à la méthode définissant une animation à l'aide des ''property value source'', qui anime, une seule fois, une propriété à une valeur connue, une animation de comportement est une animation qui est déclenchée en réponse au changement de valeur.

Un quelconque changement de ces propriétés va déclencher leurs animations. Si x ou y étaient liés à d'autres propriétés et que ces propriétés changent, l'animation sera déclenchée. La propriété enabled peut être utilisée pour forcer un Behavior à être appliqué dans certaines circonstances.

Notez que contrairement aux animations basées sur les property value source, les propriétés from et to de PropertyAnimation n'ont pas besoin d'être définies car ces valeurs sont fournies, respectivement, par les valeurs courantes du Rectangle et les nouvelles valeurs définies dans le gestionnaire onClicked. Si ces propriétés avaient été définies, elles auraient remplacé les valeurs par défaut.

Voir l'exemple des comportements pour une démonstration des animations de comportement.

Animations dans un gestionnaire de signal

Une animation peut être créée à l'intérieur d'un gestionnaire de signal afin d'être déclenchée lorsque le signal est reçu. Par exemple :

 import QtQuick 1.0
 
 Rectangle {
     id: rect
     width: 100; height: 100
     color: "red"
 
     MouseArea {
         anchors.fill: parent
         onClicked: PropertyAnimation { target: rect; properties: "x,y"; to: 50; duration: 1000 }
     }
 }

La PropertyAnimation est déclenchée lorsque la MouseArea est cliquée, animant les propriétés x et y aux valeurs 50 après 1000 millisecondes. Comme l'animation n'est pas liée à une propriété ou à un objet particulier, elle doit définir les valeurs des propriétés target et property (ou targets et properties). La propriété to est nécessaire pour spécifier les nouvelles valeurs de x et y.

Animations autonomes

Les animations peuvent aussi être créées tels des objets QML ordinaires et ne sont liées à aucune propriété ou objet particulier. Voici un exemple, utilisant un objet PropertyAnimation. L'animation est explicitement démarrée lorsque le Rectangle est cliqué :

 import QtQuick 1.0
 
 Rectangle {
     id: rect
     width: 100; height: 100
     color: "red"
 
     PropertyAnimation {
         id: animation
         target: rect
         properties: "x,y"
         duration: 1000
     }
 
     MouseArea {
         anchors.fill: parent
         onClicked: {
             animation.to = 50;
             animation.running = true;
         }
     }
 }

Un objet d'animation autonome n'est pas exécuté par défaut et doit être démarré explicitement avec la propriété running ou à l'aide des méthodes start() et stop(). Comme l'animation n'est pas liée à une propriété ou à un objet particulier, il doit définir les valeurs des propriétés target et property (ou targets et properties). La propriété to est nécessaire pour spécifier les nouvelles valeurs de x et y. (La valeur from peut optionnellement être renseignée.)

Les animations autonomes sont utiles lorsqu'une animation n'est pas utilisée pour un objet unique et lorsque l'animation doit être explicitement démarrée ou arrêtée.

Transitions

Les transitions sont utilisées pour décrire les animations devant être appliquées lors d'un changement d'état. Pour créer une transition, définissez un objet Transition et ajoutez-le à la propriété transitions d'un élément. Voici un exemple :

 import QtQuick 1.0
 
 Rectangle {
     id: rect
     width: 100; height: 100
     color: "red"
 
     MouseArea {
         anchors.fill: parent
         onClicked: rect.state = "moved"
     }
 
     states: State {
         name: "moved"
         PropertyChanges { target: rect; x: 50; y: 50 }
     }
 
     transitions: Transition {
         PropertyAnimation { properties: "x,y"; duration: 1000 }
     }
 }

L'objet PropertyChanges dans l'état moved définit que lorsque le Rectangle est dans cet état, sa position doit être à (50, 50). Lorsque le Rectangle passe à l'état moved, la Transition sera déclenchée et la PropertyAnimation de la transition animera les changements sur les propriétés x et y vers leurs nouvelles valeurs. L'animation ne sera pas appliquée hors du moment du changement d'état.

Remarquez que l'exemple ne définit aucune valeur pour les propriétés from et to du PropertyAnimation. Par commodité, ces propriétés sont automatiquement définies aux valeurs de x et y avant et après le changement d'état, respectivement. Par contre, elles peuvent être définies explicitement si ces valeurs doivent être surchargées.

Remarquez aussi que la PropertyAnimation n'a pas besoin de spécifier un objet cible target ; n'importe quelle valeur x ou y de n'importe quel objet qui a changé au moment du changement d'état sera animée. Par contre, la cible peut être définie si l'animation doit se restreindre à certains objets.

Les animations de haut niveau dans une Transition sont exécutées en parallèle. Pour les exécuter les unes après les autres, utilisez une SequentialAnimation, comme présenté ci-dessous dans la section Groupement d'animation.

Voir la documentation de Transition pour plus d'informations.

Éléments d'animation

Pour créer une animation, choisissez l'un des éléments d'animation intégrés dans QML. Bien que les exemples ci-dessus aient utilisé une PropertyAnimation, d'autres éléments auraient pu être utilisés selon le type de propriété à animer ainsi que le nombre d'animations requises.

Tous les éléments d'animation héritent de l'élément Animation. Il n'est pas possible de créer des objets Animation ; par contre, cet élément fournit les propriétés et méthodes essentielles pour les éléments d'animation. Par exemple, il permet que les animations soient démarrées et stoppées à l'aide de la propriété running et des méthodes start() et stop(). Il définit aussi le nombre de boucles pour une animation.

Propriétés des éléments d'animation

La propriété PropertyAnimation est l'élément d'animation le plus simple pour animer une propriété. Elle peut être utilisée pour animer des propriétés real, int, color, rect, point, size et vector3d. Les éléments NumberAnimation, ColorAnimation, RotationAnimation et Vector3dAnimation héritent d'elle : NumberAnimation fournit une implémentation plus efficace pour l'animation des propriétés real et int et Vector3dAnimation fait de même pour les propriétés vector3d. ColorAnimation et RotationAnimation fournissent des attributs plus spécifiques pour le changement de couleurs et de rotations.

Une ColorAnimation permet d'avoir des couleurs comme valeurs des propriétés from et to. L'exemple suivant anime la propriété color du rectangle :

 Rectangle {
     width: 100; height: 100
 
     ColorAnimation on color { from: "red"; to: "yellow"; duration: 1000 }
 }

RotationAnimation permet de spécifier une direction de rotation. L'exemple suivant anime la propriété Item::rotation du rectangle :

 Item {
     width: 300; height: 300
 
     Rectangle {
         width: 100; height: 100; anchors.centerIn: parent
         color: "red"
 
         RotationAnimation on rotation { to: 90; direction: RotationAnimation.Clockwise }
     }
 }

De plus, il existe aussi les animations spécialisées suivantes :

• SmoothedAnimation : une spécialisation de NumberAnimation qui permet des changements doux dans l'animation lorsque les valeurs de la cible changent ;
• SpringAnimation : fournit une animation de sautillement à l'aide d'attributs spécialisés tels que la masse mass, le ralentissement damping et epsilon ;
• ParentAnimation : utilisée pour animer le changement d'un parent (voir ParentChange) ;
• AnchorAnimation : utilisée pour animer le changement d'une ancre (voir AnchorChanges).

Voir les pages de documentation respectives pour plus de détails.

Adoucissement

N'importe quelle animation basée sur PropertyAnimation peut spécifier l'attribut d'adoucissement easing pour contrôler l'adoucissement de la courbe appliquée lorsque la valeur est animée. Cela contrôle l'effet de l'animation de la propriété, afin de fournir des effets visuels comme le rebond, l'accélération et la décélération.

Le code suivant est une version modifiée de l'exemple précédent qui utilise Easing.OutBounce pour créer un effet de rebond lorsque l'animation atteint sa valeur cible :

 import QtQuick 1.0
 
 Rectangle {
     width: 100; height: 100
     color: "red"
 
     PropertyAnimation on x { to: 50; duration: 1000; easing.type: Easing.OutBounce }
     PropertyAnimation on y { to: 50; duration: 1000; easing.type: Easing.OutBounce }
 }

L'exemple d'adoucissement présente visuellement chaque type d'adoucissement.

Groupement d'animation

Plusieurs animations peuvent être combinées en une seule à l'aide d'un des éléments d'animation de groupe : ParallelAnimation ou SequentialAnimation. Dans une animation ParallelAnimation, les animations sont exécutées au même moment, alors qu'avec une SequentialAnimation les animations sont exécutées les unes après les autres.

Pour exécuter plusieurs animations, définissez les animations dans un groupe d'animation. L'exemple suivant crée une SequentialAnimation qui exécute trois animations l'une après l'autre : une NumberAnimation, une PauseAnimation et une autre NumberAnimation. La SequentialAnimation est appliquée avec une animation ''property value source'' sur la propriété y de l'image. Donc, l'animation démarre dès que l'image est chargée, déplaçant l'image de haut en bas :

 Rectangle {
     id: rect
     width: 120; height: 200
 
     Image {
         id: img
         source: "pics/qt.png"
         anchors.horizontalCenter: parent.horizontalCenter
         y: 0
 
         SequentialAnimation on y {
             loops: Animation.Infinite
             NumberAnimation { to: rect.height - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

Comme la SequentialAnimation est appliquée sur la propriété y, les animations individuelles du groupe sont automatiquement appliquées sur la propriété y ; elles n'ont pas besoin d'avoir une valeur pour la propriété properties.

Les animations de groupe peuvent être imbriquées. Voici un autre exemple plus complexe utilisant des animations parallèles et séquentielles :

 Rectangle {
     id: redRect
     width: 100; height: 100
     color: "red"
 
     MouseArea { id: mouseArea; anchors.fill: parent }
 
     states: State {
         name: "pressed"; when: mouseArea.pressed
         PropertyChanges { target: redRect; color: "blue"; y: mouseArea.mouseY; width: mouseArea.mouseX }
     }
 
     transitions: Transition {
 
         SequentialAnimation {
             ColorAnimation { duration: 200 }
             PauseAnimation { duration: 100 }
 
             ParallelAnimation {
                 NumberAnimation {
                     duration: 500
                     easing.type: Easing.OutBounce
                     targets: redRect
                     properties: "y"
                 }
 
                 NumberAnimation {
                     duration: 800
                     easing.type: Easing.InOutQuad
                     targets: redRect
                     properties: "width"
                 }
             }
         }
     }
 }

Une fois qu'une animation est placée dans une SequentialAnimation ou une ParallelAnimation, elle ne peut plus être démarrée ou arrêtée indépendamment. L'animation séquentielle ou parallèle doit être démarrée et stoppée tel un groupe.

Voir l'exemple sur les bases des animations pour une présentation de la création et la combinaison de multiples animations en QML.

Autres éléments d'animation

QML fournit plusieurs autres éléments utiles pour les animations :

• PauseAnimation : permet une pause entre les animations ;
• ScriptAction : permet à du code JavaScript d'être exécuté pendant une animation et peut être utilisé avec StateChangeScript pour réutiliser des scripts existants ;
• PropertyAction : change une propriété immédiatement pendant une animation sans animer ce changement de la propriété.

Voir leurs pages de documentation respectives pour plus de détails.

Remerciements

Merci à Alexandre Laurent pour la traduction ainsi qu'à Dimitry Ernot, Jonathan Courtois et Claude Leloup pour leur relecture !