1

8장 - 이미지와 애니메이션 효과 적용하기

소개 ............................................................................................................................................................................ 2

픽셀 쉐이더 – Cg 와 HLSL .................................................................................................................................... 4

파이어몽키 비즈니스 어플리케이션 플랫폼(FMX) ............................................................................................... 5

이미지 효과 .............................................................................................................................................................. 7

이미지 효과 유형

개별적으로 픽셀 수정 효과........................................................................................................................... 8

픽셀의 이웃을 고려한 효과........................................................................................................................... 9

첨가 효과 ........................................................................................................................................................ 10

이미지 전체를 수정하는 효과..................................................................................................................... 11

변환 효과 ........................................................................................................................................................ 12

효과 트리거 설정

이미지 효과 사용하기

1 단계: 사진에 효과 적용하기 ................................................................................................................... 17

2 단계: 효과를 활성화하기 위한 트리거 사용하기. ............................................................................... 21

쉐이더 필터 샘플 프로젝트

애니메이션 .............................................................................................................................................................. 22

애니메이션 유형

애니메이션타입과 보간(interpolation) 속성

애니메이션 트리거

반전과 반복 애니메이션

애니메이션 사용하기

델파이와 C++의 추가적인 애니메이션 예제

애니메이션 HD 및 3D 예제 ........................................................................................................................ 38

요약, 전망, 해야 할 일, 리소스 ........................................................................................................................... 39

2

소개

파이어몽키는 윈도우, 맥 어플리케이션에서 사용할 수 있는 60 개 이상의 이미지와 애니메이션 효과를

포함합니다. 파이어몽키의 내장된 ImageFX 엔진은 사용하기 쉽고 강력한 쉐이더 구동, 복잡한

프로그래밍이 필요 없는 GPU 이미지 프로세스 등을 제공합니다

ImageFX 엔진은 2D 이미지 변환, 실시간 효과, 유저 인터페이스 효과 등을 사용할 수 있습니다.

Adobe의 포토샵과 코어이미지와 마찬가지로, ImageFX는 실시간에 완벽한 픽셀 성능을 위해 하나의

동적 GPU 명령 파이프 라인을 활용하는 여러 필터들을 지원합니다.

파이어몽키의 모든 HD 및 3D 개체는 애니메이션, 전환 및 효과를 만들기 위해 타임 라인 기반

애니메이션을 사용 할 수 있습니다. 사용자 컨트롤과 대화 형 어플리케이션, 키오스크(kiosks) 및

시연을 위한 마우스, 터치 및 모션 컨트롤러와 같은 입력 방법에 애니메이션을 연결 할 수 있습니다.

파이어몽키 이미지와 애니메이션 효과를 사용하려면 컴퓨터가 그래픽 처리 장치(GPU)를 가지고 있어야

합니다. GPU는 다양한 공급 업체에서 제공하는 제품들이 DirectX를 9.0 이상, 픽셀 쉐이더 2.0을

지원해야 합니다:

2002년에 출시된 ATI (지금은 AMD) Radeon 9500-X600 시리즈.

2003년에 출시된 NVIDIA GeForce FX (or GeForce 5 )시리즈.

2004년에 출시된 Intel GMA 900.

3

가상 머신에서 프로그램을 실행하는 경우, 호스트의 GPU에 접근할 수 있어야 하는데 다음과 같은

가상화 제품에서 이러한 기능이 제공됩니다:

VMware Workstation 7 버전 이상

VMware Player 3 버전 이상

맥 용 VMware Fusion 3 버전 이상

8장에서 파이어몽키의 이미지와 애니메이션 효과 등을 사용하여 윈도우, 맥용 HD/ 3D 사용자

인터페이스를 보다 멋지게 작성하는 방법에 대해 배워보겠습니다.

4

픽셀 쉐이더 – Cg 와 HLSL

픽셀 쉐이더 언어 사양은(NVIDIA는 그들의 언어를 Cg라고 부르고 – 그래픽을 위한 C, MS는 HLSL이라고

부릅니다 - 높은 수준의 쉐이더 언어) NVIDIA와 마이크로소프트사 간의 공동 협력 프로젝트의 일환으로

시작되었습니다.

NVidia - http://en.wikipedia.org/wiki/Cg_(programming_language) Microsoft - http://en.wikipedia.org/wiki/High_Level_Shader_Language

대부분의 파이어몽키의 이미지 효과들은 마이크로스프트사 DirectX 와 OpenGL용 픽셀 쉐이더 언어로

구현되어 있습니다. 쉐이더 언어는 무엇과 비슷해 보입니까? RAD Studio에 포함되어 있는 모든 필터

소스 코드의 구현 부분을 살펴보십시오. 블러(Blur), 가우시안 블러, 방향 블러와 줌 블러의 선언과

구현을 포함하는 FMX.FilterCat Blur.pas을 살펴보겠습니다. 다음과 같은 구현 코드를 볼 수 있습니다:

constructor TGaussianBlurFilter.Create; const DX: array [0..1611] of byte = ( $00, $02, $FF, $FF, $FE, $FF, $41, $42, $1C, $00, $00, $00, $00, $02, $FF, $FF, $02, $00, $00, $00, $00, $01, $00, $20, $44, $00, $00, $00, $02, $00, $02, $00, $4C, $00, $00, $00, …); GLSL: PAnsiChar = 'vec4 _TMP1;'+ 'vec2 _TMP2;'+ 'vec2 _TMP6;'+ 'varying vec4 TEX0;'+ 'uniform sampler2D texture0;'+ 'uniform vec4 PSParam0;'+ 'void main()'+ '{'+ 'vec4 _Color;'+ 'vec2 _newCoord;'+ '_newCoord = TEX0.xy;'+ '_newCoord.x = TEX0.x + - 8.00000000E+000/PSParam0.x;'+ '_TMP2 = min(vec2( 1.00000000E+000, 1.00000000E+000), _newCoord);'+ '_TMP6 = max(vec2( 0.00000000E+000, 0.00000000E+000), _TMP2);'+ …);

16 진수 바이트는 윈도우에서 DirectX에대한 컴파일 된 쉐이더 언어입니다(마이크로소프트는 HLSL

컴파일러 배포를 허용하지 않기 때문에 코드를 미리 컴파일 해야 합니다). 파이어몽키 이미지 효과를

사용할 경우, 쉐이더 언어 코드는 처리되는 이미지의 주소와 함께 어플리케이션 실행파일에 추가되고

GPU에 전송됩니다.

픽셀 쉐이더 언어에 대한 파이어몽키의 지원의 더 자세한 내용을 보기 위해, 호주 델파이 사용자 그룹

5

André Miertschink의 기사 “자신만의 파이어몽키 효과를 작성하는 방법”을 살펴보십시오.

http://members.adug.org.au/2011/12/15/how-to-create-your-own-firemonkeyimage-filtereffect-to-use-with-firemonkey/.

파이어몽키 비즈니스 어플리케이션 플랫폼(FMX)

FMX는 파이어몽키 어플리케이션 플랫폼의 단위입니다.

파이어몽키는 개인에서 기업까지 전체 범위를 대상으로, 데스크톱 및 다양한 플랫폼에서 시각적으로

매력적인 어플리케이션을 작성하기 위해 데스크톱 및 모바일 장치에서 그래픽 처리 장치 (GPU)를

활용합니다. 파이어몽키의 주요 기능은 다음과 같습니다:

창, 메뉴, 타이머, 대화 상자와 같은 OS 기능을 위한 크로스 플랫폼 추상화 계층

2D 및 3D 그래픽

강력한 그래픽 엔진

빠른 실시간 안티 – 알리아스(별칭) 벡터 그래픽, 알파 블렌딩 및 그라디언트로 독립적인

해상도

WYSIWYG 디자이너와 속성 편집기

향상된 GUI 엔진 – 윈도우 창, 텍스트박스, 숫자박스, 메모, 엔젤박스, 리스트박스와 기타 등등

샘플 스타일 테마를 사용한 그래픽 스타일에 기초한 고급 스키닝 엔진

내장된 붓, 펜, 형상 및 변형 세트가 있는 2D 그래픽 도형 원형

향상된 애니메이션은 백그라운드 스레드에서 최소한의 CPU 사용 및 자동 프레임 속도

보정으로 정확하고 사용하기 쉽게 계산됩니다. CPU 사용량 및 자동 프레임 속도 보정

그림자 드리우기와 흐리게 하기 등 소프트웨어에서 렌더링 되는 비트맵 효과

유연한 레이아웃과 도형과 다른 컨트롤들의 조합

레이어드 폼, 유니코드 사용 가능

읽기/쓰기를 지원하는 JPEG, PNG, TI FF, 및 GIF 포맷

다국적-언어 엔진, 에디터와 예제

6

다음 그림은 주요 클래스의 관계를 보여주는 파이어몽키 계층 구조입니다.

또한 다음에서 개략적인 파이어몽키 계층 구조 포스터(PDF 파일)를 다운로드 받으실 수 있습니다

http://www.embarcadero-info.com/firemonkey/firemonkey_chart_poster.pdf.

다음의 UML 다이어그램은 ImageFX, TFilter, TShaderFilter 및 효과 부분을 보여줍니다:

7

이미지 효과

파이어몽키에 내장되어 있는 ImageFX 엔진은 60 개 이상의 강력한 GPU 효과를 제공합니다. 이러한

효과는 툴 팔레트의 Effects 카테고리에 있는 비시각적 컴포넌트입니다. 제공되는 모든 효과는 단순히

폼 디자이너에서 활성화 플래그를 설정하거나 프로그래밍 방식으로 활성화하거나 비활성화 할 수

있습니다.

거의 모든 효과는 어플리케이션에 따라 사용자 정의 할 수 있는 특정 속성이 있습니다. 예를 들어,

모든 전환 효과는 첫 번째 텍스처에서 두 번째 텍스처로의 전환을 통해 진행양을 설정하는데

사용되는(백분율에서 %) Progress 속성을 가지고 있습니다. 스트럭처 뷰에서 효과가 선택되었을 때 특정

속성은 오브젝트 인스펙터에서 찾습니다. 효과의 모든 숫자 속성은 시간에 따라 점진적 진행을

제공하기 위해 애니메이션 처리 할 수 있습니다.

이미지 효과도 트리거 될 수 있습니다.

파이어몽키 효과는 픽셀 쉐이더 필터를 사용하여 작성되었습니다. 쉐이더는 개별적으로 또는 다른

것들과 합쳐서 픽셀을 수정하여 다양한 시각적 효과를 달성 할 수 있습니다. 이러한 효과들은 비트맵

이미지 데이터에 국한되지 않습니다;

효과는 사용자 인터페이스에서 모든 2D 컨트롤의 픽셀에 적용 할 수 있습니다. 효과는 어플리케이션의

사용자 인터페이스의 모양을 변경하기 위해 런타임에 또는 디자인 타임에 사용할 수 있습니다.

파이어몽키 효과는 효과가 적용되어 있는 컨트롤이나 기능을 비활성화 하지 않습니다.

이미지 효과는 3D 컨트롤과 함께 동작하지 않습니다; 그렇지만 3D 콘텐트를 표시하는 TViewport3D나

2D 컨트롤과는 같이 동작합니다.

다음은 툴 팔레트에서 사용 가능한 이미지와 변환 효과 모두를 표시한 화면입니다:

8

TEffect, TImageFXEffect, TFilter 및 TShaderFilter

TEffect는 파이어몽키 그래픽효과 클래스의 기초 클래스입니다. FMX.Effects 에 정의되어 있는 대부분의

클래스들은(직접적 또는 간접적으로) TEffect에서 파생되었습니다. TEffect의 자식 클래스인

FMX.Filter.Effects. TImageFXEffect는 FMX.Filter.Effects에 정의된 일부 필터 클래스의 기초 클래스입니다.

TFilter 는 모든 필터에 대한 기초 클래스입니다.

TEffect 하위 클래스들은 툴 팔레트에서 찾을 수 있는 비시각적 컴포넌트들입니다. 효과는 모든

파이어몽키 비쥬얼 컴포넌트에 적용할 수 있습니다. 설계 시점에 효과 클래스를 사용하기 위해, 효과

클래스는 반드시 효과를 적용하고 싶은 컴포넌트의 밑에 위치하는 차일드 이어야 합니다; 예를 들어

폼 위에 버튼이 있다면, 효과를 추가하기 위해, 툴 팔레트에서 효과 컴포넌트를 폼에 내려 놓고

스트럭처 뷰에서 효과 컴포넌트를 이동하여 트리 구조에서 버튼의 자식이 되도록 합니다.

효과가 시각적 컴포넌트에 적용되었을 때, 효과를 트리거 하기 위해, Trigger 속성을 이용합니다. 각

TEffect 하위 클래스들은 설정 할 수 있는 추가적인 속성들이 있습니다. 파이어몽키에서, 비시각적

컴포넌트들은 디자인 시점에는 보이지 않지만, 스트럭처 뷰에서는 보입니다.

TShaderFilter 는 GPU 쉐이더에 대한 특별한 필터 클래스입니다. TShaderFilter는 이미지 효과에서

사용되는 대부분의 필터들의 기본 클래스입니다.

이미지 효과 유형

이미지 효과는 다섯 개의 다른 카테고리로 나눕니다: 개별적으로 픽셀을 수정하는 효과, 픽셀의 이웃

픽셀을 고려하는 효과, 첨가적인 효과, 전체 이미지를 수정하는 효과 및 전환효과.

개별적으로 픽셀 수정 효과

이러한 효과들은 통상적으로 색상 변경에 적용합니다. 각 픽셀의 색상은 자체 색 이라고 할 수

있습니다.

TInvertEffect – 오브젝트의 텍스처 색상을 바꿉니다.

TColorKeyAlphaEffect – 특정 색상의 픽셀을 투명하게 합니다. ColorKey 속성을 투명하게 하려는

색상 키로 지정합니다. Tolerance 속성은 색상 간의 허용 오차를 수정할 수 있습니다.

Tolerance가 0 이면, 아무 색상도 투명해지지 않습니다. Tolerance가 증가되면, 색상이 점점 더

투명해집니다.

TMaskToAlphaEffect – 그레이 스케일 이미지를 알파에 의해 마스크 되는 흰색 이미지로

변환합니다.

TMonochromeEffect –오브젝트의 텍스처를 흑백으로 변경합니다.

TBloomEffect - 표시 오브젝트의 텍스처에 밝은 영역을 강화합니다. 기본 이미지의 밝기와 채도

및 밝게 비춰지는 영역은 TBloomEffect 속성을 통해 설정합니다.

TGloomEffect – 표시 오브젝트의 텍스처에 어두운 영역을 강화합니다. 기본 이미지의 밝기와

채도 및 어두워 지는 영역은 TGloomEffect 속성을 통해 설정합니다.

TContrastEffect – 표시 오브젝트의 텍스처에 대한 밝기 및 대비를 변경합니다. Brightness 속성을

9

사용하여 밝기를 수정합니다. Contract 속성으로 대비를 증가합니다.

Brightness 및 Contrast 속성에 기본값이 사용됩니다(Brightness=0,Contrast=1.5).

THueAdjustEffect – 오브젝트의 텍스처에 대한 전체적인 색상을(색상의 다양함이나

색조)변경합니다. Hue 속성을 사용하여 색상을 수정합니다.

TFillRGBEffect – 단색으로 표시 오브젝트의 텍스처의 불투명 픽셀을 채웁니다. Color 속성으로

텍스처의 픽셀을 채우는 색상을 설정합니다.

TFillEffect – 단색으로 표시 오브젝트의 텍스처를 채웁니다. Color 속성으로 텍스처를 채우는

색상을 설정합니다.

픽셀의 이웃을 고려한 효과

이 효과 타입은 픽셀의 새로운 값을 정의하기 위해 픽셀의 이웃을 사용하는 알고리즘을 사용하여

적용됩니다.

이 효과들은 흐리게 하고 왜곡 효과가 포함되어 있습니다.

TBlurEffect – 표시 오브젝트의 텍스처를 흐리게 합니다. TEffect에서 제공되는 속성뿐만 아니라

TBlurEffect는 흐림의 부드러움을 변경할 수 있는 Softness 속성이 있습니다.

TDirectionalBlurEffect – 양방향 흐림 알고리즘을 사용하여 표시 오브젝트의 텍스처를 흐리게

합니다. Angle 속성으로 흐림의 방향을 변경하고, Blur Amount 속성으로 효과의 흐림 정도를

수정합니다.

TBoxBlurEffect – 박스 흐림 알고리즘을 사용하여 표시 오브젝트의 텍스처를 흐리게 합니다.

BlurAmount 속성으로 효과의 흐림 정도를 조정합니다.

TGaussianBlurEffect - 가우스 흐림 알고리즘을 사용하여 표시 오브젝트의 텍스처를 흐리게

합니다. BlurAmount 속성으로 효과의 흐림 정도를 조정합니다.

TRadialBlurEffect - 표시 오브젝트의 텍스처를 방사형 흐림 알고리즘을 사용하여 흐리게 합니다.

TRadialBlurEffect는 BlurAmount 속성으로 효과의 흐림 정도를 조정합니다.

TBandedSwirlEffect - 표시 오브젝트의 텍스처의 밴드들을 나선으로 소용돌이 치게 합니다.

소용돌이 모양의 측면은 AspectRatio 속성으로 사용자 정의 할 수 있습니다. Strength 속성으로

나성의 구불구불한 정도를 지정합니다. Bands 속성은 소용돌이 밴드의 수를 지정합니다.

TBandsEffect - 표시 오브젝트의 텍스처로부터 밝은 영역의 밴드를 생성합니다. 밴드의 밀도는

BandDensity 속성으로 지정합니다. 밴드의 강도는 BandIntensity 속성으로 지정합니다.

BandIntensity 가 0 이라면, TBandsEffect 는 시각적인 효과가 없습니다. BandDensity가 1 이라면,

BandIntensity 값에 도달 할 때까지 이미지의 밝기가 점차 왼쪽 가장자리에서 오른쪽

가장자리로 밝아집니다.

TMagnifyEffect – 표시 오브젝트 텍스처를 원형 영역으로 확대합니다. TMagnifyEffect는 돋보기

효과를 사용합니다. Radius 와 AspectRatio 속성을 통해 원형의 측면은 사용자 정의 할 수

있습니다. Magnification 속성으로 배율 계수를 지정합니다. TMagnifyEffect는 원형의 전체 표면

위에 동일한 배율을 적용합니다.

TPinchEffect – 표시 오브젝트 텍스처를 원형 영역으로 급습합니다. AspectRatio 속성으로 원형의

측면은 사용자 정의 할 수 있습니다. 영역의 나선 정도를 Strength 속성으로 설정합니다.

원형의 반경은 Radius 속성으로 지정합니다.

TRippleEffect – 표시 오브젝트의 텍스처에 파도 물결이 겹쳐집니다. 파문의 측면은 Amplitude,

10

AspectRatio 및 Phase 속성들을 사용하여 사용자 정의 할 수 있습니다. Frequency 속성으로

물결의 양을 설정합니다.

TSmoothMagnifyEffect – 표시 오브젝트 텍스처를 원형으로 부드럽게 확대합니다. 확대된 원형

영역은 두 동심 영역으로 구성되어 있습니다: a) 간단한 TMagnifyEffect 효과가 적용되는 내부

원형 영역. InnerRadius 속성은 중심 원형 지역의 반지름을 지정합니다. 이 지역에서 하나의

확대 요인이 적용됩니다. b) 외부 원형 영역. OuterRadius 속성이 영역의 반경을 지정합니다.

외부 반경에서 내부 반경으로 내부 원형 영역 확대 계수에 도달 할 때까지 이 지역에서 확대

계수는 점차 증가 합니다. OuterRadius 값이 InnerRadius 값보다 작거나 같다면

TSmoothMagnifyEffect는 TMagnifyEffect와 같은 효과가 있습니다. 원형 지역의 측면은

AspectRatio 속성을 통해 사용자 정의 할 수 있습니다. 확대 배율 계수는 Magnification

속성으로 설정할 수 있습니다.

TSwirlEffect - 표시 오브젝트 텍스처를 나선으로 소용돌이 치게 합니다. 소용돌이 측면은

AspectRatio 속성을 사용하여 사용자 정의 할 수 있습니다. Strength 속성으로 소용돌이

구불구불 정도를 정의합니다.

TWaveEffect - 표시 오브젝트의 텍스처에 웨이브 패턴을 적용합니다. 웨이브 양은 WaveSize

속성으로 조정 할 수 있습니다. 웨이브 부분은 Time 속성으로 수정할 수 있습니다.

애니메이션 시간은 웨이브가 시간 내에 통과한 변경 사항을 시뮬레이터 합니다.

TWrapEffect -표시 오브젝트의 텍스처를 두 곡선에 따라, 래핑합니다. TWrapEffect는 Bezier

곡선을 사용합니다. Bezier 곡선은 4 점에 의해 정의됩니다. TWrapEffect 속성은 곡선, 끝과

시작 지점, 두 개의 조절 점 각각에 대해, 정의합니다. 래핑은 왼쪽과 오른쪽 가장자리에서

시작하면서 이미지를 커브하여 적용됩니다. LeftControl1, LeftControl2, LeftEnd, 및 LeftStart

속성들은 텍스처의 왼쪽에서 사용하는 곡선을 정의하는 포인트를 설정합니다. RightControl1,

RightControl2, RightEnd, 및 RightStart 텍스처의 오른쪽에서 사용하는 곡선을 정의하는 포인트를

설정합니다.

첨가 효과

첨가 효과는 원본 이미지에 새로운 요소를 추가하여 이미지에 영향을 줍니다. 요소는 이미지의

가장자리 또는 전체 이미지에 추가 할 수 있습니다.

TGlowEffect – 표시 오브젝트 주위를 환하게 빛나게 하는 효과를 생성합니다. TEffect에서

제공되는 속성들뿐만 아니라, TGlowEffect 는 3 개의 특정 속성들을 제공합니다: GlowColor,

Opacity, 및 Softness.

TInnerGlowEffect - 표시 오브젝트 안을 환하게 빛나게 하는 효과를 생성합니다. TEffect에서

제공되는 속성들뿐만 아니라, TGlowEffect 는 3개의 특정 속성들을 제공합니다: GlowColor,

Opacity 및 Softness.

TReflectionEffect - 표시 오브젝트 아래에 반사 효과를 생성합니다. TEffect에서 제공되는

속성들뿐만 아니라, TReflectionEffect 는 3 개의 특정 속성들을 제공합니다: Length, Offset, 및

Opacity.

TShadowEffect - 표시 오브젝트에 그림자 효과를 생성합니다. TEffect에서 제공되는 속성들뿐만

아니라, TShadowEffect 는 5 개의 특정 속성들을 제공합니다: Direction, Distance,

Opacity,ShadowColor, 및 Softness.

TEmbossEffect - 표시 오브젝트에 양각 효과를 생성합니다. TEmbossEffect는 배경에 상대적으로

11

이미지가 내려가거나 올라가게 대비 라인을 찾아 그림자를 추가합니다.엠보싱 진폭과 넓이는

Amount 와 Width 속성으로 조정할 수 있습니다.

TPaperSketchEffect – 표시 오브젝트를 스케치하는 효과를 생성합니다. TPaperSketchEffect의

스케치를 그리는 브러시의 크기는 BrushSize 속성으로 조정할 수 있습니다.

TPencilStrokeEffect - 표시 오브젝트의 텍스처를 스케치하는 효과를 생성하면 연필이 그려져

나타납니다. TPencilStrokeEffect는 BrushSize 속성을 통해 지정되는 스케치를 그립니다.

TPixelateEffect - 표시 오브젝트의 텍스처에 모자이크 효과를 생성합니다. TPixelateEffect는

텍스처 세부 사항을 줄일 수 있습니다. 세부사항의 양은 BlockCount 속성을 통해 변경할 수

있습니다.

TSepiaEffect - 세피아(어두운 갈색 - 회색)효과를 만듭니다. TSepiaEffect는 표시 오브젝트의

텍스처에 영향을 미칩니다. 텍스처에 적용되는 세피아 색의 강도는 Amount 속성으로

지정합니다.

TSharpenEffect - 표시 오브젝트의 텍스처를 선명하게 하는 효과를 생성합니다. TSharpenEffect는

텍스처의 픽셀 사이의 강도 차이를 증가시킵니다. 선명도는 Amount 속성으로 지정합니다.

TToonEffect - 표시 오브젝트의 텍스처에 만화 같은 음영을 적용하는 효과를 생성합니다.

TToonEffect는

텍스처에 사용되는 색상의 수준을 감소시킴으로써 오브젝트 텍스처를 만화화합니다. 색상

수준은 Level 속성을 통해 설정할 수 있습니다.

이미지 전체를 수정하는 효과

이러한 효과는 입력 이미지 위에 기하학적 변경 사항을 적용합니다.

TAffineTransformEffect – 표시 오브젝트의 텍스처에 아핀 변환을 (직선과 직선에 누워진 지점

사이의 거리의 비율을 보존합니다. 그것은 반드시 직선의 각도나 길이를 보존하지 않습니다)

적용하는 효과를 만듭니다. TAffineTransformEffect는 효과가 적용되는 오브젝트의 텍스처를

회전 확장 할 수 있습니다. 변경은 오브젝트 전체에 적용되지 않고 오브젝트의 텍스처에만

적용됩니다. 오브젝트의 크기와 위치는 영향을 받지 않습니다. 회전 변환을 적용하려면

Rotation 속성을 변경합니다. 오브젝트의 텍스처를 확장하려면 Scale 속성을 설정합니다.

TCropEffect – 표시 오브젝트의 텍스처로부터 사각형 영역이 나타납니다. 사각형 영역은

LeftTop 과 RightBottom 속성으로 지정되는 오브젝트의 텍스처처럼 잘라지어

표시됩니다(XE2에만 있는 속성). 잘린 영역은 필요하다면, 오브젝트에 맞게 조정하여

오브젝트의 왼쪽 상단에 위치를 변경합니다.

TNormalBlendEffect - 두 이미지의 일반적인 혼합을 만듭니다. TNormalBlendEffect 시각적 개체의

텍스처에 영향을 미칩니다. 일반적인 혼합은 효과가 적용된 텍스처와 Target 속성에 의해

지정된 비트맵 사이에 이루어집니다. Target 속성이 설정되어 있지 않으면, TNormalBlendEffect는

아무런 시각적 효과가 없습니다. 대상의 이미지가 투명 영역이 없다면 오브젝트의 이미지는

완전히 대상 이미지로 덮여 있습니다.

TPerspectiveTransformEffect – 표시 오브젝트의 텍스처에 원근 변환을 적용하는 효과를

생성합니다. 원근 변환은 BottomLeft, BottomRight, TopLeft, 및 TopRight 속성들을 사용하여

설정하고 사용자 정의 할 수 있습니다(XE2에만 있는 속성). 각 속성은 최종 변환의 모서리

12

지점을 지정합니다.

TTilerEffect – 여러 개의 열과 행을 교차하여 표시 오브젝트의 텍스처를 타일화하는 효과를

생성합니다. 열과 행의 개수는 HorizontalTileCount 과 VerticalTileCount 속성으로 지정합니다.

VerticalOffset 및 HorizontalOffset 속성을 통해 각 타일의 수직 및 수평 오프셋을 설정할 수

있습니다. 타일의 크기는 텍스처의 원래 크기가 분할되어 있는 열과 행의 수에 따라

결정됩니다. 텍스처는 비율을 유지하지 않고, 타일의 크기에 맞게 크기가 조정됩니다.

변환 효과

파이어몽키는 간단한 페이드 에서부터 멋진 밴드 소용돌이까지 소스 픽셀들을 점진적으로 대상 비트맵

이미지로 변환하는 20 개 이상의 이미지 전환 효과를 포함합니다. 변환의 진행 정도는 임의의 비율로

설정할 수 있습니다. 이 비율은 Progress 속성을 사용하여 시간이 지남에 따라 변환에 애니메이션 할

수 있습니다.

TBandedSwirlTransitionEffect – 표시 오브젝트의 텍스처를 소용돌이 치면서 표시 오브젝트의

텍스처와 또 다른 텍스처간에 전환합니다. 전환은 효과가 적용되어 있는 오브젝트의 텍스처와

Target 속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면,

효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로 사용합니다.

TBandedSwirlTransitionEffect는 나선을 형성하면서 오브젝트의 텍스처를 소용돌이 치게 합니다.

나선이 형성되는 되는 주파수는 Frequency 속성으로 지정 할 수 있으며, 나선의 왜곡 정도는

Strength 속성으로 지정합니다.

TBlindTransitionEffect - 표시 오브젝트의 텍스처와 다른 텍스처 사이의 전환을 하는 블라인드

효과를 생성합니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해 지정된

비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면, TBlindTransitionEffect는

어떠한 시각적 효과도 없습니다. TBlindTransitionEffect는 블라인드를 형성하면서 오브젝트

텍스처를 스트립(조각)으로 분할합니다. 블라인드 수는 NumberOfBlinds 속성으로 지정합니다.

TBloodTransitionEffect - 떨어지는 동작을 사용하여 표시 오브젝트의 텍스처와 다른 텍스처

사이의 전환을 적용합니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해

지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면, 효과가 적용되는

오브젝트의 텍스처를 전환의 두 번째 텍스처로 사용합니다. 떨어지는 정도는 RandomSeed

속성으로 조정합니다.

TBlurTransitionEffect - 표시 오브젝트의 텍스처와 다른 텍스처 사이의 흐림을 전환합니다.

전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해 지정된 비트맵 사이에

이루어집니다. Target 속성이 지정되어 있지 않으면, 효과가 적용되는 오브젝트의 텍스처를

전환의 두 번째 텍스처로 사용합니다.

TBrightTransitionEffect - 두 텍스처를 밝게 함으로서 표시 오브젝트의 텍스처와 다른 텍스처

사이를 전환합니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해 지정된

비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면, 효과가 적용되는

오브젝트의 텍스처를 전환의 두 번째 텍스처로 사용합니다.

TCircleTransitionEffect - 원형 마스크를 사용하여 표시 오브젝트의 텍스처와 다른 텍스처 사이의

전환을 적용합니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해 지정된

비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면, TCircleTransitionEffect 는

13

아무런 시각적 효과가 없습니다. TCircleTransitionEffect는 원형 지역에서 오브젝트의 텍스처를

블라인드 합니다. 오브젝트의 텍스처는 원형 지역 안에 있습니다. 원형의 크기는 Size

속성으로 지정됩니다. 원형 영역의 크기는 오브젝트 크기와 상관이 있으며 Progress 속성에

영향을 받습니다. 오브젝트가 사각형 형태라면, 블라인드 된 영역은 타원형입니다. 원형의

흐릿함은 FuzzyAmount 속성으로 조절합니다.

TCrumpleTransitionEffect – 두 개의 텍스처를 구기면서 표시 오브젝트의 텍스처와 다른 텍스처

사이의 전환을 합니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해

지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면 효과가 적용되는

오브젝트의 텍스처를 전환의 두 번째 텍스처로 사용합니다. 적용된 왜곡은 RandomSeed

속성에 의해 조절됩니다.

TDissolveTransitionEffect – 임의의 지역을 점점 사라지게 하면서 표시 오브젝트의 텍스처와

다른 텍스처 사이의 전환을 합니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target

속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면,

TDissolveTransitionEffect는 아무런 시각적 효과가 없습니다. 디졸브 되는 영역은 RandomSeed

속성으로 조절합니다.

TDropTransitionEffect - 무작위로 첫 번째 텍스처의 픽셀 열을 내려 놓기 하면서 표시

오브젝트의 텍스처와 다른 텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된

오브젝트의 텍스처와 Target 속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이

지정되어 있지 않으면, 효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로

사용합니다. RandomSeed 속성을 수정하여 드립핑을 변경할 수 있습니다.

TFadeTransitionEffect –두 개의 텍스처를 사라지게 하면서 표시 오브젝트의 텍스처와 다른

텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target

속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면

TFadeTransitionEffect는 아무런 시각적 효과가 없습니다.

TLineTransitionEffect - 텍스처를 연결하는 줄을 사용하면서 표시 오브젝트의 텍스처와 다른

텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target

속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면

TLineTransitionEffect는 아무런 시각적 효과가 없습니다. 두 텍스처를 구분하는 라인은 Origin,

Offset, 및 Normal 속성에 의해 설정됩니다. 라인의 흐림 정도를 설정하기 위해 FuzzyAmount

속성을 사용합니다. 두 텍스처 사이의 전환의 진행 상황은 Progress속성을 사용하여 변경할 수

있습니다. Progress 가 0% 이면, 선은 원래 지점을 통과하며 Progress가 100%이면, 라인은

오프셋 지점을 통과합니다. 라인을 정의하는 두 번째 포인트는 Normal 속성에 따라

계산됩니다. Normal 속성은 라인 방향을 결정합니다. Normal속성의 X 좌표가 0 이라면

라인은 X 축과 평행합니다. Normal속성의 Y 좌표가 0 이라면 라인은 Y 축과 평행합니다.

TMagnifyTransitionEffect - 부드러운 확대 (원활하게 순환 영역을 확대) 효과를 사용하여 표시

오브젝트의 텍스처와 다른 텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된

오브젝트의 텍스처와 Target 속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이

지정되어 있지 않으면, 효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로

사용합니다. TMagnifyTransitionEffect는 오브젝트의 텍스처에 부드러운 확대 효과를 적용하며

확대된 영역의 중간에 타깃을 삽입합니다.

타깃 또한 효과가 적용될 때 구부러집니다.

14

TPixelateTransitionEffect – 두 텍스처를 모자이크 효과를 적용하면서 표시 오브젝트의 텍스처와

다른 텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target

속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면,

효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로 사용합니다.

TRippleTransitionEffect – 물결을 표시하며 오브젝트의 텍스처와 다른 텍스처간에 전환이 이루어

집니다. Target 속성이 지정되어 있지 않으면 효과가 적용되는 오브젝트의 텍스처를 전환의 두

번째 텍스처로 사용합니다. 물결은 중앙에 있으며 두 텍스처에 적용됩니다.

TRotateCrumpleTransitionEffect – 두 텍스처를 구기면서 표시 오브젝트의 텍스처와 다른

텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target

속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면

TRotateCrumpleTransitionEffect 또한 효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째

텍스처로 사용합니다. 여백으로부터 시계방향으로 텍스처를 회전하면서 구겨집니다. 회전

중심은 텍스처의 중앙 안에 있습니다. 구겨짐을 형성하는 왜곡 정도는 RandomSeed 속성으로

조절합니다.

TSaturateTransitionEffect – 첫 번째 텍스처를 포화시키면서 표시 오브젝트의 텍스처와 다른

텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target

속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면,

TSaturateTransitionEffect 또한 효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로

사용합니다. 전환은 첫 번째 텍스처가 포화된 후에 이루어집니다.

TShapeTransitionEffect - 불규칙한 모양을 닦으면서 표시 오브젝트의 텍스처와 다른 텍스처간에

전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해

지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면,

TShapeTransitionEffect는 시각적 효과가 발생하지 않습니다. 닦여진 불규칙한 모양은 텍스처의

중간에 위치하고 있습니다.

TSlideTransitionEffect – 텍스처를 슬라이딩하면서 표시 오브젝트의 텍스처와 다른 텍스처간에

전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해

지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면, TSlideTransitionEffect

또한 효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로 사용합니다. 슬라이드의

최대 거리는, X 와 Y 축에서, SlideAmount 속성을 통해 설정 된 포인트를 사용하여 지정합니다.

TSwirlTransitionEffect – 첫 번째 텍스처를 소용돌이 치면서 표시 오브젝트의 텍스처와 다른

텍스처간에 전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target

속성에 의해 지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면,

TSwirlTransitionEffect 또한 효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로

사용합니다. TSwirlTransitionEffect는 나선을 만드는 오브젝트의 텍스처를 소용돌이 치게 합니다.

Strength 속성을 통해 나선의 꼬임 양을 설정합니다. 소용돌이 중심은 텍스처의 중심에

있습니다.

TWaterTransitionEffect – 물 효과를 사용하여 표시 오브젝트의 텍스처와 다른 텍스처간에

전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해

지정된 비트맵 사이에 이루어집니다.

Target 속성이 지정되어 있지 않으면, TWaterTransitionEffect 또한 효과가 적용되는 오브젝트의

텍스처를 전환의 두 번째 텍스처로 사용합니다. TWaterTransitionEffect는 두 번째 텍스처에

15

불안한 물 효과를 적용하고 첫 번째 텍스트에(효과가 적용되는 오브젝트의 텍스처) 오버랩

됩니다. 물 방해를 변경하려면 RandomSeed 속성을 설정합니다.

TWaveTransitionEffect – 수직 웨이브를 사용하여 표시 오브젝트의 텍스처와 다른 텍스처간에

전환이 이루어 집니다. 전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해

지정된 비트맵 사이에 이루어집니다. Target 속성이 지정되어 있지 않으면,

TWaveTransitionEffect 또한 효과가 적용되는 오브젝트의 텍스처를 전환의 두 번째 텍스처로

사용합니다. 웨이브 효과는 첫 번째 텍스처에 적용됩니다.

TWiggleTransitionEffect - 표시 오브젝트의 텍스처와 다른 텍스처간에 전환이 이루어집니다.

전환은 효과가 적용 된 오브젝트의 텍스처와 Target 속성에 의해 지정된 비트맵 사이에

이루어집니다. Target 속성이 지정되어 있지 않으면, TWiggleTransitionEffect는 또한 적용되는

오브젝트의 텍스처를 효과가 전환의 두 번째 텍스처로 사용합니다.

엠바카데로 DocWiki에 이러한 효과의 일부를 (애니메이션 GIF를 사용하여)을 볼 수 있습니다

http://docwiki.embarcadero.com/RADStudio/en/FireMon key_Image _Effects

효과 트리거 설정

이미지 효과는 속성이 변경되면 트리거 되고, 응답에서 Enabled 플래그를 설정합니다. 트리거는 모든

임의의 속성으로 작동하지 않고 컴포넌트의 내부 이벤트를 처리하는 동안 체크되는 특정 속성에서만

작동합니다 내장 된 모든 트리거는 불린 속성을 확인하고 관례에 의해 이러한 속성의 이름은 "is"로

시작합니다.

TControl은 각 컨트롤과 모양에 관한 트리거 4 개를 제공합니다:

IsDragOver IsFocused IsMouseOver (requires HitTest set to True) IsVisible

다른 내장된 트리거들을 포함합니다:

IsActive (TCustomForm) IsChecked (TMenuItem) IsOpen (TEffect) IsPressed (FMX.Controls.TCustomButton) IsSelected (TMenuItem, TTabItem, TListBoxItem, TTreeViewItem)

트리거의 약간 다른 집합은 애니메이션 효과가 제공됩니다(아래의 애니메이션 섹션을 참조).

FMX.Types.TFmxObject 는 ApplyTrigger 효과에 추가하여 프로시저 StartTriggerAnimation,

StartTriggerAnimationWait, StopTriggerAnimation를 정의합니다.

효과는 이러한 속성 중 하나가 코드의 결과 또는 사용자 작업으로 변경할 때 적용하도록 설정할 수

있습니다. 트리거 조건이 더 이상 유지되지 않을 때, 효과가 제거됩니다. 트리거 조건은 균일하게

체크하도록 제한되고, 트리거가 하나 이상의 조건을 포함하고 있다면, 발생하는 트리거 모두 true로

평가해야 합니다.

트리거는 세미콜론으로 구분하여 하나 이상의 트리거 조건을 포함하는 문자열로 표시됩니다.

16

각 트리거 조건은 속성 이름, 등호 및 트리거 값으로 구성됩니다. 내장 된 모든 트리거들은 불린 형

입니다 그래서 그 값은 True 또는 False 입니다. 예를 들면 다음과 같습니다:

IsMouseOver=true

트리거 조건은 Trigger 속성에 저장됩니다.

17

이미지 효과 사용하기

파이어몽키는 다양한 시각적 효과를 달성하기 위해 개별적으로 또는 다른 효과들과 합쳐서 이미지를

수정하는 내장 된 여러 종류의 이미지 효과들을 제공합니다.

다음 단계들을 수행하여 몇몇의 기본 이미지 효과를 사용하는 파이어몽키 어플리케이션을 만들어

보겠습니다.

1 단계: 사진에 효과 적용하기

파이어몽키에서, 사진에 이미지 효과를 적용하는 것은 간단한 과정입니다. 사진을 가지고 있는

컴포넌트를 간단히 상성하고 이미지 효과 컴포넌트들 중의 하나를 적용합니다.

새로운 파이어몽키 어플리케이션을 생성합니다(File > New > FireMonkey HD Application).

툴 팔레트 검색 박스에서 “image” 라고 입력하고, TImage 컴포넌트를 더블 클릭하여 폼 위에 TImage

컴포넌트를 놓습니다:

툴 팔레트에서 TImage 컴포넌트 선택하기

18

폼 디자이너에 TImage 컴포넌트 배치하기

TImage 컴포넌트가 폼 디자이너 중앙에 있지 않다는 것을 보실 수 있습니다. 그림에서 보여지는

것처럼, 가능한 한 크게 이미지 사이즈를 조절해야 합니다. TImage 컴포넌트의 사이즈가 폼의

클라이언트 영역과 같아지도록 폼 디자이너에서 TImage 컴포넌트를 선택하고, 오브젝트 인스펙터에서

Align 속성을 alClient로 변경합니다.

이미지 효과를 적용하고 싶은 사진을 선택합니다. TImage 컴포넌트는 Bitmap 속성 안에 사진을

보유합니다. 오브젝트 인스펙터에서 Bitmap 속성을 선택하고 사진을 선택하기 위해 Edit… 메뉴를

사용합니다.

TImage 컴포넌트에서 사진 선택

이제 이미지 효과 컴포넌트를 선택하겠습니다. 툴 팔레트로 가서, 검색 박스에 “effect”를 입력하고

TRippleEffect를 선택합니다. 툴 팔레트에 유용한 많은 효과들을 보실 수 있습니다. 저희의 API

참조자료(FMX. Filter.Effects)에서 이러한 효과에 대한 자세한 설명을 보실 수 있습니다.

19

스트럭처 패널에 RippleEffect 컴포넌트가 표시됩니다.

효과를 적용하기 위해, 효과 컴포넌트는 다른 컴포넌트의 자식으로 지정되어 있어야 합니다. 이

경우에는,

스트럭처 패널에서 RippleEffect1을 드래그하여 Image1에 드롭하여 RippleEffect1를 Image1의 자식으로

지정합니다.

RippleEffect 컴포넌트를 Image1 컴포넌트의 자식으로 만들기

폼 디자이너에서 RippleEffect 가 이미 동작하고 있는 것을 보실 수 있습니다

20

폼 디자이너에서 사진에 물결 효과 적용

또한 RippleEffect 일부 속성을 변경하여 이미지에 적용하는 방법을 변경할 수 있습니다:

Frequency – 물결의 주파수를 지정합니다. 주파수는 System.Single 값으로 0.00 ~ 100.00 범위의

값을 가질 수 있습니다. 주파수를 명백하게 지정하지 않으면, 70으로 간주합니다.

Amplitude – 물결의 진폭을 지정합니다. 진폭은 System.Single 값으로 0.00 ~ 1.00 범위의 값을

가질 수 있습니다. 진폭을 명백하게 값을 지정하지 않으면, 0.1로 간주합니다.

AspectRatio – 물결의 폭과 높이간의 비율을 지정합니다. AspectRatio는 0.50 ~ 2.00 범위의 값을

갖는 System.Single 값입니다. AspectRatio을 명백하게 값을 지정하지 않으면 1.50로 간주합니다.

Phase – 물결의 상을 지정합니다. Phase는20.00 ~ 20.00 범위의 값을 갖는 System.Single 값입니다.

Phase 값을 명백히 지정하지 않으면 0.00로 간주합니다.

Center - 센터는 TPointF 값입니다. Center 값을 명백히 지정하지 않으면 (150,150)로 간주합니다.

다음과 같이 PointF 함수를 사용하거나 X 와 Y 좌표로 Center에 TPointF 값을 할당합니다:

// Delphi code: RippleEffect1.Center := PointF(0, 0); // C++ code: RippleEffect1->Center = PointF(250,150);

예를 들어 Frequency 속성을 20으로 수정하면 다음 화면에 보이는 것처럼 효과가 변경됩니다.

21

2 단계: 효과를 활성화하기 위한 트리거 사용하기.

위의 예제를 사용하여, RippleEffect의 Enabled 속성을 False로 지정합니다.

Trigger 속성을 IsMouseOver =True 로 수정합니다.

프로그램을 실행하고 비트맵 위로 마우스를 이동하면 RippleEffect가 발생합니다.

쉐이더 필터 샘플 프로젝트

Start > Programs > Embarcadero RAD Studio XE2 >Samples> FireMonkey>ShaderFilters 에 ShaderFilters 샘플

프로젝트가 있습니다.

ShaderFilters 샘플 프로젝트에 대한 하위버전 리포지토리:

https://radstudiodemos.svn.sourceforge.net/svnroot/radstudiodemos/branches/RadStudio_XE2/FireMonkey/ShaderFilters/.

ShaderFilters 샘플 프로젝트는 다음과 같은 컴포넌트들을 사용합니다:

TImage 오브젝트 3개

TListBox 오브젝트 3개

TSplitter 오브젝트 2개

TPanel 오브젝트 2개

TAniIndicator 1개

TButton 오브젝트 2개

TLabel 1개

TStyleBook 1개

TLayout 오브젝트 2개

첫 번째 TListBox는 효과의 메인 카테고리들을 표시합니다. 첫 번째 리스트 박스에서 효과의

카테고리를 선택할 때, 몇 개의 특정 효과 목록이 두 번째 리스트 박스에 표시됩니다. 효과 리스트에서

특정 아이템을 선택하면, 각각의 효과가 이미지에 적용됩니다.

첫 번째 TListBox에서 카테고리를 선택한 다음에 두 번째 TListBox에 효과를 표시합니다.

선택한 효과는 소스와 타깃 이미지에 적용되고 결과 미리 보기가 대상 지역에 표시됩니다.

대부분의 효과들은 추가적인 특성들을(BlurAmount, BrushSize, 기타 등등)가지고 있습니다. 이러한 효과들

중 하나를 선택했을 때, 옵션들이 세 번째 TListBox에 표시됩니다. TScrollBar를 사용하여 효과의

특성들을 변경할 수 있습니다.

전환 주요 카테고리의 효과는 재생 / 일시 정지로 쓰여진 추가적인 버튼을 가지고 있습니다. 이

버튼을 클릭하여 사진 전환을 미리 보기 합니다.

이 벤치 마크 버튼을 클릭하면 버튼 옆에 있는 라벨은 효과가 사진에 적용 될 때까지 걸리는 시간을

표시합니다.

22

애니메이션 애니메이션은 시간이 지남에 속성 값을 수정합니다. 애니메이션은 자동 또는 수동으로 시작하며 둘 다

옵션으로 지연 시간을 줄 수 있습니다. 정의 된 기간 동안의 과정을 실행 한 후에는 애니메이션을

중지 할 수 있고 다시 시작 할 수 있습니다. 또는 같은 작업을 반대로 수행할 수도 있습니다.

비 시각적 애니메이션 컴포넌트들은 Color, ColorKey, Gradient, Float, FloatKey, Rect, Bitmap, BitmapList, 및

Path 속성들을 사용합니다.

오브젝트 인스펙터에서 속성 값 앞에 필름 아이콘이 표시되는 애니메이션 관련 컴포넌트의 속성들을 볼 수

있습니다.

23

애니메이션 유형

애니메이션은 세 가지 범주로 분류합니다:

시작 값에서 최종 값까지 지정합니다:

ο TFloatAnimation는 위치(X, Y, Z 축 각각이 설정 되어야 함), 회전 및 투명도와 같은 숫자

속성을 변경합니다.

ο TRectAnimation는 TBounds 속성의 네 모서리의 위치를 변경합니다.

ο TColorAnimation는 TAlphaColor (실제로 카디널 숫자입니다) 타입을 포함하여 색상을 포함하는

문자 또는 정수 속성을, 색상의 값을 빨강, 초록, 파랑 및 알파로 수정하여 변경합니다..

ο TGradientAnimation는 경사도(TGradient 타입)를 지정하는 각 포인트의 색상을 수정하여

경사도를 변경합니다.

ο TBitmapAnimation 는 시작하는 비트맵 이미지에서 다른 최종 이미지(TBitmap타입)로

그리면서

투명도를 증가시키고 시야에서 점점 사라지게 하면서 전환합니다.

두 개의 값만이 아니라 시리즈 값들을 통해 지정 합니다: 처음에서 두 번째로, 두 번째에서

세 번째로, 그리고 그 외:

ο TFloatKeyAnimation 숫자 리스트를 통해 전환합니다.

ο TColorKeyAnimation 색상 리스트를 통해 전환합니다.

ο TPathAnimation는 경로를 따라 선택적으로 회전하면서 오브젝트의 2D 위치를 수정합니다.

보간 없이 리스트를 통해 절차를 진행합니다:

ο TBitmapListAnimation는 모든 이미지가 하나의 이미지로 수평 결합되면서 특정 시간 동안

슬라이드 쇼처럼 작동합니다. 빠른 프레임 속도(짧은 기간 및/또는 여러 이미지)로

영화처럼 보입니다.

애니메이션 생성

애니메이션은 다른 하위 컴포넌트처럼 애니메이션 되는 오브젝트의 자식으로 첨부합니다.

PropertyName 속성은 예를 들어, "Opacity" 와 "Position.Y" 같은 속성 경로로 지정하는데 사용합니다.

오브젝트 인스펙터에, 보통 필름 아이콘으로 표시되는 애니메이션 속성들이 있습니다. 애니메이션을

생성하기 위해 속성 값의 드롭-다운 메뉴에서 선택하면 자동으로 PropertyName을 지정합니다. 툴

팔레트에서 애니메이션 오브젝트를 추가하고 PropertyName을 수동으로 설정하기도 합니다.

TFmx 개체는 코드에서 숫자와 색상 애니메이션을 만들 수 있는 몇 개의 편리한 메소드를 제공하는데

매개변수로 PropertyName과 종료 값을 필요로 합니다.

이러한 애니메이션들은 항상 현재 값에서 즉시 시작하고 반복이 안되며, 완료되면 스스로 해제됩니다.

부동 소수 애니메이션 역시 끝날 때까지 메인 스레드에서 기다리거나 지연할 수 있게 하고 시작합니다.

24

애니메이션타입과 보간(interpolation) 속성

AnimationType과 Interpolation은 중요한 애니메이션 속성들입니다.

AnimationType는 애니메이션의 보간이 적용되는 방법을 결정합니다. TAnimationType을 사용하여 시작

값부터 끝나는 값까지(종료 값) 변경하는 방법을 지정합니다. 이차 함수: y = x **2의 그래프를 상상해

보십시오. 그래프의 기울기는 x = 0에서 0입니다. 이것은 x = 0 근처에서 y 가 천천히 변한다는 것을

의미합니다. x 가 증가하면, 기울기가 더 가팔라지며 y가 점점 더 빨라진다는 의미입니다. X는

애니메이션에서 시간을 나타내며 y 는 애니메이션 되는 속성의 값입니다.

AnimationType은 아래의 값들 중 하나를 가질 수 있습니다:

atIn - 애니메이션의 TInterpolationType에 적용하는 커브가 애니메이션 속성의 시작 값에서

시작합니다.

atOut - 애니메이션의 TInterpolationType 에 적용하는 커브가 애니메이션 속성의 종료 값에서

시작하고 시작 값으로 뒤로 진행합니다.

atInOut - 애니메이션의 TInterpolationType 적용하는 커브가 애니메이션 속성의 시작 값과 종료

값 모두에서 시작하고 중간 지점에서 만납니다.

애니메이션의 Interpolation 속성은 시간의 지남에 따라 속성의 현재 값이(또는 시작 값) 도착 값(종료

값)을로 변하는 방식을 결정합니다. 속성의 값 그래프 프로팅에서 애니메이션은(TAnimation

PropertyName 속성을 사용하여) 시작 값이 t=0로 표시되는 끝점에 적용됩니다. 여러 다른 경로들이 두

점을 연결할 수 있습니다. 유일한 요구 사항은 시간이 계속 흘러야 한다는 것입니다.

TInterpolationType는 선택 할 수 있는 경로를 다양하게 제공합니다.

Interpolation는 아래 값들 중 하나를 가질 수 있습니다:

itLinear –선형 보간. 속성 값이 애니메이션은 시간이 지남에 따라 지속적으로 변화에

적용됩니다. itQuadratic –시작과 끝 지점 사이의 경로에 이차 함수가 적용됩니다. 경로의

기울기가 시작점에서 0 이고 시간이 지나면서 계속 증가합니다. 스칼라는 끝점이 경로에

이르도록 해주는 함수에 적용됩니다.

itCubic - y = x **3의 보간입니다. 경로의 경사가 시작 지점에 0 이고 경로를 통해 이차

함수보다 훨씬 더 빠르게 증가합니다.

itQuartic – y = x **4의 보간입니다. 경로의 경사가 시작 지점에 0 이고 경로를 통해 이차

함수보다 훨씬 더 빠르게 증가합니다.

itQuintic - y = x **5의 보간입니다. 경로의 경사가 시작 지점에 0 이고 경로를 통해 이차

함수보다 훨씬 더 빠르게 증가합니다.

itSinusoidal - y = sin(x)의 보간입니다. 경로의 경사가 시작 지점에 0 이고 정지 지점에서 sin

curve (x=pi)의 첫 번째 굴절을 둡니다.

itExponential - y = e**x의 보간입니다. 경로의 경사가 시작 지점에 0 이고 경로를 통해 이차

함수보다 훨씬 더 빠르게 증가합니다.

itCircular – 이 보간의 시작점과 끝점의 사이의 경로는 원의 1/4 입니다. 경로의 경사가 시작

지점에 0 이고 끝점에 수직입니다.

25

itElastic – 경로는 기하학적인 보간을 따르지 않습니다. y 좌표 값은 감소할 것이며, 시작점을

향해 뒤로 이동하지만, 시간(x 값)은 항상 양수 방향으로 이동합니다.

itBack - 경로는 기하학적인 보간을 따르지 않습니다. y 좌표 값은 감소할 것이며, 시작점을

향해 뒤로 이동하지만, 시간(x 값)은 항상 양수 방향으로 이동합니다.

itBounce - 경로는 튀는 공을 묘사합니다. 경로는 거리의 시작과 끝 지점을 연결하는 직선에서

멀게 곡선화하는 원형 곡선으로 구성됩니다. 포인트를 중지합니다. 이러한 곡선들은 날카로운

포인트로 연결되어 있습니다.

TAnimation와 TFloatAnimation의 여러 속성이 보간에 의해 지정된 경로에 영향을 줄 수 있습니다.

위의 설명을 위한 것입니다:

StartFromCurrent = True AnimationType = atIn

AnimationType을 atOut로 설정하면 시작점을 끝 점으로 적용하여 발생합니다. 이러한 효과의

애니메이션 속성에 대한 문서를 참조하십시오.

AnimationType 속성의 atIn 값과 TInterpolationType 속성의 itQuadratic 값을 사용하여, 이 애니메이션이

적용 되는 속성의 값은(PropertyName) 시작 지점(이차 함수 x = 0에 해당하는)근처에 천천히 변합니다.

TAnimationType의 atOut으로, 종료 포인트 근처에 천천히 변경합니다. TAnimationType 의 atInOut에서,

천천히 변하고 시작과 끝 점 모두에서 끝납니다. 커브는 중앙 지점에 대해 미러링 하고 중간에서

만납니다.

Interpolation 속성의 itLinear을 사용하여, 속성 값은 시간이 지남에 선형 변화합니다, 시작 및 정지 지점

사이의 경로는 직선입니다.

애니메이션 시작과 종료

폼 디자이너에서 애니메이션의 Enabled 속성이 True로 되어 있다면, 프로그램을 실행한 후에

자동적으로 시작합니다. 코드에서 Enabled 속성을 True로 지정하는 것 또한 애니메이션을 시작합니다;

False로 지정하면 애니메이션을 멈춥니다. Start() 와 Stop () 메소드를 호출하면 Enabled속성을

True/False로 맞추어 지정합니다.

TFloatAnimation에서, StartFromCurrent는 자동적으로 현재 속성값으로 StartValue를 덮어쓰기 합니다(Start

함수를 호출하거나 Enabled 속성을 사용하여). StartFromCurrent 이 True이면 StartValue에 포인트 설정이

없습니다.

이것은 수동 루프나 애니메이션 오브젝트를 재사용 할 때 특히 해당됩니다. 이전 실행이

StartFromCurrent 사용하고, 다음 실행이 StartValue를 사용한다면 StartFromCurrent은 False로 설정해야

합니다.

애니메이션을 종료하기 위해서:

Pause를 True로 설정합니다. 다시 False로 설정하면 그 시점에서 애니메이션을 다시 시작 할

수 있습니다.

26

Stop을 호출하면 애니메이션의 끝으로 건너 뜁니다. 속성은 최종 값으로 설정되고

(Inverse가 False인 경우는 종료값, Inverse가 True인 경우는 시작 값) OnFinish 이벤트가

발생합니다.

StopAtCurrent는 속성을 최종 값으로 지정하지 않지만 OnFinish 이벤트는 역시 발생합니다.

애니메이션 트리거

Enabled 속성으로 자동으로 시작하고 수동으로 Start 및 Stop을 호출하여 시작하는 것 외에,

애니메이션이 속성의 변경에 따라 트리거 할 수 있습니다. 트리거는 모든 임의의 속성으로 작동하지

않고

컴포넌트의 내부 이벤트를 처리하는 동안 체크되는 특정 속성에서만 작동합니다 내장 된 모든

트리거는 불린 속성을 확인하고 관례에 의해 이러한 속성의 이름은 "is"로 시작합니다.

TControl 과 TControl3D은 각 컨트롤과 모양에 관한 트리거 4 개를 제공합니다:

IsMouseOver IsDragOver IsFocused IsVisible

다른 내장된 트리거를 포함합니다:

IsPressed (TCustomButton, TRadioButton, TCheckBox ) IsChecked (TRadioButton, TCheckBox, TMenuItem) IsSelected (TMenuItem, TTabItem, TListBoxItem, TTreeVi ewItem) IsExpanded (TTreeViewItem, TExpander) IsActive (TCustomForm)

트리거의 약간 다른 집합은 기타 비-애니메이션 이미지 효과를 위해 제공됩니다.

애니메이션은 코드의 결과 또는 사용자 액션으로 이러한 속성 중 하나가 변경될 때 시작하도록 설정할

수 있습니다. 트리거 조건이 더 이상 유지되지 않을 때, 애니메이션이 중단됩니다. 트리거 조건은 균등

체크하는 것으로 제한되며, 트리거가 하나 이상의 조건이 포함되어있는 경우 그들은 발생한 모든

트리거에 대해 true로 평가해야 합니다. 트리거가 세미콜론으로 구분하여 하나 이상의 트리거 조건을

포함하는 문자열로 표시됩니다. 각 트리거 조건은 속성 이름, 등호 및 트리거 값으로 구성되어

있습니다. 모든 내장 된 트리거는 불린 이므로, 값이 "True"또는 "False"이어야 합니다. 예를 들면

다음과 같습니다:

IsMouseOver=true

트리거 조건은 두 가지 속성, Trigger 와 TriggerInverse에 저장됩니다. 전자는 단순히 정의 된

애니메이션을 시작하는 반면 후자는 처음으로 애니메이션의 역 플래그를 설정합니다. 애니메이션 실행

방법이 역순이기 때문에, 애니메이션 방법은 조건이 더 이상 유지되지 않을 때 즉시 "끝에서

멈춥니다" 반대 트리거 조건의 단일 애니메이션 대신에, 때때로 반대로 정의된 반대 트리거의 하나로

각각 두 개의 애니메이션이 필요합니다.

27

반전과 반복 애니메이션

반전은 "상영시간을 뒤로"방식으로 작동합니다; 시작과 정지 값을 기억합니다. 두 속성 Inverse 와

StartFromCurrent을 True로 하여, 속성은 정지 값으로 우선 점프하고 애니메이션이 시작되었을 때

값으로 다시 애니메이션 합니다: 효과에서, "현재에서 멈춤" (StopAtCurrent 프로시저가 아닌 불린 타입

StartAtCurren와 같이).

Loop 속성을 True로 지정하여 애니메이션을 반복적으로 루프를 돌거나 AutoReverse 속성이 True 값이면

진자와 같이 앞뒤로 또는 같은 방향으로 반복합니다.

코드를 사용하여 애니메이션 제어하기

애니메이션을 제어하기 위해 프로그램 코드를 작성 할 수 있습니다. 이미 제시 한 애니메이션

정보뿐만 아니라, 프로그램에서 사용할 수 있는 애니메이션 속성, 메소드 및 이벤트의 일부입니다.

속성들:

Enabled – 애니메이션을 시작하기 위해 true로 설정합니다.

Pause – True로 지정되어 있다면 False로 지정될 때까지 애니메이션을 일시 중단합니다.

Delay – 애니메이션을 시작하기 전의 대기 시간.

StartFromCurrent – True로 지정되어 있다면, 현재 값 속성에서 애니메이션을 시작합니다.

Running – 애니메이션이 현재 컨트롤되는 속성을 변경할지 여부를 나타냅니다.

Running은 애니메이션이 아직 실행되어 있는지 여부를 나타내는 읽기 전용 불린 값입니다.

애니메이션 기간 동안 처리하는 것을 고려하면, Start 메소드의 리턴이나 프로시저 호출

시작이 애니메이션이 완료된 것을 나타내는 것은 아닙니다. OnFinish 이벤트 핸들러 또한

애니메이션이 완료되었는지 확인하기 위해 사용할 수 있습니다.

메소드:

Start – 애니메이션을 초기처리 합니다. 끝나기 전에 애니메이션을 stop 한다면,

StartFromCurrent 속성이 true이면 애니메이션이 현재 값에서 다시 시작하고, 그렇지 않으면

StartValue 값에서 다시 시작합니다.

Stop – 애니메이션 처리를 종료합니다. animation 속성 값이 StopValue 값으로 변경됩니다.

StopAtCurrent – current 속성값에서 종료합니다. 속성의 현재 값이 변경되지 않습니다.

StartTrigger – 주어진 애니메이션에 대한 트리거를 시작합니다. 사용자 어플리케이션뿐만

아니라, StartTrigger 가 StartTriggerAnimation의해 호출되는데, 동적으로 모든 하위(자식)

애니메이션과 TFmxObject의 모든 하위의 자식 애니메이션에 대해 동일한 트리거를 설정할 수

있습니다.

ProcessTick(Time, DeltaTime) – 주어진 기간 동안 여러 번 ProcessAnimation를 호출합니다. Time은

현재 시간입니다. DeltaTime 은 이 단계의 시간 간격입니다.

NormalizedTime – 애니메이션 완료의 비율을 반환합니다. 현재 시간은 주어지고,

NormalizedTime은 0~1 범위의 숫자를 반환하는데, 제어 속성 값이 StartValue 에서부터

StopValue까지 얼마나 진행했는지 표시합니다. 선형 간격에서는, NormalizedTime은

현재시간/기간으로 계산됩니다.

28

NormalizedTime 은 다른 간격 설정보다 훨씬 더 복잡합니다. NormalizedTime 사용하여, 모든

간격(보간)에 대한 현재 값은 Result = Start+ (Stop - Start) * NormalizedTime 으로 계산됩니다:

색상 값은 선형은 아니지만 이것은 부동 애니메이션 또는 색상 애니메이션에서 수행하는

계산이다.

이벤트:

OnProcess – 애니메이션 프로세스 진행 중에 호출되는 이벤트 핸들러입니다. 애니메이션에

의해 제어 값이 변경되는 동안 OnProcess가 반복적으로 호출됩니다. 만일 애니메이션이 부모

오브젝트의 형태를 변경한다면, 부모 오브젝트는 자동으로 다시 그려집니다. OnProcess의

안쪽을 처리하는 것이 부모의 경계 상자 외부를 그리는 경우가 발생하면 폼의 무효화

메소드를 호출합니다. OnProcess은 모니터링 및 애니메이션의 변화에 대응하기 위한

이벤트입니다. OnProcess 대신 부모의 OnPaint 이벤트를 사용할 수 있습니다.

OnFinish – 애니메이션이 종료된 후에 호출되는 이벤트 핸들러 입니다. 애니메이션은 시작한

후 정해진 기간 동안 계속됩니다. OnFinish 이벤트 핸들러에서 애니메이션이 완료 된 후

필요한 모든 처리를 수행합니다. Loop 속성이 True이면, Stop 메소드를 호출하지 않는 한,

OnFinish는 실행되지 않습니다. OnFinish는 모니터링 및 애니메이션의 종료에 대응하기 위한

이벤트입니다.

폼에 애니메이션 컴포넌트를 추가하는 것 외에도, 컨트롤과 속성에 대한 애니메이션을 작성하기 위한

코드를 사용할 수 있습니다.

AnimateFloat

TFloatAnimation의 경우 코드에서 다음과 같이 사용할 수 있습니다:

AnimateFloat – 오브젝트의 속성에 대한 TFloatAnimation을 생성하고 실행합니다.

// Delphi procedure AnimateFloat(const APropertyName: string; const NewValue: Single; Duration: Single = 0.2; AType: TAnimationType = TAnimationType.atIn; AInterpolation: TInterpolationType = TInterpolationType.itLinear); // C++ void __fastcall AnimateFloat(const System::UnicodeString APropertyName, const float NewValue, float Duration = 2.000000E-01, TAnimationType AType = (TAnimationType)(0x0), TInterpolationType AInterpolation = (TInterpolationType)(0x0));

TFloatAnimation를 생성하고 부모를 TFmxObject (자체)로 합니다.

부동 소수 애니메이션의 PropertyName 속성을 APropertyName 매개변수에서 제공되는

문자열로 설정합니다. 이 문자열은 플루트(Float) 타입인 부모의 속성 중 하나의 이름이어야

합니다. 중첩된 속성을 참조하기 위해 점(.)으로 구분합니다. 예: 'Opacity' 및 'Position.X'

부동 소수 애니메이션의 StopValue 속성을 NewValue 매개변수에서 제공되는 short integer로

설정합니다.

29

부동 소수 애니메이션의 Duration 속성을 Duration 매개변수에서 제공되는 정수로 설정합니다.

Duration 은 PropertyName 속성에서 명명 된 속성의 현재 값으로부터 이 부동 소수

애니메이션의 StopValue 속성의 값까지의 전환의 시간(초)입니다.

부동 소수 애니메이션의 AnimationType 속성을 AType 매개변수에서 제공되는

TAnimationType으로 설정합니다.

부동 소수 애니메이션의 Interpolation 속성을 AInterpolation 매개변수에서 제공되는

TInterpolationType으로 설정합니다.

부동 소수 애니메이션의 OnFinish 이벤트를 TFmx Object의 DoAniFinished 메소드로 설정합니다.

부동 소수 애니메이션의 StartFromCurrent 속성을 True로 설정합니다.

애니메이션을 시작하기 위해 Start를 호출합니다. 속성은 현재 값에서 기간(Duration) 시간이

지남에 따라 StopValue에 애니메이션 될 것입니다.

참고: 이 오브젝트가 메소드가 호출되는 순간에 표시되지 않는다면, 어떤 애니메이션도

실행되지 않습니다: 애니메이션이 생성되지만 실행되지 않습니다.

AnimateFloatDelay – 오브젝트의 속성에 대한 TFloatAnimation를 생성하고 실행 시작을 지연합니다.

// Delphi procedure AnimateFloatDelay(const APropertyName: string; const NewValue: Single; Duration: Single = 0.2; Delay: Single = 0.0; AType: TAnimationType = TAnimationType.atIn; AInterpolation: TInterpolationType = TInterpolationType.itLinear); // C++ void __fastcall AnimateFloat(const System::UnicodeString APropertyName, const float NewValue, float Duration = 2.000000E-01, float Delay = 0.0, TAnimationType AType = (TAnimationType)(0x0), TInterpolationType AInterpolation = (TInterpolationType)(0x0));

이 오브젝트의 TFloatAnimation을 생성합니다.

AnimateFloatDelay는 TFloatAnimation를 생성하고 부모를 TFmxObject (자체)로 합니다.

부동 소수 애니메이션의 AnimationType 속성을 AType 매개변수에서

제공되는TAnimationType으로 설정합니다.

부동 소수 애니메이션의 Interpolation 속성을 AInterpolation 매개변수에서 제공되는

TInterpolationType 로 설정합니다.

부동 소수 애니메이션의 Delay 속성을 Delay 매개변수에서 제공되는 실수로 실정합니다.

부동 소수 애니메이션의 Duration 속성을 Duration 매개변수에서 제공되는 정수로 설정합니다.

부동 소수 애니메이션의 PropertyName 속성을 APropertyName 매개변수에서 제공되는

문자열로 설정합니다.

부동 소수 애니메이션의 StartFromCurrent 속성을 True로 설정합니다.

부동 소수 애니메이션의 StopValue 속성을 NewValue 매개변수에서 제공되는 실수로

설정합니다.

애니메이션을 시작하기 위해 Start를 호출합니다.

30

AnimateFloatWait는 - TFloatAnimation를 생성하고 애니메이션이 완료 될 때까지 프로그램으로 반환하지

않습니다.

// Delphi procedure AnimateFloatWait(const APropertyName: string; const NewValue: Single; Duration: Single = 0.2; AType: TAnimationType = TAnimationType.atIn; AInterpolation: TInterpolationType = TInterpolationType.itLinear); // C++ void __fastcall AnimateFloatWait(const System::UnicodeString APropertyName, const float NewValue, float Duration = 2.000000E-01, TAnimationType AType = (TAnimationType)(0x0), TInterpolationType AInterpolation = (TInterpolationType)(0x0));

TFloatAnimation을 만듭니다 부모를 TFmxObject (자체)로 하고, 애니메이션이 완료 될 때까지

반환하지 않습니다.

AnimateFloatWait은 다음을 수행합니다:

부동 소수 애니메이션의 AnimationType 속성을 AType 매개변수에서 제공되는

TAnimationType으로 설정합니다.

부동 소수 애니메이션의 Interpolation 속성을 AInterpolation 매개변수에 제공되는

TInterpolationType으로 설정합니다.

부동 소수 애니메이션의 Duration 이벤트를 Duration 매개변수에서 제공되는 정수로

설정합니다.

부동 소수 애니메이션의 PropertyName 속성을 APropertyName 매개변수에서 제공되는

문자열로 설정합니다.

부동 소수 애니메이션의 StartFromCurrent 속성을 True로 설정합니다.

부동 소수 애니메이션의 StopValue 속성을NewValue 매개변수에서 제공되는 실수로

설정합니다.

애니메이션을 시작하기 위해 Start를 호출합니다.

AnimateColor

이 개체 (자기)에 대한 TColorAnimation를 만듭니다.

// Delphi procedure AnimateColor(const APropertyName: string; NewValue: TAlphaColor; Duration: Single = 0.2; AType: TAnimationType = TAnimationType.atIn; AInterpolation: TInterpolationType = TInterpolationType.itLinear);

//C++ void __fastcall AnimateColor(const System::UnicodeString APropertyName, System::Uitypes::TAlphaColor NewValue, float Duration = 2.000000E-01, TAnimationType AType = (TAnimationType)(0x0),

31

TInterpolationType AInterpolation = (TInterpolationType)(0x0));

AnimateColor는 TColorAnimation를 생성하고 부모가 TFmxObject (자체)입니다.

컬러 애니메이션의 AnimationType 속성을 AType 매개 변수에 제공되는 TAnimationType 로

설정합니다.

컬러 애니메이션의 Interpolation 속성을 AInterpolation 매개 변수에 제공되는 TInterpolationType

으로 설정합니다.

색상 애니메이션의 OnFinish 이벤트를 TFmx 오브젝트의 DoAniFinished 메소드로 설정하십시오.

컬러 애니메이션의 Duration 속성을 기간 매개 변수에 제공되는 정수로 설정합니다. Duration은

PropertyName 속성에서 명명 된 속성의 현재 색부터 정지 값의 색으로 전환하는

기간(초)입니다.

APropertyName 매개 변수에 제공된 문자열로 컬러 애니메이션의 PropertyName 속성을

설정합니다. 이 문자열은 애니메이션 할 수 있는 부모와 관련된 유형 TColor의 속성의

이름입니다. 예를 들어, 부모가 TRectangle 경우 PropertyName은 "Fill.Color"또는

"Stroke.Color"(으)로 설정됩니다. 이 속성의 값은 (StartFromCurrent 속성이 "참"인 경우) 해당

속성에 저장된 현재 값으로부터 컬러 애니메이션 StopValue 속성에 저장된 값으로 변경됩니다.

색상 애니메이션의 StartFromCurrent 속성을 True로 설정합니다. 이 색상의 애니메이션은

부모와 관련된 Color 속성에 현재 저장되는 색상 값으로 시작됩니다. TRectangle.Fill.Color 될 수

있습니다.

이 컬러 애니메이션의 StopValue 속성을 새로운 값 매개 변수에 의해 제공되는 TColor가 되게

설정합니다. 컬러 애니메이션은 현재 색상 값에서 StopValue로 전환됩니다.

애니메이션을 시작하기 위해 start를 호출합니다.

사용자 정의 애니메이션

사용자 정의 애니메이션 컴포넌트는 하위 클래스 TAnimation에 의해 만들어지고 ProcessAnimation

메소드를 구현합니다. ProcessAnimation는 하나씩 증가하면서 컨트롤 되는 속성의 값을 이동합니다.

ProcessAnimation는 TAnimation의 후손 클래스의 구현 부분 Protected에 선언된 메소드입니다.

ProcessAnimation은 시간의 각 증가에 대한 애니메이션을 처리하도록 구성된 스레드에서 호출합니다.

시간의 증가는 플랫폼 별 입니다; 시간의 특정 숫자 단위는 델타 시간입니다. ProcessTick 메소드는 매개

변수로 델타 시간을 사용하여 ProcessAnimation를 호출합니다.

32

애니메이션 사용하기

파이어몽키는 시간이 지나면서 선택한 속성의 값을 수정하는 유형이 다른 많은 내장된 애니메이션들을

제공합니다. 여러 기본 애니메이션 효과를 사용하는 프로젝트를 작성하려면 다음 단계를 실행하십시오.

1 단계: 플로팅 속성 값을 변경하는 TFloatAnimation 사용하기

파이어몽키에 소수점 숫자를 사용하는 속성은 TFloatAnimation를 사용하여 수정할 수 있습니다.

애니메이션 효과를 사용하여 일부 값을 변경하여 보겠습니다.

File > New > FireMonkey HD Application– Delphi 또는 File > New > FireMonkey HD Application – C

++Builder를 사용하여 새로운 파이어몽키 HD 어플리케이션을 생성합니다.

툴 팔레트의 검색 박스에 rec 이라고 입력하고 TRectangle 컴포넌트를 더블 클릭하여 폼

디자이너에서 TRectangle 컴포넌트를 내려 놓습니다.

TRectangle 컴포넌트를 배치한 후, 위의 그림과 같이 보이도록 사각형을 사이즈 조정합니다.

오브젝트 인스펙터에서 필름 아이콘으로 표시되는 몇 개의 속성들이 있습니다. 필름 아이콘은

이 컴포넌트 속성이 애니메이션 될 수 있다는 것을 표시합니다.

33

다음은 TFloatingAnimation을 통해 수정할 수 있는 전형적인 속성들입니다(컴포넌트에 따라):

ο Height ο Position.X ο Position.Y ο RotationAngle ο RotationCenter.X ο RotationCenter.Y ο Scale.X ο Scale.Y ο StrokeThickness ο XRadious ο YRadious ο Width

속성 값을 수정하기 위해, RotationAngle 속성의 드롭-다운 메뉴를 클릭하여 Create New

TFloatAnimation를 선택합니다.

이제 새로운 TFloatAnimation 컴포넌트가 생성되었습니다. 스트럭처 패널에서, FloatAnimation1이

Rectangle1의 자식으로 정의된 것을 보실 수 있습니다. 참고: 애니메이션 컴포넌트의 효과는

부모 컴포넌트에 적용한다는 점에 명심하십시오.

오브젝트 인스펙터는 FloatAnimation1 컴포넌트의 속성들을 보여줍니다. 다음 속성들을

수정합니다:

ο Duration = 5 – 시작 값부터 정지 값까지 애니메이션 하는 시간의 량(초).

ο Enabled = True – 프로그램이 실행될 때 애니메이션을 시작합니다

ο Loop= True – 무기한으로 애니메이션을 반복합니다.

ο StopValue = 360 – 이 값에 도달했을 때 이 속성의 애니메이션을 종료합니다.

ο 다른 중요한 속성 PropertyName은 자동으로 정의됩니다. 이 경우, 이 속성은

RotationAngle로 설정되어 있으므로 이 애니메이션은 상위 컴포넌트의 RotationAngle 속성

값에 영향을 미칩니다.

34

프로그램을 실행합니다. 이제 Rectangle 컴포넌트가 폼 위에서 회전합니다:

당신은 동일한 단계를 사용하여 다른 숫자 속성을 애니메이션 할 수 있습니다.

35

2 단계: TColorAnimation를 추가하여 색상 변경

다음으로, 1 단계에 설명 된 회전에 추가하여, 사각형의 색상을 변경하려면 색상 애니메이션을

적용합니다.

툴 팔레트의 검색 박스에 anim을 입력하여 TColorAnimation 컴포넌트를 찾아서

TColorAnimation를 더블 클릭합니다:

FloatAnimation1이 Rectangle1의(1 단계에서 말한 것처럼) 자식으로 설정된 반면

TColorAnimation1는 폼의 자식으로 설정되어 있습니다. ColorAnimation1을 Rectangle1위로

드래그&드롭합니다. 이제 ColorAnimation1은 Rectangle1의 자식으로 설정되어 있기 때문에

ColorAnimation1은 Rectangle1에 영향을 받습니다:

오브젝트 인스펙터에 TColorAnimation1 컴포넌트 속성들이 표시됩니다. 다음 속성들을

수정합니다:

ο PropertyName = Fill.Color – 애니메이션 하는 속성의 이름.

ο Enabled = True – 프로그램이 시작될 때 애니메이션이 시작합니다.

ο Duration = 3 – 시작 값부터 종료 값까지 애니메이션 하는 사간의 양(초).

ο Loop = True – 무기한으로 애니메이션을 반복합니다.

ο AutoReverse = True- 앞으로 애니메이션 한 후 뒤로 다시 애니메이션 합니다.

ο StartValue = White

ο StopValue = Red – 이 값에 도달했을 때 이 속성의 애니메이션을 종료합니다.

36

프로그램을 실행합니다. 이제 rectangle 컴포넌트가 폼 위에서 화전하고 fill.color 속성을

흰색에서 빨강으로 수정합니다:

37

3 단계: TBitmapAnimation을 사용하여 이미지 변경

다음 단계는 이미지 컴포넌트와 같이 비트맵 애니메이션을 사용합니다.

1 단계처럼 새로운 파이어몽키 어플리케이션을 생성합니다.

폼 위에 TImage 컴포넌트를 내려 놓습니다(Image1).

폼 위에 TBitmapAnimation 컴포넌트를 내려 놓습니다. 스트럭처 뷰를 사용하여, 이

컴포넌트를(BitmapAnimation1) Image1의 자식으로 지정합니다:

오브젝트 인스펙터에서 다음과 같이 BitmapAnimation1의 속성들을 설정합니다:

ο PropertyName= 애니메이션하는 속성의 이름.

ο Enabled = True – 프로그램을 시작했을 때 애니메이션을 시작합니다.

ο Duration = 10 – 시작 값부터 종료 값까지 애니메이션 하는 시간의 양(초).

ο Loop = True = 무기한으로 애니메이션을 반복합니다.

ο AutoReverse = True – 앞으로 애니메이션 한 후 되로 다시 애니메이션 합니다.

StartValue 와 StopValue 비트맵 속성을 지정합니다. 이 속성들은 초기 이미지와 최종 이미지로

사진을 가지고 있습니다. 메뉴의 “Edit…” 속성 에디터를 클릭하고 비트맵 에디터를 사용하여

좋아하는 사진을 선택합니다.

프로그램을 실행합니다. 이제 선택한 두 개의 사진이 시간이 지나면서 애니메이션 됩니다.

38

델파이와 C++의 추가적인 애니메이션 예제

엠비카데로 DocWiki에 델파이와 C+ +에 대한 몇 가지 추가 애니메이션 예제가 있습니다.

FMXObjectAnimateFloat 예제는 FMX.Types.TFmx 오브젝트가 메소드 FMX.Types.AnimateFloat를 호출하는

방법을 보여줍니다.

http://docwiki.embarcadero.com/CodeExamples/en/FMXTFmx ObjectAnimateFloat_(Delphi) http://docwiki.embarcadero.com/CodeExamples/en/FMXTFmx ObjectAnimateFloat_(C%2B%2B)

FMXObjectAnimateColor 예제는 TFmx 오브젝트 메소드 AnimateColor를 호출하는 방법을 보여줍니다.

http://docwiki.embarcadero.com/CodeExamples/en/FMXTFmx ObjectAnimateColor_(Delphi) http://docwiki.embarcadero.com/CodeExamples/XE2/en/FMX TFmx ObjectAnimateColor_(C%2B%2B)

AttachTAnimation 예제는 자신의 컨트롤 아래의 속성값을 번경하는 AnimationType 및 보간 속성이

속도에 영향을 미치는 방법을 보여줍니다. 이것은 TFloatAnimation 인스턴스와 TRectangle의 X와 Y를

제어하여 그려집니다.

http://docwiki.embarcadero.com/CodeExamples/en/AttachTAnimation_(Delphi) http://docwiki.embarcadero.com/CodeExamples/XE2/en/FMX AttachTAnimation_(C%2B%2B)

FMXTimer 애니메이션 예제는 세 가지 다른 기술을 사용하여 폼에 이미지를 이동하는 방법을

보여줍니다. 첫 번째 예는 TTimer 개체를 사용합니다. 마지막 두 프로젝트는 애니메이션을

사용합니다(각각 TFloatAnimation 및 TPathAnimation). 세 개의 프로젝트는 동일한 결과를 갖습니다:

사용자가 버튼을 클릭할 때, 이미지 버튼 주위에 다이아몬드 모양으로 이동합니다.

http://docwiki.embarcadero.com/CodeExamples/en/FMXTimerAnimation_(Delphi) http://docwiki.embarcadero.com/CodeExamples/en/FMXTimerAnimation_(C%2B%2B)

애니메이션 HD 및 3D 예제

예를 들어 프로젝트는 HD 및 3D 윈도우와 맥 어플리케이션에서 애니메이션을 만드는 방법을

보여줍니다.

http://docwiki.embarcadero.com/CodeExamples/en/FMX.AnimationDemoHD_Sample http://docwiki.embarcadero.com/CodeExamples/en/FMX.AnimationDemo3D_Sample

39

요약, 전망, 해야 할 일, 리소스

8장에서 윈도우와 맥 어플리케이션에 이미지와 애니메이션 효과를 추가하는 방법에 대해서

배웠습니다. 파이어몽키에 포함 된 50 개 이상의 효과에 대해 배웠습니다. 어플리케이션에서 사용자

경험을 향상시키기 위해 이러한 효과를 사용하는 방법을 배웠습니다.

9장에서는, 멀티 클라이언트, 멀티 플랫폼 및 멀티 티어 어플리케이션을 구축하기 위해 8장에서 배운

것들을 함께 사용하는 방법에 대해 알아보겠습니다.

한편, 8장에서 배운 내용을 복습하고 수업을 준비하기 위해 몇 가지 해야 할 일, 읽어야 할 기사와

보아야 할 동영상입니다.

해야 할 일

RAD 스튜디오에 포함되어있는 이미지와 애니메이션 효과 컴포넌트를 모두 살펴보십시오. RAD

스튜디오에 포함되어있는 애니메이션 HD 및 3D 예제 프로그램을 열고, 살펴보고, 실행합니다.

참고 자료 링크

코스 시작하기 방문 페이지 -

http://www.embarcadero.com/firemonkey/firemonkey-e-learning-series

파이어몽키 어플리케이션 플랫폼 -

http://docwiki.embarcadero.com/RADStudio/en/FireMon key_Application_Platform

André Miertschink가 작성한 파이어몽키 이미지 효과 작성 방법 -

http://members.adug.org.au/2011/12/15/how-to-create-your-own-firemonkeyimage-filtereffect-to-use-with-firem

파이어몽키를 사용한 풍부한 HD 및 3D 비즈니스 어플리케이션(유튜브 동영상) -

http://www.youtube.com/watch?v=80hfge8NwC E

델파이와 C++ 파이어몽키 효과 소개(유튜브 동영상) -

http://edn.embarcadero.com/article/42104

40

델파이:

RAD Studio 델파이 예제 프로그램 소스포지 -

http://radstudiodemos.svn.sourceforge.net/viewvc/radstudiodemos/branches/RadStudio_XE2/FireMonkey/

C++:

RAD Studio C ++ 예제 프로그램 소스포지 -

http://radstudiodemos.svn.sourceforge.net/viewvc/radstudiodemos/branches/RadStudio_XE2/CPP/FireMonkey/

픽셀 쉐이더:

Writing HLSL Shaders in Direct3D 9 –http://msdn.microsoft.com/en-

us/library/windows/desktop/bb944006(v=VS.85).aspx DirectX Pixel Shader 2 – http://msdn.microsoft.com/en-

us/library/windows/desktop/bb219843(v=vs.85).aspx Microsoft DirectX SDK – http://go. microsoft.com/fwlink/?LinkId=150942 NVIDIA’s C g Toolkit – http://developer.nvidia.com/cg-toolkit The Open GLES Shading Language –

http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf

이 장은 “윈도우와 맥 개발의 시작을 위한 파이어몽키 코스북”의 8장 내용 전체입니다.

코스북 전체를 PDF로 다운로드 받을 수 있습니다: http://tech.devgear.co.kr