Les animations en PyQt

Name: PyQt5 Développez vos interfaces graphiques en Python
Rating: 4.3333 (3 reviews)

Introduction

Les animations doivent s’utiliser avec parcimonie dans une interface graphique. Ces effets doivent par ailleurs pouvoir être désactivables si possible. Leur utilisation peut néanmoins apporter un vrai plus, y compris en termes d’ergonomie. Par exemple, imposer un léger effet grossissant ou un léger changement dynamique de couleur pour guider l’utilisateur sur un parcours d’actions à effectuer ou d’informations à compléter est parfois la meilleure solution ergonomique.

Le présent chapitre se consacre à la réalisation d’animations en PyQt, en particulier en s’intéressant à la classe QPropertyAnimation. La documentation Qt de cette classe est accessible à cette adresse : https://doc.qt.io/qt-5/qpropertyanimation.html

Précisons également que l’usage de cette classe et des animations en général est incompatible avec l’usage des feuilles de style étudiées au chapitre précédent. En effet, la technologie QSS arrive et s’active dans un second temps et peut ainsi surcharger, voire annuler les dispositions déjà définies.

Des animations simples en PyQt

1. Introduction

Techniquement, l’animation PyQt obéit aux mêmes préceptes que ceux qui régissent des technologies comme CSS Animations ou WPF (Windows Presentation Foundation). Ainsi, le principe général consiste à discrétiser des positions intermédiaires comprises entre une valeur de départ et une valeur d’arrivée.

Comme indiqué dans la documentation de la classe QPropertyAnimation, pour instancier cette classe, il faut préciser les deux paramètres suivants :

Le widget « cible » de l’animation
La propriété de ce widget concernée par l’animation

Prenons l’exemple simple d’une fenêtre contenant un petit formulaire contenant lui-même un bouton à cliquer. Nous désirons créer une animation qui fait varier les dimensions de ce bouton (en grossissant sa hauteur ou sa largeur ou même les deux propriétés).

Le code utilisé est issu du chapitre Inventaires des widgets PyQt. Il consiste en une simple fenêtre héritant de QWidget et contenant quelques widgets : un label, une zone d’édition et un bouton.

import sys 
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QCheckBox 
from PyQt5.QtWidgets import QFormLayout, QLabel, QLineEdit, QComboBox,  
QRadioButton 
 
 
 
class FenetreSimple(QWidget): 
    def __init__(self): 
        super().__init__() 
        self.execute() 
 
    def execute(self): 
        self.resize(250, 300) 
        self.move(50, 500) 
        self.setWindowTitle("Chapitre 7 - Exemple Animation") 
 
        self.label = QLabel("Un label", self) 
        self.label.move(5, 5) 
 
        self.line_edit = QLineEdit(self) 
        self.line_edit.move(5, 30) 
        self.line_edit.resize(150...

Animation plus élaborée avec QPropertyAnimation

1. Introduction

Les deux animations précédentes partageaient un aspect : toutes deux se déroulaient de façon linéaire, selon l’évolution d’une droite affine.

Par ailleurs, les animations étaient simples, agissant uniquement sur les dimensions ou la couleur d’un widget.

Nous allons ici essayer de faire des choses un peu plus élaborées.

2. Animations et courbe de Bézier

On imagine ici une animation dans le style « jeu vidéo », par exemple un petit véhicule ou un petit personnage bougeant de façon réaliste. Les courbes de Bézier (nous reviendrons sur ce que cela représente) sont souvent choisies pour les trajectoires fluides et réalistes qu’elles proposent.

Bien sûr, l’idée de faire des animations n’est pas le propos principal de PyQt, même si la notion de scène graphique (section suivante) permet de faire beaucoup de choses : il s’agit surtout d’agrémenter une interface utilisateur avec de petites animations utiles. Pour développer des animations avancées en Python, il vaut mieux privilégier le framework Pygame particulièrement adapté pour ce genre de développement. A contrario, il n’est pas complètement impossible de coder une interface utilisateur en Pygame, mais le framework n’est clairement pas fait pour cela.

Les courbes de Bézier sont des courbes mathématiques définies de façon polynomiale, inventées en 1962 par le mathématicien Pierre Bézier. PyQt fournit des outils simples pour implémenter une courbe de Bézier.

On commence...

Notion de scène graphique en PyQt

1. Introduction

En Qt et a fortiori en PyQt, on peut définir une vue graphique à même d’afficher une vue graphique. La classe en question est QGraphicsView. Sa documentation en ligne est accessible via le lien : https://doc.qt.io/qt-5/qgraphicsview.html

Une fois créée, on peut alors réaliser une scène graphique qui accueille le visuel proprement dit. Une scène graphique se définit avec la classe QGraphicsScene.

https://doc.qt.io/qt-5/qgraphicsscene.html

Dans une scène graphique, on peut alors définir un certain nombre d’objets graphiques en deux dimensions. Elle représente donc, et dans notre cas, le réceptacle de notre animation.

2. Exemple d’utilisation

Poursuivons avec notre petite icône italique et cherchons à la faire se déplacer au sein d’une scène graphique, elle-même intégrée à une vue graphique.

On commence par définir notre classe Italique qui hérite de Qobject. On lui ajoute un accesseur pour son attribut position (en l’occurrence de type QPointF). On utilise au passage la classe QGraphicsPixmapItem. Cette classe nous permet d’avoir un item à même d’être associé à notre vue graphique (comme nous le verrons immédiatement après). La documentation de cette classe est disponible...