Blog de Gilles Vasseur - Pascal et compagnie

Après avoir installé la bibliothèque BGRABitmap, qui sert de support au traitement et à l'affichage des images, et bâti un logiciel de test avec la prise en charge de la vitesse d'affichage et de l'opacité, il est temps de proposer des transitions.

Les transitions de recouvrement

Nous appellerons transitions de recouvrement les transitions qui affichent une image d'origine qui doit être peu à peu recouverte par l'image de destination. Ces transitions sont simples d'un point de vue mathématique puisqu'elles ne mettent en œuvre que des translations.

Pour rappel, une translation en mathématique est une transformation qui correspond à l'idée intuitive de glissement. Elle est facile à mettre en œuvre puisqu'elle n'utilise pas de rotations et ne déforme l'objet translaté.

Pour nommer les méthodes chargées de les effectuer nous adopterons une convention simple : le nom de la méthode indiquera toujours le type de transition (ici over pour recouvrement) suivi de la direction du mouvement. Par exemple, pour une transition partant du coin supérieur gauche et allant vers la droite et le bas, nous implémenterons la méthode OverBottomRight.

Le recouvrement OverDown

Le recouvrement OverDown nous servira à comprendre les calculs nécessaires à la série de transitions de recouvrement. L'idée fondamentale qui sous-tend tout recouvrement est celle-ci : nous dessinerons l'image d'origine sur laquelle viendra s'inscrire une partie de l'image de destination.

En fait, nous n'aurons pas à nous préoccuper du calcul de la partie visible de l'image de destination, car c'est le composant TImage d'accueil qui s'occupera lui-même de la définir en fonction de sa surface d'affichage propre. Notre travail se réduira à fournir les coordonnées du coin supérieur de gauche de l'image de destination, suivant le pourcentage réalisé de la transition. Autrement dit, nous fixerons au départ les coordonnées du point supérieur gauche de l'image de transition de telle manière qu'elle soit invisible et ce n'est que progressivement qu'elle entrera par translation dans le cadre de visibilité.

La translation conservant les longueurs et les angles, un seul point est nécessaire pour les calculs. Si nous parvenons à calculer les coordonnées du point supérieur gauche de l’image, par exemple, le rectangle qu'elle forme sera reproduit à l'identique à la nouvelle position.


Voici comment se présentent au départ les deux images avec la méthode OverDown :

Le rectangle rouge représente l'image d'origine, mais aussi la surface visible en permanence. Le rectangle bleu représente l'image de destination. Au départ, nous la situerons au-dessus de l'image de destination, donc hors de la zone d'affichage, puis nous la ferons glisser par translation vers le bas.

Nous remarquons que seules les ordonnées des points de l'image de destination sont affectées par la translation. En effet, le rectangle bleu n'a à bouger ni vers la gauche ni vers la droite. Par conséquent, le calcul des coordonnées du point supérieur gauche de l'image de destination exclura l'abscisse qui restera constante pour définir l'ordonnée par un calcul rudimentaire.

Dans une image, nous savons que le coin supérieur gauche a pour coordonnées (0, 0). Dans notre méthode OverDown, nous laisserons donc LX à sa valeur de 0. L'image de destination étant située au-dessus de l'image d'origine, l'ordonnée de son point supérieur gauche sera négative : plus exactement, elle vaudra la valeur négative de la hauteur du rectangle qu'elle forme. Cette hauteur nous est fournie par la méthode ClientHeight de l'image d'affichage du résultat.

Pour le déplacement, nous partirons de cette valeur -ClientHeight pour lui ajouter progressivement un pourcentage d'elle-même, soit ClientHeight * fStep div 100. Ainsi, l'ordonnée va se rapprocher de plus en plus de 0 et finalement l'image de destination recouvrira totalement l'image d'origine.

Voici la ligne de code à inclure dans le gestionnaire OnClick du bouton pour obtenir l'effet désiré :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
LX:= 0;
[…]
LY := - imgResult.ClientHeight + imgResult.ClientHeight * fStep div
      100; // OVERDOWN

Vous reconnaîtrez là l'unique transition utilisée lors de nos essais. Nous transformerons cette ligne en méthode quand nous en aurons besoin. Pour le moment, nous nous contenterons d'insérer et d'effacer les lignes nécessaires au fur et à mesure de nos besoins.

Le recouvrement OverUp

Le recouvrement Ove ressemble à s'y méprendre à celui qui vient d'être vu. Simplement, il faut à présent placer l'image de destination plus bas que celle d'origine pour la faire remonter peu à peu.

La configuration de départ est celle-ci :

Encore une fois, les abscisses ne sont pas affectées si bien que la variable LX restera à sa valeur de 0. En revanche, l'ordonnée de départ du point supérieur gauche de l'image de destination est désormais de y. Il faut donc le réduire peu à peu jusqu'à ce qu'il atteigne la valeur 0 attendue.

Voici la ligne de code à inclure dans le gestionnaire OnClick du bouton pour obtenir l'effet désiré :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
LY := imgResult.ClientHeight - imgResult.ClientHeight * fStep div
      100; // OVERUP

Une copie d'écran correspondant à ce recouvrement a donné ceci :

Le recouvrement OverRight

Le recouvrement OverRight correspond à un autre cas de figure. En effet, ce ne sont pas les ordonnées qui seront modifiées, mais les abscisses. LY sera donc laissée en paix et c'est la variable locale LX qui devra s'adapter en fonction du temps.

Son schéma de fonctionnement est le suivant :

Partant de -x, l'abscisse du point supérieur gauche de l'image de destination devra atteindre 0, donc augmenter progressivement. Nous savons que la largeur de l'image est fournie par la méthode ClientHeight de l'image d'affichage du résultat. La formule retenue sera par conséquent :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
LX := -imgResult.ClientWidth + imgResult.ClientWidth * fStep div
      100; // OVERRIGHT

Un écran tel que celui-ci devrait être obtenu:

Le recouvrement OverLeft

Le recouvrement OverLeft est sans surprise : comme attendu, il inverse les valeurs utilisées précédemment.

Son schéma de fonctionnement est celui-ci :

Partant de x, l'abscisse du point supérieur gauche de l'image de destination devra atteindre 0, donc diminuer progressivement. La formule retenue sera par conséquent :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
LX := imgResult.ClientWidth - imgResult.ClientWidth * fStep div
      100; // OVERLEFT

Un instantané d'écran pourra donner :

Nos quatre premières transitions sont prêtes. Très prochainement, nous compliquerons (à peine) nos calculs pour d'autres transitions un peu plus spectaculaires !