Animation et transitions dans Qt Quick

Types d'animations et de transitions

• Transition - Animer les transitions lors des changements d'état
• SequentialAnimation - Exécute les animations de manière séquentielle
• ParallelAnimation - Exécute les animations en parallèle
• Behavior - Spécifie une animation par défaut pour les changements de propriétés
• PropertyAction - Définit les changements de propriétés immédiats pendant l'animation
• PauseAnimation - Introduit une pause dans une animation
• SmoothedAnimation - Permet à une propriété de suivre une valeur en douceur
• SpringAnimation - Permet à une propriété de suivre une valeur dans un mouvement de type ressort
• ScriptAction - Exécute des scripts pendant une animation

Types qui animent les propriétés en fonction des types de données

Les animations sont créées en appliquant des types d'animation aux valeurs des propriétés. Les types d'animation interpolent les valeurs des propriétés pour créer des transitions douces. De même, les transitions d'état peuvent affecter des animations aux changements d'état.

Pour créer une animation, utilisez un type d'animation approprié pour le type de propriété à animer et appliquez l'animation en fonction du type de comportement requis.

Déclenchement des animations

Il existe plusieurs façons de définir l'animation d'un objet.

Animation directe de la propriété

Les animations sont créées en appliquant des objets d'animation aux valeurs des propriétés afin de modifier progressivement ces dernières au fil du temps. Ces animations de propriétés appliquent des mouvements fluides en interpolant les valeurs entre les changements de valeurs de propriétés. Les animations de propriétés fournissent des contrôles de temps et permettent différentes interpolations grâce à des courbes d'assouplissement.

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

Les types d'animation de propriété spécialisés ont des implémentations plus efficaces que le type PropertyAnimation. Ils permettent de définir des animations pour différents types QML tels que int, color, et des rotations. De même, le site ParentAnimation peut animer les changements de parent.

Voir la section Contrôle des animations pour plus d'informations sur les différentes propriétés d'animation.

Utilisation de cibles et de propriétés prédéfinies

Dans l'exemple précédent, les objets PropertyAnimation et NumberAnimation devaient spécifier des valeurs target et properties particulières pour indiquer les objets et les propriétés à animer. Cela peut être évité en utilisant la syntaxe <Animation> sur <Propriété>, qui spécifie l'animation à appliquer en tant que source de valeur de la propriété.

Vous trouverez ci-dessous deux objets PropertyAnimation spécifiés à l'aide de cette syntaxe :

import QtQuick 2.0

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

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

L'animation démarre dès que le rectangle est chargé et s'applique automatiquement à ses valeurs x et y. Puisque la syntaxe <Animation> sur <Propriété> a été utilisée, il n'est pas nécessaire de définir la valeur target des objets PropertyAnimation à rect, ni de définir les valeurs property à x et y.

Cette méthode peut également être utilisée pour les animations groupées afin de s'assurer que toutes les animations d'un groupe sont appliquées à la même propriété. Par exemple, l'exemple précédent pourrait utiliser SequentialAnimation pour animer la propriété color du rectangle, d'abord en jaune, puis en bleu :

import QtQuick 2.0

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

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

Comme l'objet SequentialAnimation a été spécifié sur la propriété color à l'aide de la syntaxe <Animation> sur <Propriété>, ses objets enfants ColorAnimation sont également appliqués automatiquement à cette propriété et n'ont pas besoin de spécifier les valeurs d'animation target ou property.

Transitions lors des changements d'état

Qt Quick States Les transitions lors des changements d'état sont des configurations de propriété où une propriété peut avoir différentes valeurs pour refléter différents états. Les changements d'état introduisent des changements de propriété abrupts ; les animations adoucissent les transitions pour produire des changements d'état visuellement attrayants.

Le type Transition peut contenir des types d'animation pour interpoler les changements de propriétés provoqués par les changements d'état. Pour affecter la transition à un objet, liez-la à la propriété transitions.

Un bouton peut avoir deux états, l'état pressed lorsque l'utilisateur clique sur le bouton et l'état released lorsque l'utilisateur relâche le bouton. Nous pouvons attribuer des configurations de propriétés différentes pour chaque état. Une transition animerait le passage de l'état pressed à l'état released. De même, il y aurait une animation lors du passage de l'état released à l'état 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}
        }
    ]
}

Le fait de lier les propriétés to et from au nom de l'état affectera cette transition particulière au changement d'état. Pour les transitions simples ou symétriques, la définition de la propriété to to avec le symbole du joker, "*", indique que la transition s'applique à n'importe quel changement d'état.

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

Animation par défaut en tant que comportements

Les animations des propriétés par défaut sont définies à l'aide d'animations de comportement. Les animations déclarées dans les types Behavior s'appliquent à la propriété et animent tout changement de valeur de la propriété. Toutefois, les types de comportement disposent d'une propriété enabled qui permet d'activer ou de désactiver volontairement les animations de comportement.

Une animation de comportement peut être affectée aux propriétés x, y et color d'un composant de type balle. L'animation de comportement peut être configurée pour simuler un effet élastique. En effet, cette animation comportementale applique l'effet élastique aux propriétés chaque fois que la balle se déplace.

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

Il existe plusieurs méthodes pour affecter des animations comportementales aux propriétés. La déclaration Behavior on <property> est un moyen pratique d'affecter une animation de comportement à une propriété.

Voir Qt Quick Examples - Animation pour une démonstration des animations comportementales.

Jouer des animations en parallèle ou en séquence

Les animations peuvent être exécutées en parallèle ou en séquence. Les animations parallèles jouent un groupe d'animations en même temps, tandis que les animations séquentielles jouent un groupe d'animations dans l'ordre : l'une après l'autre. Le regroupement des animations dans SequentialAnimation et ParallelAnimation permet de jouer les animations dans l'ordre ou en parallèle.

Un composant de bannière peut avoir plusieurs icônes ou slogans à afficher, l'un après l'autre. La propriété opacity peut être transformée en 1.0, qui désigne un objet opaque. En utilisant le type SequentialAnimation, les animations d'opacité seront jouées après la fin de l'animation précédente. Le type ParallelAnimation jouera les animations en même temps.

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

Une fois que des animations individuelles sont placées dans un SequentialAnimation ou un ParallelAnimation, elles ne peuvent plus être lancées et arrêtées indépendamment. L'animation séquentielle ou parallèle doit être lancée et arrêtée en tant que groupe.

Le type SequentialAnimation est également utile pour lire les animations de transition, car les animations sont jouées en parallèle à l'intérieur des transitions.

Contrôle des animations

Il existe différentes méthodes pour contrôler les animations.

Lecture de l'animation

Tous les types d'animation héritent du type Animation. Il n'est pas possible de créer des objets Animation; en revanche, ce type fournit les propriétés et méthodes essentielles des types d'animation. Les types d'animation disposent de start(), stop(), resume(), pause(), restart(), et complete() - toutes ces méthodes contrôlent l'exécution des animations.

Facilitation

Les courbes d'assouplissement définissent la manière dont l'animation interpolera entre la valeur de départ et la valeur d'arrivée. Différentes courbes d'assouplissement peuvent aller au-delà de la plage d'interpolation définie. Les courbes d'assouplissement simplifient la création d'effets d'animation tels que les effets de rebond, l'accélération, la décélération et les animations cycliques.

Un objet QML peut avoir une courbe d'assouplissement différente pour l'animation de chaque propriété. Il existe également différents paramètres pour contrôler la courbe, dont certains sont exclusifs à une courbe particulière. Pour plus d'informations sur les courbes d'assouplissement, consultez la documentation easing.

L'exemple d'assouplissement démontre visuellement chacun des différents types d'assouplissement.

Autres types d'animation

QML propose en outre plusieurs autres types utiles pour l'animation :

• PauseAnimationle type "pause", qui permet de faire des pauses pendant les animations
• ScriptAction: permet l'exécution de JavaScript pendant une animation, et peut être utilisé avec StateChangeScript pour réutiliser des scripts existants
• PropertyActionQML : modifie une propriété immédiatement pendant l'animation, sans animer le changement de propriété.

Il s'agit de types d'animation spécialisés qui animent différents types de propriétés.

• SmoothedAnimation NumberAnimation: un spécialisé qui permet des changements d'animation en douceur lorsque la valeur cible change.
• SpringAnimationLe type d'animation "spring" : permet une animation de type "spring" avec des attributs spécialisés tels que mass, damping et epsilon
• ParentAnimationLe type d'animation "parent" : utilisé pour animer un changement de parent (voir ParentChange)
• AnchorAnimationune propriété utilisée pour animer un changement d'ancre (voir AnchorChanges).

Partage des instances d'animation

Le partage des instances d'animation entre les transitions ou les comportements n'est pas pris en charge et peut entraîner un comportement indéfini. Dans l'exemple suivant, les changements de position du rectangle ne seront probablement pas animés correctement.

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 solution la plus simple consiste à répéter l'adresse NumberAnimation pour les deux comportements. Si l'animation répétée est plutôt complexe, vous pouvez également envisager de créer un composant d'animation personnalisé et d'en affecter une instance à chaque comportement, par exemple :

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