Effets FireMonkey

Oct 12

Delphi

Avec Delphi XE2 et FireMonkey, il est possible de très facilement manipuler des images…

Dans cet article, je vais vous montrer le code que j’ai utilisé pour effectuer cette démonstration :

Pour réaliser cette application, j’ai déposé un TImage et un TText sur ma fiche principale.

En sélectionnant l’image, je lui ai ajoutée différents effets :

TRippleEffect
TSmoothMagnifyEffect
TPinchEffect
TWaveEffect
THueAdjustEffect
TRippleTransitionEffect

Vous pouvez voir le DFM complet en seconde page…

J’ai ensuite créé deux méthodes : une pour désactiver tous les effets, une autre pour gérer les différents effets…

1
2
3
4
5
6
7
8
9
10
11
12
13
14

procedure TfrmMain.DisableEffects;
var
iLoop, iMax: Integer;
begin
// Boucle sur tous les sous-éléments du TImage pour désactiver ses effets
iMax := Pred(imgBelly.ChildrenCount);
for iLoop := 0 to iMax do
begin
if (imgBelly.Children[iLoop] is TImageFXEffect) then
begin
(imgBelly.Children[iLoop] as TImageFXEffect).Enabled := False;
end;
end;
end;

Pour les effets, en fonction du rendu que je souhaitais obtenir, j’ai utilisé différentes fonctions pour animer tout cela…

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

procedure TfrmMain.DoEffect(X, Y: Single);
var
bmp: TBitmap;
begin
case Tag of
0:
begin
effRipple.Center := PointF(X, Y);
effRipple.Phase := 20;
effRipple.Amplitude := 1;
effRipple.Enabled := True;
effRipple.AnimateFloat('Phase', 0, 1.5);
effRipple.AnimateFloat('Amplitude', 0.3, 0.5);
effRipple.AnimateFloatDelay('Amplitude', 0, 1, 0.5);
end;
1:
begin
effSmoothMagnify.Center := PointF(X, Y);
effSmoothMagnify.Magnification := 1;
effSmoothMagnify.Enabled := True;
effSmoothMagnify.AnimateFloat('Magnification', 3, 1, TAnimationType.atInOut, TInterpolationType.itBounce);
effSmoothMagnify.AnimateFloatDelay('Magnification', 1, 1, 1);
end;
2:
begin
effPinch.Center := PointF(X, Y);
effPinch.Radius := 0;
effPinch.Enabled := True;
effPinch.AnimateFloat('Radius', 0.5, 1, TAnimationType.atInOut, TInterpolationType.itElastic);
effPinch.AnimateFloatDelay('Radius', 0, 1, 1);
end;
3:
begin
effWave.WaveSize := 256;
effWave.Enabled := True;
effWave.AnimateFloatWait('WaveSize', 32, 2, TAnimationType.atInOut, TInterpolationType.itSinusoidal);
effWave.Enabled := False;
end;
4:
begin
effHueAdjust.Hue := 0;
effHueAdjust.Enabled := True;
effHueAdjust.AnimateFloat('Hue', 1, 1);
effHueAdjust.AnimateFloatDelay('Hue', -1, 2, 1);
effHueAdjust.AnimateFloatDelay('Hue', 0, 1, 3);
end;
5:
begin
effTransitionRipple.Progress := 0;
effTransitionRipple.Enabled := True;
effTransitionRipple.AnimateFloatWait('Progress', 100, 3);
bmp := TBitmap.Create(imgBelly.Bitmap.Width, imgBelly.Bitmap.Height);
try
bmp.Assign(imgBelly.Bitmap);
imgBelly.Bitmap.Assign(effTransitionRipple.Target);
effTransitionRipple.Target.Assign(bmp);
finally
bmp.Free;
end;
effTransitionRipple.Enabled := False;
end;
end;
end;

Puis j’ai créé l’événement OnMouseDown de l’image :

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

procedure TfrmMain.imgBellyMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
case Button of
TMouseButton.mbLeft: DoEffect(X, Y);
TMouseButton.mbRight:
begin
Tag := Tag + 1;
case Tag of
1: Caption := 'SmoothMagnify';
2: Caption := 'Pinch';
3: Caption := 'Wave';
4: Caption := 'Hue';
5: Caption := 'RippleTransition';
else
begin
Caption := 'Ripple';
Tag := 0;
DisableEffects;
end;
end;
txtEffect.Text := Caption;
txtEffect.AnimateFloat('Opacity', 1, 1);
txtEffect.AnimateFloatDelay('Opacity', 0, 1, 1);
end;
end;
end;

Si vous avez des questions, n’hésitez pas à laisser un commentaire