Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

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


Recommended Posts

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

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

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

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

image.png

 

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

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

image.png

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

image.png

 

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

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

 

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

이 댓글 링크
다른 사이트에 공유하기

  • 어드민 changed the title to [FMX] Firemonkey 기본 UI 요소에 색상 전환 효과 구현하기 - Rectangle Color Animation

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.