Firemonkey. От простого к сложному #5. Эффекты перехода для компонентов.

Если Вы хотя бы раз создавали в Delphi XE2 проект FireMonkey, то безусловно должны были оценить наличие большого количества эффектов и различных анимаций с помощью которых можно создать визуально привлекательные приложений. Всего в FireMonkey насчитывается свыше 50 различных визуальных эффектов, которые условно можно разделить на несколько категорий: одни эффекты преобразуют каждый пиксель изображения в отдельности, например, меняют контрастность, другие, такие как эффект Blur, работают с областями пикселей, третьи — реализуют плавный переход одного изображения в другое. Чаще всего, для того, чтобы применить какой либо визуальный эффект к элементы на форме его достаточно просто бросить на этот элемент и выставить необходимые настройки в Object Inspector. Например, на рисунке ниже представлен компонент TText с наложенным на него эффектом TReflectionEffect:

Естественно, мы вправе применить к этому эффекту анимацию, какого-либо его свойства, например, сделать так, чтобы по какому-либо событию отражение плавно вытягивалось или, наоборот сжималось. Делается это, в принципе, достаточно элементарно. Достаточно написать, что-то типа такого кода:

procedure TForm25.Text1MouseEnter(Sender: TObject);
begin
 ReflectionEffect.AnimateFloat('Length',0.7,0.5);
end;
 
procedure TForm25.Text1MouseLeave(Sender: TObject);
begin
 ReflectionEffect.AnimateFloat('Length',0.35,0.5);
end;

И в итоге мы получим вот такой визуальный эффект для текста на форме:

[youtube_sc url=»EhO-_a8DSC0″]

В принципе, ничего сложного нет — добавили анимацию для свойства Length и прокрутили её в обе стороны. В работе используется один компонент и один визуальный эффект.

Более интересными в FireMonkey выглядят эффекты перехода. Такие эффекты, помимо того, что содержат в названии подстроку «Transition» также отличаются от всех прочих компонентов для эффектов наличием свойства Progress, которое используется для управления эффектом.

Для примера рассмотрим использование эффект перехода для двух изображений. Создадим новый проект FireMonkey HD Application, бросим на главную форму приложения компонент TImage и загрузим в него, какую-нибудь картинку:

Теперь бросим на TImage какой-нибудь эффект перехода, например, BloodTransitionEffect. По умолчанию для эффекта перехода установлено свойство Progress=30, меняем его на 0.

Теперь в свойство Target эффекта загружаем какую-нибудь другую картинку, например, такую:

И, как и в предыдущем примере для TReflectionEffect, воспользуемся анимацией, но только для свойства Progress:

procedure TForm25.Image1MouseEnter(Sender: TObject);
begin
  BloodTransitionEffect1.AnimateFloat('Progress',100,0.5);
end;
 
procedure TForm25.Image1MouseLeave(Sender: TObject);
begin
  BloodTransitionEffect1.AnimateFloat('Progress',0,0.5);
end;

В итоге у нас получится вот такой интересный эффект перехода одного изображения в другое:

[youtube_sc url=»SXrcXn-hblE»]

К сожалению, на видео не видно всей плавности перехода, несмотря на то, что видео снималось на максимальных настройках. Но тем не менее, можно увидеть сам переход.

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

Чтобы продемонстрировать это на примере, сделаем так, что обычный список TListBox будет превращаться в TStringGrid (прям как в кино — «Брюки превращаются…в элегантные шорты»(с)). Бросим на форму компоненты TListBox и TStringGrid, TButton, а также эффект перехода, скажем, WiggleTransitionEffect. В ListBox добавим несколько элементов (чисто для примера). Теперь на OnClick кнопки напишем такой обработчик:

type
  TForm25 = class(TForm)
    [....]
  private
    GridShowing: boolean;
  public
    { Public declarations }
  end;
 
var
  Form25: TForm25;
 
implementation
 
{$R *.fmx}
 
procedure TForm25.Button1Click(Sender: TObject);
var Target: TBitmap;
begin
  WiggleTransitionEffect1.Progress:=0;
  if GridShowing then
    begin
      Target:=StringGrid1.MakeScreenshot;
      WiggleTransitionEffect1.Parent:=StringGrid1;
    end
  else
    begin
      Target:=ListBox1.MakeScreenshot;
      WiggleTransitionEffect1.Parent:=ListBox1;
    end;
  WiggleTransitionEffect1.Target:=Target;
  WiggleTransitionEffect1.AnimateFloatWait('Progress',100,0.4);
  if GridShowing then
    ListBox1.BringToFront
  else
    StringGrid1.BringToFront;
  GridShowing:=not GridShowing;
  if Assigned(Target) then
    Target.Free;
end;

Результатом будет следующее «превращение» списка в таблицу и обратно:

[youtube_sc url=»fkQL4ZaRgt4″]

К сожалению, опять же ролик не совсем точно и качественно передает всю красоту этого визуального эффекта, так что можете повторить его в своем приложении и глянуть на результат.

Собственно, в приведенном выше коде мы сделали следующее: в зависимости от того какой элемент формы в данный момент видит пользователь сняли скриншот этого контрола, используя его метод MakeScreenshot  и передали в Target эффекта. После чего прокрутили анимацию от 0 до 100 и подняли на верх необходимый нам контрол. Ну, а так как мы делаем переход от контрола к контролу, используя битмап, то анимацию проигрываем через метод AnimateFloatWait, т.е. ждем пока анимация дойдет до конца и после этого продолжаем код и, таким образом, создаем полную видимость «превращения».

На мой взгляд подобные эффекты перехода будет интересно/полезно/выгодно (нужное подчеркнуть) использовать, например, в том случае, когда на форме мало места или просто нет желания размещать на ней такие контролы как TabControl и хочется сделать «живой» интерфейс программы. Ну, а если, рассматривать на примере приведенной выше  части программы, то, немного поработав над стилями контролов можно добиться довольно красивого «превращения».