엑스플랫폼 101

- Object Reference > Animation

Composite Animation 은 단어그대로 1개 이상의 애니메이션 효과가 동시에 이루어지는 것입니다.

하나의 Composite Animation에는 앞에서 설명한 Property Animation 이나 Transition Animation 이 포함될 수 있습니다.

화면에 보이는 것처럼 아이템을 추가하려 하면 2개의 애니메이션 타입 중 하나를 선택하게 됩니다.

여기서 하나를 선택하면 아이템이 추가되고 추가된 아이템의 속성을 지정할 수 있습니다.

그렇지 않고 동적으로 추가하는 경우에는 사전에 정의한 애니메이션 아이템을 아래와 같이 추가할 수 있습니다.

CA.addItem(PA);

CA.addItem(PA1);

CA.duration = 1000;

CA.run();

이렇게 지정된 애니메이션은 병렬로 처리되어 동작됩니다.

마지막으로 MoveAnimation 은 해당 애니메이션이 적용된 컴포넌트의 좌표값이 변경될때 동작됩니다.

컴포넌트의 moveeffect 의 영향을 받아 처리되어집니다.

Property Animation 에서 Move 부분만 따로 처리되는 형식이네요.

* 메인프레임이나 하위프레임, 폼 단위로 애니메이션을 처리할 수 있습니다.

* 커스터마이징된 interpolation을 구현하는 경우에는 InterpolationInfo의 속성을 정의해 사용할 수 있습니다.

duration, progresstime, progressvalue 를 설정해서 정의해줍니다.

function MyInterPolation_BounceOut(II)

{

var t = II.progresstime;

var d = II.duration;

var result;

t/=d;

if ((t) < (1/2.75)) {

       result = (7.5625*t*t);

 } else if (t < (2/2.75)) {

   result = (7.5625*(t-=(1.5/2.75))*t + .75);

 } else if (t < (2.5/2.75)) {

   result = (7.5625*(t-=(2.25/2.75))*t + .9375);

 } else {

   result = (7.5625*(t-=(2.625/2.75))*t + .984375);

 }

II.progressvalue = result;

}

http://cafe.naver.com/xplatform101/224

- Object Reference > Animation

TransitionAnimation은 데이터를 돋보이게 만들기 위해 많이 사용되는 방식입니다.

약간의 작업만으로 3D 처럼 보이도록 만들 수도 있고 데이터의 변화를 확실하게 알 수 있게 합니다.

먼저 지정가능한 속성은 다음과 같습니다.

기본 속성(Common Properties)는 모든 애니메이션이 동일합니다.

그리고 아래쪽에 각 애니메이션별 속성을 정의하도록 되어 있습니다.

엑스플랫폼에서 제공되는 Type 은 다음과 같은 5가지입니다.

cube3d, fade, wipe, slide, flip3d

대략적인 효과는 다음과 같습니다.

* 그림으로만 설명하려니 애매하네요. ^^

테스트한 코드는 다음과 같습니다. 참고로만 보세요.

<?xml version="1.0" encoding="utf-8"?>

<FDL version="1.2">

  <TypeDefinition url="..\..\default_typedef.xml"/>

  <Form id="test" classname="test" inheritanceid="" position="absolute 0 0 1024 768" titletext="New Form">

    <Layout>

      <Button id="Button00" taborder="0" text="cube3d" position="absolute 72 56 214 132"/>

      <Button id="Button01" taborder="1" text="slide" position="absolute 72 176 214 252"/>

      <Button id="Button02" taborder="2" text="wipe" position="absolute 424 56 566 132"/>

      <Button id="Button03" taborder="3" text="flip3d" position="absolute 248 176 390 252"/>

      <Button id="Button04" taborder="4" text="fade" position="absolute 248 56 390 132"/>

      <Button id="Button05" taborder="5" text="START" position="absolute 72 296 157 329" onclick="Button05_onclick"/>

    </Layout>

    <Objects>

      <TransitionAnimation id="TransitionAnimation00" direction="left" duration="1000" starttime="0" interpolation="Interpolation.circIn">

        <TransitionPropItems id="items"/>

      </TransitionAnimation>

    </Objects>

  </Form>

</FDL>

function Button05_onclick(obj:Button,  e:ClickEventInfo)

{

anitype(Button00);

anitype(Button01);

anitype(Button02);

anitype(Button03);

anitype(Button04);

}

function anitype(obj:Button)

{

TransitionAnimation00.targetcomp = obj;

TransitionAnimation00.type = obj.text;

if(obj.text=='fade' || obj.text=='wipe')

{

if(!obj.visible) obj.visible = true;

TransitionAnimation00.beginTransition();

obj.visible = false;

TransitionAnimation00.endTransition();

}

else

{

TransitionAnimation00.beginTransition();

TransitionAnimation00.endTransition();

}

TransitionAnimation00.run();

}