[엑스플랫폼] 쇼케이스 따라하기 (60) - Animation (2/3)

- 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();

}

TransitionPropItem 을 정의해서 트랜지션의 상태를 지정할 수 있습니다.

해당 속성은 endTransition 메소드 앞에 설정하는 것과 동일한 효과를 발휘합니다.

동적으로 처리할 수 있다는 차이가 있겠죠.

var TI = new TransitionPropItem;

TI.propid = "style.background.color";

TI.propval = "#ff0000ff";

TA.addItem(TI);

TA.run();

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