Les animations en PyQt

1. Introduction

Techniquement, l’animation avec PyQt6 repose sur les mêmes principes que d’autres technologies comme CSS Animations ou WPF (Windows Presentation Foundation). L’idée principale est de créer une transition fluide entre deux états en discrétisant (c’est-à-dire en les représentant sous forme d’étapes ou de valeurs distinctes plutôt que continues) des positions intermédiaires, qu’il s’agisse de dimensions, de positions ou d’autres propriétés.

La classe QPropertyAnimation est utilisée pour définir et gérer ces animations. Comme indiqué dans la documentation officielle, deux éléments essentiels sont nécessaires pour instancier une animation :

Prenons un exemple simple d’une fenêtre contenant un petit formulaire avec un bouton. Nous souhaitons créer une animation qui modifie les dimensions de ce bouton lorsqu’il est cliqué.

2. Code avant animation

Le code de base crée une fenêtre avec quelques widgets : un label, une zone de texte et un bouton :

import sys  
from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, 
QLabel, QLineEdit  
  
class FenetreSimple(QWidget):  
   def __init__(self):  
       super().__init__()  
       self.init_ui()  
  
   def init_ui(self):  
       self.resize(250, 300)  
       self.move(50, 500)  
       self.setWindowTitle("Chapitre 7 - Exemple Animation")  
  
       # Widgets  
       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...

1. Introduction

L’objectif ici est de modifier progressivement la couleur du texte affiché dans un label grâce à une animation. La principale difficulté réside dans la nécessité de créer un accesseur explicite pour la propriété couleur, afin de permettre l’utilisation de la classe QPropertyAnimation.

Pour répondre à ce besoin, nous utilisons la classe pyqtProperty de PyQt6, disponible dans le module QtCore.

2. Le code explicité

from PyQt6.QtWidgets import QLabel, QPushButton, QVBoxLayout, 
QWidget, QApplication  
  
from PyQt6.QtGui import QColor  
from PyQt6.QtCore import QPropertyAnimation, pyqtProperty 

class LeLabel(QLabel):  
   def __init__(self, parent=None):  
       super().__init__(parent)  
       self._color = QColor(0, 0, 0)  # Couleur par défaut : noir 
  
   def getColor(self):  
       return self._color  
  
   def setColor(self, couleur):  
       self._color = couleur  
       palette = self.palette()  
       palette.setColor(self.foregroundRole()...

1. Introduction

Les deux animations précédentes possédaient un point commun fondamental : elles évoluaient de manière linéaire, en suivant une progression déterminée par une fonction affine. Autrement dit, leurs changements s’opéraient de façon régulière et prévisible, sans variation dans le rythme ou la complexité du mouvement. Ces animations, bien qu’efficaces pour illustrer des concepts de base, restaient relativement simples dans leur conception et leur objectif : elles se limitaient à agir sur des propriétés élémentaires, comme les dimensions géométriques ou la couleur d’un widget.

Dans cette section, nous allons franchir une étape supplémentaire en explorant des animations plus sophistiquées, capables d’introduire de la non-linéarité, des comportements dynamiques et des interactions visuelles plus immersives. L’objectif sera de combiner plusieurs transformations ou d’utiliser des trajectoires complexes pour enrichir l’expérience utilisateur et repousser les limites des animations standard.

2. Animations et courbes de Bézier

Nous allons à présent explorer l’utilisation des courbes de Bézier pour enrichir les animations, en nous inspirant du monde des jeux vidéo. Imaginez par exemple un petit véhicule ou un personnage animé se déplaçant de manière fluide et réaliste sur une trajectoire courbe. Les courbes de Bézier sont souvent choisies pour ce type de mouvement grâce à leur capacité à produire des trajectoires harmonieuses et naturelles. Nous expliquerons plus en détail ce que sont ces courbes et comment elles fonctionnent.

Bien que PyQt ne soit pas spécifiquement conçu pour le développement de jeux ou d’animations complexes, il offre néanmoins des outils intéressants pour ajouter des éléments animés à une interface utilisateur. Ces animations peuvent améliorer l’expérience utilisateur en rendant l’interface plus attrayante et interactive. Toutefois, pour développer des animations avancées ou complexes, il est recommandé...

1. Introduction

En Qt et donc en PyQt, il est possible de créer une vue graphique pour afficher et manipuler des objets visuels en 2D. Cette vue graphique repose sur une classe nommée QGraphicsView.

Une fois la vue créée, il est possible d’ajouter une scène graphique qui accueille les éléments visuels à afficher. Cette scène est définie à l’aide de la classe QGraphicsScene. La scène graphique agit comme un conteneur pour les objets graphiques en deux dimensions et constitue la base sur laquelle les animations et les interactions peuvent être appliquées.

2. Exemple d’utilisation

Prenons l’exemple d’une petite icône italique qui se déplace dans une scène graphique, elle-même intégrée dans une vue graphique. L’objectif est de démontrer l’utilisation de QGraphicsScene, QGraphicsView et QPropertyAnimation pour animer un objet.