Как сделать анимацию в delphi как на gif файле?

[Катя93]

Здравствуйте, мне нужно сделать анимацию как на gif файле, пример по ссылке. https://vagon-igr.ru/gif/anim.gif. Я уже начала работу только вместо текста использовала rectangle, разных цветов, из анимации у меня получилось только перемещать группу квадратов вверх вниз. Как сделать так, чтобы анимация была как в гивке, т. е. когда первый слой отправляется вверх то нижние на несколько пикселей сдвигаются вниз, если первый слой отправляется вниз, то соответственно остальные перемещаются на несколько пикселей вверх. Я предполагаю, что этот эффект можно сделать с помощью синуса, но не могу сообразить как, может кто подскажет?
Вот мои созданные rectangle, в delphi.
img.jpg
А вот сам код.

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, StdCtrls, ExtCtrls, AppEvnts, UVect;
type
  TForm1 = class(TForm)
    Button1: TButton;
    Timer1: TTimer;
    procedure Timer1Timer(Sender: TObject);
   

    procedure FormPaint(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;
  TRect = class
  private
      x0, y0: Integer;
      width, height: Integer;
      color : TColor;
      dragok : Boolean;
      Map_X, Map_Y: Integer;
  public
    constructor Create(_x0, _y0, _MapX, _MapY, w1, h1: Integer; _Color:TColor; _dragok:Boolean);
    Procedure Draw(Cs:TCanvas;x:Integer;y,MapX,MapY:Integer); //Прорисовка
  end;

var
  Form1: TForm;
  rightb, leftb, upb, downb : Boolean;
  OldX, OldY : integer;
  
  dragok:Integer;
  StartX:Integer;
  StartY:Integer;
  H1, W1 : Integer;
  rect1 : Array [0..3,0..7] Of TRect;
  rect2 : Array [0..3,0..7] Of TRect;
  Position2: Array[0..3,0..2] of Integer;
  movement:Integer = 2;
  otstup:Array[0..7] of Integer = (10,20,30,40,50,60,70,80);
  otstup2:Array[0..7] of Integer = (10,20,30,40,50,60,70,80);

  color1:array[0..6,0..3] of TColor = ((clBlue, clBlue, clBlue, clBlue),
                                       (clGreen, clGreen, clGreen, clGreen),
                                       (clRed, clRed, clRed, clRed),
                                       (clYellow, clYellow, clYellow, clYellow),
                                       (clSilver, clSilver, clSilver, clSilver),
                                       (clOlive, clOlive, clOlive, clOlive),
                                       (clMaroon, clMaroon, clMaroon, clMaroon));
  
implementation

{$R *.dfm}




constructor TRect.Create(_x0,_y0,_MapX,_MapY,w1,h1: Integer; _Color: TColor; _dragok:Boolean);
begin
  inherited Create;
  x0 := _x0;
  y0 := _y0;
  width := w1;
  height := h1;
  color := _Color;
  dragok := _dragok;
  Map_X := _MapX;
  Map_Y := _MapY;
end;


procedure TRect.Draw(Cs: TCanvas; x, y, MapX, MapY: Integer);
begin
  Map_X := MapX;
  Map_Y := MapY;
  Form1.Canvas.Brush.Color:=color;
  Cs.Rectangle(x0+Map_X,y0+Map_Y,x0+width+Map_X,y0+height+Map_Y);
end;

procedure TForm1.Timer1Timer(Sender: TObject);
var i:Integer;
j:Integer;

begin
  OldX := 0;
  OldY := 0;
  Form1.Canvas.Brush.Color:=clWhite;
  Form1.Canvas.FillRect(Form1.ClientRect);
for i := 0 to 3 do
  begin
 
   for j:=0 to 6 do
   begin
     rect1[i][j].y0:=rect1[i][j].y0+movement;
   
     
     if (rect1[i][j].y0 >= 250) or (rect1[i][j].y0 < 50) then
     begin
        movement := movement * -1;
     end;
       rect1[i][j].Draw(Form1.Canvas,rect1[i][j].x0,rect1[i][j].y0,0,0);

   end;
  end;

end;

procedure TForm1.FormPaint(Sender: TObject);
var ii,jj: Integer;
begin
Position2[0,1]:=50;
Position2[1,1]:=120;
Position2[2,1]:=190;
Position2[3,1]:=250;

Position2[0,2]:=50;
Position2[1,2]:=50;
Position2[2,2]:=50;
Position2[3,2]:=50;

for ii := 0 to 3 do
begin
for jj := 0 to 7 do
begin
 rect1[ii][jj] := TRect.Create(Position2[ii,1]-otstup2[jj],Position2[ii,2]+otstup[jj],0,0,50,50,color1[jj][ii],false);
 rect1[ii][jj].Draw(Form1.Canvas,Position2[ii,1]-otstup2[jj],Position2[ii,2]+otstup[jj],0,0);
end;
end;
end;
end.

[BDA]

Нужно movement сделать свойством каждого прямоугольника, тогда разворот первого ряда не будет влиять на движение второго. А вот для эффекта замедления при подходе к границам движения уже пригодится синус. Создавать прямоугольники лучше в FormCreate, рисование аккуратнее разместить в FormPaint, а в таймере только менять направление movement и потом вызывать repaint.