Search code examples
delphifiremonkey

Trying to animate a Rectangle border with Delphi FMX


I've got a question about Delphi's FMX `TRectangle object.

I'm trying to animate the dashed border of a TRectangle, but I can't do it.

I've written this code inside an OnCreate Event of a form:

  Rectangle1.Stroke.Kind := TBrushKind.Solid;
  Rectangle1.Stroke.Dash := TStrokeDash.Dash;
  Rectangle1.Stroke.Color := TAlphaColors.Red;
  Rectangle1.Stroke.Thickness := 2;

  // Configura l'animazione del bordo
  FloatAnimation1.Parent := Rectangle1;
  FloatAnimation1.PropertyName := 'StrokeDashOffset';
  FloatAnimation1.StartValue := 0;
  FloatAnimation1.StopValue := 20;
  FloatAnimation1.Duration := 1;
  FloatAnimation1.Loop := True;
  FloatAnimation1.AnimationType := TAnimationType.InOut;
  FloatAnimation1.Interpolation := TInterpolationType.Linear;
  FloatAnimation1.Start;

On the form, there are a TRectangleObject and a TFloatAnimation object that should animate the rectangle but when I run the program I can see no animation.

This is the first time I have written a Delphi FMX application because usually I develop with VCL.

Can someone tell me what is wrong with this piece of code? I obtain a dash red border but no animation.


Solution

  • I think that the value of the FloatAnimation1.PropertyName is incorrect.
    Put a TFloatAnimation on form and view the posibilities of PropertyName property.

    If yo try to change this porperty (for example put Stroke.Thickness) the animation runs ok.

    I have tried this code:

    procedure TForm3.FormShow(Sender: TObject);
    begin
      FloatAnimation1.Parent := Rectangle1;
      FloatAnimation1.PropertyName := 'Stroke.Thickness';
      FloatAnimation1.StartValue := 0;
      FloatAnimation1.StopValue := 5;
      FloatAnimation1.Duration := 1;
      FloatAnimation1.Loop := True;
      FloatAnimation1.AnimationType := TAnimationType.InOut;
      FloatAnimation1.Interpolation := TInterpolationType.Linear;
      FloatAnimation1.Start;
    end;
    

    An this is the result:

    enter image description here