Blog de Gilles Vasseur - Pascal et compagnie

Les transitions entre images sous Lazarus avec BGRABitmap (IX) - Pousser des images hors du champ d'affichage

Noter ce billet

par

, 28/03/2018 à 11h12 (926 Affichages)

Après les transitions concernant le recouvrement, nous allons nous pencher sur d'autres types qui nous poseront des problèmes différents... Aujourd'hui, les transitions qui poussent une image hors du champ d'affichage pour en introduire une autre seront à l'honneur.

Pousser des images hors du champ d'affichage

Pour le moment, nous allons nous contenter d'explorer d'autres possibilités tout aussi faciles à mettre en œuvre que les précédentes. Cependant, il nous faudra modifier la méthode OnClick du bouton, car elle suppose que l'image d'origine est immobile, ce qui n'est pas une obligation et même parfois une gêne.

Modifions donc légèrement cette méthode :
Code pascal : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
procedure TMainForm.btnGoClick(Sender: TObject);
// *** dessin ***
var
  LBGRATemp: TBGRABitmap;
  LY, LX: Integer;
begin
  btnGo.Enabled := False;
  LBGRATemp := TBGRABitmap.Create(imgResult.ClientWidth, imgResult.ClientHeight, BGRABlack);
  try
    LX := 0;
    LY := 0;
    fStep := 0;
    repeat
      Inc(fStep);
      LBGRATemp.FillRect(ClientRect, BGRABlack);
      // traitement 1 ici (source)...
      LBGRATemp.PutImage(LX, LY, fBGRAFrom, dmSet, Opacity(False));
      // traitement 2 ici (destination)...
      LBGRATemp.PutImage(LX, LY, fBGRATo, dmDrawWithTransparency, Opacity);
      LBGRATemp.Draw(imgResult.Canvas, 0, 0);
      imgResult.Repaint;
      sleep(100 - fSpeed);
    until fStep = 100;
  finally
    LBGRATemp.Free;
    btnGo.Enabled := True;
  end;
end;
Simplement en transformant les constantes nulles de la première utilisation de PutImage, nous autorisons des modifications de l'image d'origine.

Après traitement, si nous avons modifié LX ou LY, il faudra bien entendu les remettre à 0 au cas où elles ne seraient pas recalculées par la suite.

Notre application modèle est désormais adaptée à une série de nouvelles transitions dont nous allons explorer certaines ci-après.

Pousser avec PushRight

Une transition courante et intéressante consisterait à pousser vers la sortie d'écran l'image d'origine à l'aide de l'image de destination. En nous aidant de nos habituels schémas, nous nous rendons vite compte qu'il s'agit d'appliquer la même translation aux deux images : seules leurs coordonnées différeront.

Examinons par exemple le schéma applicable à PushRight qui, comme son nom l'indique, aura pour fonction de pousser l'image d'origine vers la droite :

On voit qu'il y a deux traitements à réaliser. L'image d'origine voit l'abscisse de son point supérieur gauche passer de 0 à x, tandis que l'image de destination voit la même abscisse passer de -x à 0. Les deux images ayant les mêmes dimensions grâce à Resample, les translations donneront l'illusion que l'image de destination pousse celle d'origine.

Le code prendra cette forme :
Code pascal : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
// traitement 1 ici (source)...
LX := imgResult.ClientWidth * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRAFrom, dmSet, Opacity(False));
// traitement 2 ici (destination)...
LX := -imgResult.ClientWidth + imgResult.ClientWidth * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRATo, dmDrawWithTransparency, Opacity);
LY n'a pas besoin d'être modifiée. LX n'a pas la même valeur selon l'image traitée, mais elle progresse de la même façon.

Voici une copie d'écran obtenue lors d'une étape de la transition :

Un aspect intéressant de notre travail préparatoire sur l'opacité est que l'image qui arrive devient de plus en plus lumineuse alors que celle qui disparaît semble s'évanouir dans le sombre. Bien sûr, cette remarque n'est pertinente que si la transparence a été activée avec la case à cocher !

Arrivé à ce stade du travail, il sera sans doute utile que vous cherchiez par vous-même les formules à appliquer. N'hésitez pas à faire un schéma pour éviter de vous tromper dans les coordonnées d'origine et de destination !

Pousser avec PushLeft

PushLeft fonctionne dans le sens inverse. Son schéma est donc :

L'image d'origine doit être translatée vers la gauche avec un point supérieur gauche d'abscisse passant de 0 à -x. Dans le même temps, le point supérieur de l'image de destination verra son abscisse passer de x à 0.

Voici le code correspondant :
Code pascal : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
// traitement 1 ici (source)...
LX := - imgResult.ClientWidth * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRAFrom, dmSet, Opacity(False));
// traitement 2 ici (destination)...
LX := imgResult.ClientWidth - imgResult.ClientWidth * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRATo, dmDrawWithTransparency, Opacity);
La copie d'écran proposée est la suivante :

Pousser avec PushDown

Avec PushDown, ce sont les ordonnées qui vont être affectées selon le schéma ci-après :

L'ordonnée du point supérieur gauche de l'image d'origine doit passer de 0 à y tandis que celui de l'image de destination passera de -y à 0.

Voici le code correspondant :
Code pascal : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
// traitement 1 ici (source)...
LY := imgResult.ClientHeight * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRAFrom, dmSet, Opacity(False));
// traitement 2 ici (destination)...
LY := -imgResult.ClientHeight + imgResult.ClientHeight * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRATo, dmDrawWithTransparency, Opacity);
La copie d'écran proposée est la suivante :

Pousser avec PushUp

PushUp offre la configuration inverse : l'ordonnée du point supérieur gauche de l'image d'origine doit passer de 0 à -y tandis que celui de l'image de destination passera de y à 0.

Le schéma qui lui est associé est le suivant :

Voici le code correspondant :
Code pascal : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
// traitement 1 ici (source)...
LY := -imgResult.ClientHeight * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRAFrom, dmSet, Opacity(False));
// traitement 2 ici (destination)...
LY := imgResult.ClientHeight - imgResult.ClientHeight * fStep div 100;
LBGRATemp.PutImage(LX, LY, fBGRATo, dmDrawWithTransparency, Opacity);
La copie d'écran proposée est la suivante :

Avec cette transition, nous mettons un terme aux transitions simples. Dans le prochain billet, il sera fait appel à notre imagination pour montrer que les quelques outils à notre disposition, s'ils sont complétés par des connaissances en mathématiques, peuvent créer des transitions auxquelles nous n'aurions peut-être pas pensé tout de suite...