대표적으로
3D 효과 및 벡터형식의 부드러운 출력, RoateAngle 및 Scale 등의 신규 속성 등이 추가되었습니다.
오늘은
새로운 기능 중 하나인 FloatAnimation에 대해 소개하려 합니다.
FloatAnimation은 단어 그대로 Float을 Animation하는 놈입니다.
좀 더 자세히 설명하면,
지정한 Start와 Stop에 해당하는 Float 값사이를 지정된 시간(Duration)에 맞춰 다양한 효과(Interpolation: 보간)로 값을 변경하는 놈입니다.
우선 샘플을 보시면 아래의 영상은 마우스 휠(업/다운) 시 마우스 주변에 효과를 주고. 특정 Zoom 이상인 경우 RoundRect 메시지를 표시하고 서서히 사라지는 효과를 주었습니다.
(구현 내용은 아래 첨부한 소스파일을 참고하시구요.)
FloatAnimation은 TAniThread(FMX.Types.pas)에 의해 쓰래드로 진행이 되어
다른작업에 영향을 주지 않고도 UI에 다양한 효과 및 재미난 기능을 매우 쉽게 넣을 수 있습니다.
FloatAnimation을 사용하는 방법은 두가지 인데요.
첫째,
애니메이션 효과를 줄 컨트롤의 자식으로 TFloatAnimation을 등록 후 설정하여 사용하는 방법
둘째,
애니메이션 효과를 줄 컨트롤에 .AnimationFloat() 메소드를 이용하여 직접 효과를 주는 방법
두개 중 편리한 방법을 사용하시면 될 것 같습니다.
아래의 영상은
AnimationType과 TInterpolationType을 지정하고 어떤 효과가 나는지 확인하는 샘플입니다.
(당겼다가 가기[Back], 공튀기기[Bounce] 등의 효과를 확인 할 수 있습니다.)
그리고 위 영상의 주요코드
uses
System.TypInfo;
procedure TForm3.FormCreate(Sender: TObject);
var
Animation: TAnimationType;
Interpolation: TInterpolationType;
begin
Circle1.Position.X := 0;
Circle1.Position.Y := (Panel1.Height - Circle1.Height) / 2;
// Circle이 멈출 위치를 계산
FLastValue := Panel1.Width - Circle1.Width;
// 콤보박스에 속성을 표시합니다.
for Animation in [Low(TAnimationType)..High(TAnimationType)] do
cbbAnimation.Items.AddObject(GetEnumName(TypeInfo(TAnimationType), Ord(Animation)), TObject(Animation));
cbbAnimation.ItemIndex := 0;
for Interpolation in [Low(TInterpolationType)..High(TInterpolationType)] do
cbbInterpolation.Items.AddObject(GetEnumName(TypeInfo(TInterpolationType), Ord(Interpolation)), TObject(Interpolation));
cbbInterpolation.ItemIndex := 0;
end;
procedure TForm3.Button1Click(Sender: TObject);
begin
if rbTFloatAnimation.IsChecked then
begin
FloatAnimation1.PropertyName := 'Position.X';
FloatAnimation1.StartValue := 0;
FloatAnimation1.StopValue := FLastValue;
FloatAnimation1.Duration := 1;
FloatAnimation1.AnimationType := TAnimationType(cbbAnimation.Items.Objects[cbbAnimation.ItemIndex]);
FloatAnimation1.Interpolation := TInterpolationType(cbbInterpolation.Items.Objects[cbbInterpolation.ItemIndex]);
FloatAnimation1.Start;
end
else
begin
Circle1.Position.X := 0;
Circle1.AnimateFloat(
'Position.X',
FLastValue,
1,
TAnimationType(cbbAnimation.Items.Objects[cbbAnimation.ItemIndex]),
TInterpolationType(cbbInterpolation.Items.Objects[cbbInterpolation.ItemIndex])
);
end;
end;
사용방법은 어렵지 않습니다.
그래도 다양한 효과를 위해서는 TInterpolationType과 TAnimationType을 잘 설정해 주어야 합니다.
글로 설명하는 것 보다 샘플프로그램 다운로드하셔서 실행해 보시는게 좋을 것같네요.
샘플프로그램 실행파일
FloatAnimation.zip샘플프로그램 소스파일
경고창 애니메이션 효과 소스
ThAlertAnimation.pasZoom 애니메이션 효과 소스
아래는 엠바카데로의 도움말입니다. 참고하세요.
http://docwiki.embarcadero.com/Libraries/XE3/en/FMX.Types.TInterpolationType
| Value | Meaning |
|---|---|
|
itLinear |
A linear interpolation. The property value this animation applies to changes constantly over time. |
|
itQuadratic |
A quadratic function is applied to the path between the start and stop points. The slope of the path is zero at the start point and increases constantly over time. A scalar is applied to the function to make the endpoint fall on the path. |
|
itCubic |
The interpolation is of the form y = x**3. The slope of the path is zero at the start point and increases much faster than the quadratic function over the path. |
|
itQuartic |
The interpolation is of the form y = x**4. The slope of the path is zero at the start point and increases much faster than the quadratic function over the path. |
|
itQuintic |
The interpolation is of the form y = x**5. The slope of the path is zero at the start point and increases much faster than the quadratic function over the path. |
|
itSinusoidal |
The interpolation is of the form y = sin(x). The slope of the path is zero at the start point and places the first inflexion of the sin curve (x=pi) at the stop point. |
|
itExponential |
The interpolation is of the form y = e**x. The slope of the path is one at the start point and increase much faster than the quadratic function over the path. |
|
itCircular |
The path between the start and stop point for this interpolation is a quarter of a circle. The slope of the path is zero at the start point and verticle at the stop point. |
|
itElastic |
The path does not follow a geometric interpolation. The value (y coordinate) may decrease, moving back toward the Start Value, but time (x value) must always move in a positive direction. |
|
itBack |
The path does not follow a geometric interpolation. The value (y coordinate) may decrease, moving back toward the Start Value, but time (x value) must always move in a positive direction. |
|
itBounce |
The path depicts a bouncing ball. The path is made up of circular curves with curvature away from the straight line that connects the start and stop points. These curves are connected by sharp points. |
http://docwiki.embarcadero.com/Libraries/XE3/en/FMX.Types.TAnimationType
| Value | Meaning |
|---|---|
|
atIn |
The curve that applies to the TInterpolationType for this animation starts at the starting value of the property animated. |
|
atOut |
The curve that applies to the TInterpolationType for this animation starts at the ending value of the property animated and proceeds backwards to the starting value. |
|
atInOut |
The curve that applies to the TInterpolationType for this animation starts at both the starting value and the ending value of the property animated and meets at the center point. |
