Animations et transitions dans Qt Quick

Types d’animations et de transitions

• Transition - Anime 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 modifications de propriétés
• PropertyAction - Définit des modifications immédiates de propriété pendant l'animation
• PauseAnimation - Insère 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 avec 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 afin de créer des transitions fluides. De même, les transitions d'état peuvent associer des animations aux changements d'état.

Pour créer une animation, utilisez un type d’animation adapté au type de la propriété à animer, puis appliquez l’animation en fonction du comportement souhaité.

Déclenchement des animations

Il existe plusieurs façons d'appliquer une animation à un objet.

Animation directe des propriétés

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 génèrent des mouvements fluides en interpolant les valeurs entre les changements de valeur des propriétés. Les animations de propriétés offrent des contrôles de synchronisation et permettent différentes interpolations grâce à des courbes d'accélération/décélération.

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'animations de propriétés spécialisés disposent d'implémentations plus efficaces que le type « PropertyAnimation ». Ils permettent de définir des animations pour différents types QML tels que les int, les color s et les rotations. De même, l'ParentAnimation permet d'animer les changements de parent.

Reportez-vous à la section « Contrôle des animations » pour plus d’informations sur les différentes propriétés d’animation.

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

Dans l'exemple précédent, les objets ` PropertyAnimation ` et ` NumberAnimation ` devaient spécifier des valeurs particulières pour ` target ` et ` properties ` afin de définir les objets et les propriétés à animer. Il est possible d'éviter cela en utilisant la syntaxe `<Animation> sur <Property> `, qui précise que l'animation doit être appliquée en tant que source de valeur de propriété.

Voici deux objets « PropertyAnimation » définis à 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. La syntaxe <Animation> sur <Property> ayant été utilisée, il n’est pas nécessaire de définir la valeur target des objets PropertyAnimation sur rect, ni de définir les valeurs property sur x et y.

Cette méthode peut également être utilisée par les animations groupées pour garantir que toutes les animations d'un groupe s'appliquent à la même propriété. Par exemple, l'exemple précédent pourrait plutôt 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 <Property> `, ses objets enfants ` ColorAnimation ` s’appliquent également automatiquement à cette propriété et il n’est pas nécessaire de spécifier les valeurs d’animation ` target ` ou ` property `.

Transitions lors des changements d’état

Qt Quick States Il s’agit de configurations de propriétés dans lesquelles une propriété peut prendre différentes valeurs pour refléter différents états. Les changements d’état entraînent des modifications brusques des propriétés ; les animations adoucissent ces transitions afin de produire des changements d’état visuellement agréables.

Le type « Transition » peut contenir des types d’animation permettant d’interpoler les modifications de propriétés provoquées par les changements d’état. Pour attribuer une transition à un objet, associez-la à la propriété « transitions ».

Un bouton peut présenter deux états : l’état « pressed » lorsque l’utilisateur clique sur le bouton et l’état « released » lorsqu’il le relâche. Il est possible d’attribuer des configurations de propriétés différentes à chaque état. Une transition permettrait d’animer le passage de l’état « pressed » à l’état « released ». De même, une animation serait appliquée 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}
        }
    ]
}

En associant les propriétés to et from au nom de l’état, on attribuera cette transition particulière au changement d’état. Pour les transitions simples ou symétriques, définir la propriété to sur le caractère générique «* » indique que la transition s’applique à tout changement d’état.

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

Animation par défaut en tant que comportements

Les animations de 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 celle-ci. Cependant, les types de comportement disposent d’une propriété « enabled » permettant d’activer ou de désactiver délibérément les animations de comportement.

Un composant « balle » peut se voir attribuer une animation de comportement sur ses propriétés « x », « y » et « color ». Cette animation de comportement peut être configurée pour simuler un effet élastique. Concrètement, cette animation de comportement appliquerait 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 attribuer des animations de comportement à des propriétés. La déclaration ` Behavior on <property> ` est un moyen pratique d’attribuer une animation de comportement à une propriété.

Consultez la section « Exemples d’Qt Quick s – Animation » pour une démonstration des animations comportementales.

Lecture d'animations en parallèle ou en séquence

Les animations peuvent s'exécuter en parallèle ou en séquence. Les animations parallèles permettent de lire un groupe d'animations simultanément, tandis que les animations séquentielles les lisent dans l'ordre, l'une après l'autre. Le regroupement d'animations dans SequentialAnimation et ParallelAnimation permet de les lire en séquence ou en parallèle.

Un composant bannière peut comporter plusieurs icônes ou slogans à afficher, les uns après les autres. La propriété opacity peut être remplacée par 1.0, ce qui désigne un objet opaque. Avec le type SequentialAnimation, les animations d’opacité s’exécuteront une fois l’animation précédente terminée. Le type ParallelAnimation permettra de lire les animations simultanément.

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 les animations individuelles sont placées dans un ` SequentialAnimation ` ou un ` ParallelAnimation`, elles ne peuvent plus être lancées ou 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 des animations de transition, car celles-ci sont lues en parallèle au sein des transitions.

Contrôle des animations

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

Lecture des animations

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

Accélération

Les courbes d’accélération définissent la manière dont l’animation s’interpole entre la valeur de départ et la valeur finale. Certaines courbes d’accélération peuvent dépasser la plage d’interpolation définie. Elles simplifient la création d’effets d’animation tels que les rebonds, l’accélération, la décélération et les animations cycliques.

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

L'exemple d'accélération illustre visuellement chacun des différents types d'accélération.

Autres types d'animation

De plus, QML propose plusieurs autres types utiles pour l'animation :

• PauseAnimation: permet d'insérer des pauses pendant les animations
• ScriptAction: permet d'exécuter du code JavaScript pendant une animation et peut être utilisé conjointement avec ` StateChangeScript ` pour réutiliser des scripts existants
• PropertyAction: modifie immédiatement une propriété au cours d'une 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: une animation « NumberAnimation » spécialisée qui assure des transitions fluides lorsque la valeur cible change
• SpringAnimation: fournit une animation de type « ressort » avec des attributs spécialisés tels que « mass », « damping » et epsilon
• ParentAnimation: utilisé pour animer un changement de parent (voir ParentChange)
• AnchorAnimation: utilisé pour animer un changement d’ancrage (voir AnchorChanges)

Partage d’instances d’animation

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

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'NumberAnimation pour les deux comportements. Si l' répétée est assez complexe, vous pouvez également envisager de créer un composant d' personnalisé et d'attribuer une instance à chaque comportement, par exemple :

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