Animacje

Tematem niniejszego artyku│u bΩd▒ proste animacje w Delphi. Zwyk│e, tekstowe, ale efektywne. Nie jest to trudne, ale niezbΩdna na tym etapie bΩdzie podstawowa wiedza na temat programowania grafiki i klasy TCanvas. W tym celu mo┐esz poczytaµ odpowiedni rozdzia│ kursu Delphi. [ Zobacz ]

Podstawowe informacje

Przede wszystkim musisz wiedzieµ, ┐e taka animacja to nic innego jak pΩtla, kt≤ra powoduje ci▒g│e rysowanie danego napisu, tyle, ┐e za ka┐dym razem w innym miejscu.

Na pocz▒tek u┐ytkownik musi mieµ mo┐liwo╢µ przerwania animacji w dowolnym momencie. W sekcji Interface stw≤rz dwie zmienne:
var
  DText : String; // tekst, kt≤ry bΩdzie wy╢wietlony na formie
  Done : Boolean; // je┐eli TRUE to animacja jest zako±czona
Pierwsza z nich oznaczaµ bΩdzie tekst, kt≤ry bΩdzie wy╢wietlany. Druga zmienna ma warto╢µ True, je┐eli animacja zosta│a zako±czona.

Do sekcji private dodaj dwie deklaracje procedur, kt≤re powodowaµ bΩd▒ wy╢wietlanie animacji, tyle, ┐e dw≤ch r≤┐nych.
  private
    procedure DrawAnim(X, Y : Integer);
    procedure SteepBySteep(X, Y : Integer);
Zajmijmy siΩ pierwsz▒ z procedur. Zawiera dwa parametry - X i Y. Wywo│uj▒c procedurΩ musimy podaµ dwa parametry po│o┐enia pocz▒tkowego napisu.

Piszemy potrzebn▒ procedurΩ...

Najpierw zaprezentuje Ci pierwsz▒ z procedur. Ma ona za zadanie przesuwanie tekstu z jednego kra±ca do drugiego. Tekst bΩdzie 3D.
procedure TMainForm.DrawAnim(X, Y: Integer);
var
  B : TBitmap; // Bitmapa
  i : Integer;
begin
  B := TBitmap.Create; // utw≤rz bitmapΩ
  B.Height := 40;  // wysoko╢µ bitmapy
  B.Width := Canvas.TextWidth(DText) * 10; // szeroko╢µ bitmapy
  B.Canvas.Font.Name := 'Courier New';  // czcionka
  B.Canvas.Font.Size := 14; // rozmiar czcionki
  B.Canvas.Brush.Color := Color; // kolor t│a
// stw≤rz obszar na kt≤rym bitmapa ma byµ wy╢wietlana
  B.Canvas.FillRect(Rect(0, 0, Canvas.TextWidth(DText) * 10, 40));

  while not (Done) do // Je┐eli Done = False...
  begin // zacznij odtwarzanie animacji
    for i:= X to Width  do  // zacznij od punktu X to ko±ca formy
    begin
      Application.ProcessMessages; // daj odetchn▒µ systemowi
      Sleep(10); // czekaj 1 milisekundΩ
      B.Canvas.Font.Color := clWhite; // kolor na bia│y
      B.Canvas.TextOut(10, 10, DText); // wy╢wietlenie tekstu
      B.Canvas.Brush.Style := bsClear; // t│o na przezroczyste
      B.Canvas.Font.Color := clBlack; // kolor czcionki: czarny
      B.Canvas.TextOut(9, 9, DText); // wy╢wietl tekst jeszcze raz
      Canvas.Draw(I, Y, B); // wy╢wietl bitmapΩ
      if (Done) then // Je┐eli kto╢ przerwa│ animacje ( Done = True )...
        Break; // ... to przerwij odtwarzanie animacji
    end;
  end;
  B.Free; // zwolnij pamiΩµ dla zmiennej
end;
Nie przera┐aj siΩ wielko╢ci▒ kodu tej procedury. Wszystko wyja╢niΩ po kolei. Animacja nie jest wy╢wietlana bezpo╢rednio na Canvasie, ale na bitmapie, kt≤ra jest tworzona podczas wykonywania programu. Dlaczego? Gdy┐ dziΩki temu nie dostrze┐esz niewygodnego efektu migania.

Najwa┐niejsza czΩ╢µ znajduje siΩ na pocz▒tku. NastΩpuje tu bowiem stworzenie bitmapy oraz wyznaczenie jej szeroko╢ci oraz wysoko╢ci i koloru t│a, czcionki. P≤╝niej pΩtla - jedna zagnie┐d┐ona w drugiej. PΩtla while ma za zadanie sprawdzaµ, czy zmienna Done ma warto╢µ True, czy False. Je┐eli FALSE ( kontynuuj animacje ) wykonywana jest pΩtla for, kt≤ra ma z kolei za zadanie przesuwanie tekstu. Przesuwanie bΩdzie nastΩpowa│o od warto╢ci, kt≤ra jest zadeklarowana pod zmienn▒ X do samego ko±ca formy. Zwr≤µ uwagΩ na bardzo wa┐ne polecenie, kt≤re jest w pΩtli - Application.ProcessMessages. Powoduje ono, ┐e system siΩ nie "zawisza" i mo┐na wykonywaµ inne czynno╢ci. Kolejne okre╢la odstΩp czasu jaki up│ynie miΩdzy przesuniΩciem siΩ napisu o jeden punkt. P≤╝niej nastΩpuje narysowanie tekstu czcionk▒ bia│▒, a nastΩpnie zmiana tej czcionki na czarn▒ i PONOWNE narysowanie tego samego tekstu tyle, ┐e przesuniΩtego o jeden punkt - daje to efekt cienia. No i na ko±cu narysowanie bitmapy na formie ( polecenie Draw ). Pozostaje jeszcze sprawdzenie, czy zmienna Done ma warto╢µ True ( je┐eli tak to animacja zostaje przerwana poleceniem Break ).

Je┐eli chcesz, aby animacja zosta│a przerwana w dowolnym miejscu programu umieszczasz kod:
Done := TRUE;
Literka po literce

Jeszcze jeden przyk│ad animacji - maszyna do pisania - jedna literka po drugiej pojawiaj▒ siΩ na ekranie daj▒c efekt pisanego tekstu. BΩdzie to prostszy przyk│ad. Polega on na rozdzieleniu liter w danym wyrazie i rysowaniu jednej do drugiej. Jest to trochΩ skomplikowane z tego wzglΩdu i┐ w czcionkach ka┐da litera ma r≤┐n▒ szeroko╢µ w pikselach. Rozwi▒zaniem jest zastosowanie czcionki Courier New, kt≤rej litery maj▒ tak▒ sam▒ szeroko╢µ.
procedure TMainForm.SteepBySteep(X, Y: Integer);
var
  TextLength, I: Integer;
begin
  Done := TRUE; // sko±cz poprzednia animacje
  TextLength := Length(DText); // pobierz d│ugo╢µ tekstu

  with Canvas do
  begin
    for I := 1 to TextLength do // pΩtelka...
    begin
      Application.ProcessMessages;
      Sleep(100);  // czekaj▒ 100 milisekund
      Brush.Style := bsClear; // styl na przezroczysty
      Font.Name := 'Courier New'; // czcionka
      Font.Color := clWhite; // kolor czcionki - bia│y
      Font.Size := 16;  // rozmiar
{ Wy╢wietlaj tekst jedna litera po drugiej z przesuniΩciem }
      TextOut((X + i * 16), Y, DText[i]);
      Brush.Style := bsClear;
      Font.Color :=  clBlack;
// wyswietl ten sam tekst w innym po│o┐eniu - efekt cienia
      TextOut((X + i * 16) -2, Y -2, DText[i]); 
   end;
  end;
end;
Na samym pocz▒tku tej procedury pobierana jest ( do zmiennej TextWidth ) d│ugo╢µ tekstu w znakach. P≤╝niej pΩtla wykonywana jest tyle razy ile znak≤w ma dany wyraz. NastΩpnie polecenia, kt≤re ju┐ znasz, czyli przypisanie odpowiedniej czcionki oraz koloru i kroju. P≤╝niej najtrudniejsza czΩ╢µ zadania, czyli samo narysowanie litery. Nale┐y okre╢liµ warto╢µ X ( w pierwszym parametrze ). Wszystko jest mno┐one przez 16 i to daje odstΩp i w rezultacie narysowanie litery. P≤╝niej zmiana koloru czcionki i narysowanie litery jeszcze raz, tyle, ┐e z przesuniΩciem co znowu daje efekt cienia.

To tylko proste animacje - kolejny krok to wykorzystanie OpenGL'a. Kurs taki mo┐esz znale╝µ w dziale Kursy. [ Zobacz ]

Animations.zip ( 3 kB ) - program, kt≤ry pisali╢my w tym artykule

Adam Boduch