[FMX] Firemonkey 기본 UI 요소에 색상 전환 효과 구현하기 - Rectangle Color Animation

[c2design]

애니메이션은 앱을 보다 멋지게 보이게 할 뿐만 아니라 사용자의 사용성도 높여준다.("앱에 '우와-하는' 요소를 추가하는 방법"에서 잘 보여준다) 

FMX는 아래 설명과 같이 매우 간단하고 유연하다. VCL에서는 애니메이션을 구현하는 방식이 조금 다르며, VCL과 FMX에서 모두 사용할 수 있는 SKIA 컴포넌트 (샘플 데모 보기) 등도 있다. 

지금은 가장 간단하게 FMX에서 어떻게 사용하는 지를 TRectangle에 TColorAnimation을 가지고 설명한다.

이제, 버튼을 누르면 사각형의 색상이 노랑색에서 파랑색으로 서서히 전환되도록 해보자.

 

1. "툴 팔레트"를 이용하여 폼 위에 TRectangle, TColorAnimation, TButton을  올려 놓는다.

2. 아래 그림과 같이 "스트럭처 뷰"에서 ColorAnimation1을 Rectangle1 안으로 끌어 옮겨 넣는다 (즉, Rectangle1 안에 ColorAnimation1를 넣어준다. 그러면 사각형은 해당 애니메이션 효과를 가지게 된다).

3. 이제 원하는 애니메이션 효과를 "오브젝트 인스펙터"에서 TColorAnimation 속성으로 지정한다.
  PropertyName은 Fill.Color로 지정하고, StartValue 와 StopValue에 각각 원하는 색상을 지정하고, Duration에 애니메이션 전환 시간을(초) 지정한다.
  그리고 Enabled는 일단 False로 그대로 둔다 (일단 꺼두고, 버튼을 눌렀을 때 작동되도록 하기 위함이다)

 

4. 마지막으로, 버튼을 누르면 애니메이션이 작동하도록 하도록 아래 코드를  버튼 클릭 이벤트 처리 코드에 넣으면 된다. 

procedure TForm1.Button1Click(Sender: TObject);
begin
  ColorAnimation1.Start;
end;

 

위에서는 색상 애니메이션을 보았지만, 그 이외에도 여러가지 효과와 애니메이션이 있으며, 구현 방식도 여러 가지 이다. 하지만 기본적인 개념은 대체로 비슷하다. 참고로  "앱에 '우와-하는' 요소를 추가하는 방법"을 보고, 델파이로 내 앱을 얼마나 더 멋지게 만들 수 있는 지에 대한 아이디어를 얻을 수 있기 바란다.