'ASP.NET' 태그의 글 목록

시작하기

Ajax.net 에서 Animation을 제어 할 수 있는 방법은 두 가지가 있습니다. 첫 번째는 AnimationExtender를 사용하는 방법이고, 다른 한 방법은 JavaScript 로 직접 제어 하는 방법입니다.

Ajax가 대중적으로 확산됨과 함께 Ajax.Net도 덩달아 많은 관심을 받고 있습니다. 이에 따라 AnimationExtender와 같은 ControlToolkit의 자료 또한 많이 공개되어 있습니다. 그래서 저는 JavaScript 로 Animation을 직접 제어하는 방법을 설명하겠습니다.

Ajax.Net을 사용하기 위해선 다음과 같은 프로그램들이 설치되어 있어야 합니다.

1. VisualStudio 2005 혹은 Visual WebDeveloper Express 2005 이상의 버전이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.)

2. ASP.NET Extension v1.0 이상의 버전이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.).

3. ASP.NET AJAX Control Toolkit이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.)

Animation Hierarchy

Ajax.Net의 Animation은 다음과 같은 계층으로 구성되어 있습니다.

Animation --- Parent Animation --- Parallel Animation --- Move Animation
--- Resize Animation
   --- Sequence Animation --- Pulse Animation
   --- Selection Animation   --- Condition Animation
--- Case Animation
--- Fade Animation    --- FadeIn Animation
   --- FadeOut Animation
--- Property Animation --- Discrete Animation
   --- Interpolated Animation
--- Color Animation
--- Length Animation
--- Scale Animation
--- Action --- Enable Action
--- Hide Action
--- Style Action
--- Opacity Action
--- Script Action

크게 3가지로 분리할 수 있는데, SequenceAnimation이나 parallelAnimation과 같이 Animation들의 순서를 제어할 수 있는 Container클래스와, Fade In/Out 과 같은 실질적으로 화면을 구성하는 클래스, 그리고 시간을 기준으로 동작하는 Animation과는 달리 실행한 그 시점. 단 한번만 효력을 발휘하는 Action이 있습니다.

다음 URL에서 각각의 Animation을 테스트 해 보십시오.

http://66.232.144.57/suda/animation.aspx

Animation Example

FadeIn, FadeOut, Color 실행결과

Hello Ajax

간단한 Hello Ajax라는 글씨를 FadeIn하는 Animation을 작성해 보도록 하겠습니다.

1. 새 웹 사이트 생성합니다.

2. 폼에 TookitScriptManager를 등록합니다. 혹시 ToolkitScriptManager가 없다면, 도구상자에서 우클릭 -> 항목선택 -> 다운받은 ControlToolkit 디렉토리안의 /SampleWebsite /Bin /AjaxControlToolkit.dll 을 선택하여 추가하십시오.

3. 폼에 아무런 ControlToolkitExtender가 없으면 Animation관련 자바스크립트가 로드되지 않기 때문에 임의로 아무 Extender나 폼에 올려둡니다.

<asp:Panel ID="Panel1" runat="server" Width="1px" Height="1px" Visible="false" />

<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

<Animations>

<OnHoverOver>

<FadeIn MinimumOpacity="0.1"/>

</OnHoverOver>

</Animations>

</cc1:AnimationExtender>

4. FadeIn시킬 Div를 추가하고 Text를 설정합니다.

<div id="fadein" style="opacity:0;">

<h2>Hello Ajax</h2>

</div>

5. <head></head>태그 사이에 다음과 같은 자바 스크립트를 추가합니다.

<script language="javascript">

function FadeIn()

{

// Animation을 재생합니다.

AjaxControlToolkit.Animation.FadeInAnimation.play($get('fadein'), 1, 25);}

function Initialize()

{

$addHandler($get('fadein'),"click",FadeIn);

}

</script>

6. Initialize를 호출하기 위해 body태그에 onload이벤트를 설정합니다.

<body onload="Initialize();">

코드설명

AjaxControlToolkit.Animation.FadeInAnimation.play()

FadeInAnimation을 재생하는 메소드 입니다. Play외에도 Stop과 Pause와 같은 제어 메소드들과, onStart, onStep, onEnd와 같은 이벤트리스너들도 등록할 수 있습니다. API Reference는 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Control-Toolkit/Live/Walkthrough/AnimationReference.aspx

$get(‘fadein’)

Sys.UI.DomElement.getElementById() 메소드의 축약 형태입니다. $get() 외에도 다른 축약형을 알고 싶으시면 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Documentation/Live/ClientReference/default.aspx

.play($get(‘fadein’), 1, 25)

두 번째 인자인 1은 duration입니다. Duration은 해당 Animation이 몇 초간 진행될 것인지를 결정하는 단위 입니다. 세 번째 인자인 25는 fps입니다.

$addHandler($get(‘fadein’),”click”,FadeIn)

$addHandler는 Sys.UI.DomEvent.addHandler()메소드의 축약형 입니다. 인자로 3개를 받는데, 첫 번째 인자는 이벤트를 핸들링할 DomObject입니다. 두 번째 인자는 이벤트의 이름입니다. 세 번째 인자는 이벤트가 발생할 시 호출할 함수 이름입니다.

결론

이것으로 대략적인 Javascript로 Animation을 제어하는 방법에 대해 알아 보았습니다. 혹시 제가 잘못 알고 있는 내용이나, 추가할 점이 있으시면 댓글 혹은 트랙백으로 남겨 주십시오.

ps: 워드 2007에서 바로 포스팅 하니까 다 깨지는군요-_-;;

첨부

invalid-file

'개발' 카테고리의 다른 글

Nullable<T> (1)	2008.01.22
[두번째] Javascript를 사용한 rich Editor. (2)	2007.12.12
[첫번째] Javascript를 사용한 rich Editor. (1)	2007.12.09
Revu스타일의 슬라이딩 로그인 패널 만들기 (1) (0)	2007.09.19
ExtremeSwank OpenID Consumer For ASP.Net 2.0 (3)	2007.09.03