SilentDev

앞선 강좌들로 AnimationExtender의 적지 않은 기능에 대해서 소개했다. 이제 마지막으로 지금까지 소개하지 않은 이벤트핸들러와 효과 및 적용방법에 대해서 정리하도록 하겠다.

<OnMouseOver>와 <OnHoverOver>의 차이를 1부에서 소개했다. 다시 정리를 하자면, 시작은 둘다 같다. 즉, 마우스가 특정 오브젝트에 올라갔을 때, 이 이벤트핸들러가 실행된다. 그리고 이 이벤트핸들러로 실행되는 이벤트가 10초가 걸린다고 가정한다면, 10초 후 마우스가 오브젝트를 벗어나서 <OnMouseOut>혹은 <OnHoverOut>으로 인한 이벤트의 결과는 <OnMouseOut>와 <OnHoverOut> 차이가 없이 100% 똑같은 결과를 보여준다.

하지만, <OnMouseOver>와 <OnHoverOver>로 이벤트가 시작되서 10초의 시간이 지나기 전 즉, 이벤트가 끝나기 전에 <OnMouseOut>혹은 <OnHoverOut>이 발생한다면 여기서 두 이벤트핸들러는 차이가 생긴다.

<OnHoverOver>는 이벤트가 끝나기 전에 <OnHoverOut>이 발생되면 진행중인 이벤트를 중지하고 <onHoverOut>이벤트를 실행하는 반면, <OnMouseOver>는 이벤트가 끝나기 전에 <OnMouseOut>이 발생한다해도 끝까지 <OnMouseOver>의 이벤트를 진행시킨다. 따라서, 이벤트와 상황에 맞게 <OnMouseOver>, <OnHoverOver>를 사용한다면 보다 자연스러운 애니메이션 효과를 적용할 수 있게 될 것이다.


예제를 보면 MyName이라는 패널에 vader이라는 텍스트가 입력되어있고 AnimationExtender에는 TargetControlID로 MyName이 지정되어있다. 즉, MyName패널에 AnimationExtender로 이벤트를 적용하겠다는 것이다.
컨트롤이 로딩되면서 투명도가 0.2가 되며, 마우스가 패널위로 올라갈 때 0.5초동안 초당 20프래임의 속도로 투명도 0.2에서 0.8로 변화를 주게되며, 마우스가 패널을 빠저나오면 0.8의 투명도에서 0.2로 0.5초동안 초당 20프래임의 속도로 변화하는 과정을 보여주게된다.

또 새로운 속성이 나타났다. 바로 <FadeIn><FadeOut>의 MinimumOpacity, MaximumOpacity가 그것이다.
속성을 봐도 직관적으로 그 의미를 알 수 있을것이다. 의미는 다음과 같다.

- MinimumOpacity : 최소 투명도
- MaximumOpacity : 최대 투명도

예제를 실행시키고 패널위에 마우스를 올려보고 내려보자. 의도한대로 패널이 선명해졌다가 다시 흐려질것이다. 이번에는 <OnMouseOver>이벤트가 끝나기 전에 마우스를 패널에서 치워보자.
그럼 <OnMouseOver>이벤트와 <OnMouseOut>이벤트가 서로 중복되서 실행되는 것을 확인할 수 있다.

이제 <OnMouseOver>이벤트에서 <OnHoverOver>이벤트로 바꿔서 실행하도록 하겠다.


예제를 보면 <OnMouseOver>이 <OnHoverOver>로 <OnMouseOut>이 <OnHoverOut>으로 변경된 것을 볼 수 있다.
예제를 실행하고 브라우저에서 다시 확인해보자. <OnHoverOver>이벤트가 끝나기 전에 마우스를 패널에서 빼면 <OnHoverOver>의 이벤트는 중단되고, <OnHoverOut>의 이벤트가 실행됨을 확인할 수 있다.

따라서, <OnMouseOver>와 <OnHoverOver>의 특성을 정확히 알고, 상황에 맞게 사용하면 보다 유연하고 효과적인 애니메이션 효과를 줄 수 있을 것이다.

이제, 좀 더 다양한 효과를 적용해 보겠다.

MyName 패널에 <OnClick>이벤트핸들러를 추가했다.
패널을 클릭하면 패널의 배경색상을 변경하는 효과를 적용했다. 브라우저에서 실행하고 패널을 클릭하면 색상의 변화를 확인할 수 있을 것이다.

<Sequence>자식의 <Color>태그의 AnimationTarget은 사실 이번 예제에서는 빼도 상관없다. 이유는 AnimationExtender의 TargetControlID를 MyName으로 지정했기 때문에 그 속성을 그대로 상속받고 있기 때문이다.
<Sequence>의 나머지 속성을 살펴보도록 하자.
패널을 클릭하면 순차적으로 2개의 이벤트가 발생하게 되며, 1초동안 배경색상을 #EFEFEF에서 #FF0000으로 변경되며, 다시 1초동안 #FF0000에서 #EFEFEF로 배경색이 변경되는 이벤트가 진행된다.

- AnimationTarget : 이벤트를 적용할 오브젝트
- Duration : 이벤트가 진행되는 시간 (초)
- StartValue : 이벤트의 시작 값
- EndValue : 이벤트의 마지막 값
- Property : 적용할 속성
- PropertyKey : 적용할 속성의 내부 속성

Property와 PropertyKey의 설명이 좀 부적절한 듯 하여 부연설명을 하겠다. 예제를 보면 Property="style" PropertyKey="backgroundColor"이라고 되어있다. 이 의미는 다음과 같다.


이처럼 선언적으로 간단하게 설정하면 복잡하게 작성해야 할 자바스크립트의 애니메이션 효과를 손쉽게 구현할 수 있게 되는 것이다.

마지막으로 <ScriptAction>과 <StyleAction>에 대해서 알아보고 마치도록 하겠다.

$get("MyName");은 document.getElementById("MaName");과 같은 뜻으로 축약형 표현이다.
함수는 간단하다. MyName 패널의 visibility가 hidden이면 visible로 hidden이 아니면 hidden으로 속성을 변경하는 함수이다.

이제 본문에 다음의 코드를 작성하자

굵은 부분을 보자

버튼을 클릭하였을 때, objDisplay()함수를 호출하겠다는 의미다. 이 함수는 앞에서 설명하였다. 실행하면 MyName 패널이 나타났다 사라졌다 할 것이다.

다음으로 스타일시트를 적용해 보겠다.

버튼을 클릭하면 MyName패널의 스타일속성을 display:none으로 변경하겠는 의미이다.
브라우저에서 실행하면 버튼을 클릭할 경우 MyName 패널이 사라지게 된다.

지금까지 짧지 않게 AnimationExtender에 대해서 알아보았다. 이 컨트롤은 지금까지 소개한 내용으로 보다 다양하게 다루기 어려웠던 애니메이션 효과를 손쉽게 적용할 수 있게 해준다.

AnimationExtender 강좌를 마치도록 하겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번시간에는 AnimationExtender 2부에서 알아봤던 OnLoad 이벤트에서 더 나아가 OnClick과 다양한 애니메이션 효과를 알아보도록 하겠다.

먼저, 2부의 첫번째 예제였던 컨트롤 로딩과 동시에 반투명이 되었던 버튼을 버튼을 클릭하면 반투명이 되도록 바꿔보겠다.


예제에서 굵은폰트는 2부의 소스에서 변경된 부분으로 OnClickClick="return false;"는 버튼을 클릭하고 반투명이 되는 효과를 봐야 하는데 클릭하면 포스트백되기 때문에 애니메이션 효과를 보기위함이며, 4, 6 라인의 <OnClick></OnClick>는 TargetControlID로 지정된 컨트롤에 OnClick이벤트가 발생하면 하위 노드의 효과를 적용한다고 선언한 것이다.

실행해보면 버튼을 클릭하면 버튼이 반투명해진다.

이처럼 OnClick이벤트는 TargetControlID로 컨트롤을 지정하고 예제처럼 <OnClick></OnClick>을 선언하면된다.

그럼 다양한 효과를 적용해 보도록 하겠다.
또다시, 2부의 예제를 재활용하겠다. 2부 두번째 예제에는 로딩이 완료되면 컨트롤이 2배로 커지는 예제였다. 이 예제를 클릭하면 2배로 커지는 예제로 변경해보겠다.


예제를 실행하고 myName 패널을 클릭하면 0.5초동안 초당 60프래임으로 2배로 커지는 애니메이션 효과를 확인할 수 있다.

지금까지는 한 이벤트에 하나의 효과만을 적용했지만, 지금부터 2개 이상의 효과를 적용하겠다.
위 예제에서 패널이 커지기 전에 깜벅거림을 효과를 추가하겠다. 결과는 패널을 클릭하면 패널이 깜박거리고 난 후 2배로 커진다.


예제를 보면, <Scale>태그 사이에 <Sequence>태그가 생겼고, <Pulse>태그가 <Scale>태그 앞에 작성되었다.
<Sequence>태그는 2개 이상의 효과를 줄 경우 순차적으로 효과를 주기 위한 태그이며, <Pulse>태그는 깜박거림 효과를 준다. <Pulse>태그는 화면에서 완전히 사라젔다가 다시 나타나는 효과를 3회 반복하게된다. 예제에서와 같이 <Pulse>태그에 Duration속성을 0.1(.1은 0.1과 같은 뜻)로 설정하면, 0.1초동안 하나의 액션(사라지거나 나타나는 액션중 하나)을 수행한다. 즉, 0.1로 Duration을 설정하면 한번 깜박거리는데 총 0.2초가 소요되며, <Pulse>태그는 총 0.6초동안 깜박거리는 효과를 수행하게 된다.
0.6초동안 <Pulse>태그가 수행되면 그 다음으로 <Scale>태그가 수행되어 컨트롤은 2배로 커지게 된다.

<Sequence>태그가 순차적으로 하나씩 효과를 실행한다면, 다음에 설명할 <Parallel>태그는 동시에 모든 효과를 실행한다.


예제를 실행하면 깜박거림 효과 뒤에 패널의 크기가 2배로 커지면서 화면에서 사라진다. <Pulse>태그 다음에 <Parallel>태그 하위로, <Scale>, <FadeOut> 태그를 포함하고 있다. 만약, <Parallel>태그를 지우고 실행을 하면 깜박이고난 후 크기가 두배로 커지고, 이 작업이 모두 완료 된 후 화면에서 사라진다.
예제를 잘 보면 <Scale>태그에 Duration속성과 Fps속성이 사라진것을 확인할 수 있다. 이유는 <Parallel>태그에 해당 속성이 설정되어있고, 이 설정을 상속받아서 그대로 적용되기 때문이다. <Parallel>태그에 Duration, Fps를 설정하고 하위에도 별도로 Duration, Fps를 설정해도 <Parallel>태그의 설정이 그대로 유지된다. 따라서, <Scale>태그와 <FadeOut>태그에 기본속성인 Duration과 Fps를 정의하지 않은 것이다.

이번시간에는 <OnClick>이벤트헨들러와 2개 이상의 애니메이션 효과를 적용하는 방법에 대해서 알아보았다. 다음 4부에서는 나머지 이벤트 헨들러인 <OnMouseOver>, <OnMouseOut>, <OnHoverOver>, <OnHoverOut>태그와 이번시간에도 다루지 않은 효과 및 직접 자바스크립트와 CSS를 적용하는 방법에 대해서 알아보도록 할 것이다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

AnimationExtender 1부에서 이벤트 속성에대해서 알아보았다. 이제 각 속성에대해서 알아보도록 하겠다. 먼저 OnLoad이다.

OnLoad속성은 컨트롤 로딩 시 실행된다. 버튼에 OnLoad속성으로 로딩 시 버튼의 크기를 키운다던지, 색상을 바꾼다거나 반투명하게 만드는 등의 여러가지 애니메이션 효과를 줄 수 있다.

다음은 버튼을 반투명하게 하는 코드와 그 결과다.
버튼이 반투명처리가 되었다. 코드를 작성하고 실행을하면 로딩 순간에는 반투명효과가 적용되지 않았다가 로딩이 완료되는 순간 반투명효과가 적용이 되는것을 볼 수 있다. 필자의 실행환경이 느려서 그럴수도 있겠지만, 깜박거리는 것을 볼 수 있다. 이는 적용한 효과가 적용되서 로딩되는것이 아니라 로딩이 된 후에 클라이언트에서 적용이 되는 것을 의미하는 것이다.

이번에는 컨트롤이 로딩됨과 동시에 사이즈가 2배로 커지는 효과를 주도록 하겠다.

Panel컨트롤을 등록하고 스타일로 가로크기와 배경색, 테두리 속성와 내부 텍스트의 정렬을 정의하고 vader라고 입력했다. 그리고, AnimationExtender를 추가하여 TargetControlID="myName"으로 이벤트 효과를 줄 타겟컨트롤을 지정한다.
이제 애니메이션효과를 페이지로드시에 주도록 하겠다. TargetControlID를 지정한 후, <Animations>태그와 <OnLoad>태그로 애니메이션효과를 OnLoad 이벤트 발생시 적용하도록 선언하고, 이벤트 발생 시 실행할 상세 애니메이션을 선언한다. 이번 효과는 타겟컨트롤의 크기를 2배로 키우는 것이다.

<Scale>태그는 규모를 지정하는 효과를 주는데 다음은 그 속성이다.
 - ScaleFactor : 지정된 비율의 크기로 크기를 변경한다. 2는 2배로 확대, .5는 반으로 축소한다.
 - Unit : 크기를 변경하는 단위 지정
 - ScaleFont : 글자를 크게할 지 여부를 지정, true는 ScaleFactor에 지정된 비율만큼 폰트의 크기를 변경한다.
 - FontUnit : 크기를 변경할 폰트의 단위 지정
 - Duration : 타겟컨트롤이 변경되는 시간 지정, 1은 1초
 - Fps : 초당 프레임 수

위 코드를 실행하면 vader라는 패널이 페이지 로딩과 동시에 2배로 0.5초동안 커지는 것을 확인할 수 있을 것이다.

AnimationExtender 3부에서는 OnClick 이벤트와 더 다양한 애니메이션 효과에 대해서 알아보도록 하겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

AJAX Control Toolkit중 그 활용도가 높을것으로 기대되는 컨트롤 중 하나가 바로 이 AnimationExtender 컨트롤이다. 자바스크립트로 직접 구현하기 어려운 동적인 움직임을 아주 자연스럽게, 그리고 섬세하게 컨트롤 할 수 있다. 그것도 어렵지 않게 말이다.

그럼 AnimationExtender의 기본적인 활용 방법에 대해서 알아보도록 하겠다.

AnimationExtender의 구조

AnimationExtender는 XML문법으로 작성되며, 다음과 같은 기본 구조를 갖는다.

하나씩 살펴보자.

1. OnLoad
이 속성은 TargetControlID로 지정된 컨트롤이 로딩될 때 실행되는 속성이다. 즉, myCrtl이라는 컨트롤이 페이지 로딩 시 로딩이 된다면 이 OnLoad이벤트가 발생되고 OnLoad속성으로 정의되 Animation이 실행되게 된다.

2. OnClick
TargetControlID로 지정된 컨트롤을 클릭하였을 때 실행되는 속성이다. myCtrl이 버튼을 경우 버튼을 클릭하면 OnClick 자식 노드에 정의한 이벤트가 실행된다.

3. OnMouseOver
TargetControlID로 지정된 컨트롤 위에 마우스를 올렸을 경우 실행된다. myCtrl이 <div>태그의 아이디라면, 이 div 영역위에 마우스가 올라갔을 경우 OnMouseOver의 자식 노드에 정의된 이벤트가 실행된다.

4. OnMouseOut
TargetControlID로 지정된 컨트롤에서 마우스가 빠저나갔을 때 실행된다. myCtrl이 <div>태그의 아이디라면, 이 div 영역위에서 마우스가 빠져나갔을 때 OnMouseOut의 자식 노드에 정의된 이벤트가 실행된다.

5. OnHoverOver
TargetControlID로 지정된 컨트롤에 마우스가 올라왔을 때 실행된다. OnMouseOver와 비슷하지만, 이벤트가 종료되기 전에 OnHoverOut가 실행된다면, 이벤트를 중지하고 OnHoverOut를 실행한다.

6. OnHoverOut
TargetControlID로 지정된 컨트롤에서 마우스가 빠져나갔을 때 실행된다. OnMouseOver와 비슷하지만, 이벤트가 종료되기 전에 OnHoverOver가 실행된다면, 이벤트를 중지하고 OnHoverOver를 실행한다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.