애니메이션 중에 작업 사용 안 함(C#)Disabling Actions during Animation (C#)

Christian Wenzby Christian Wenz

코드 다운로드 또는 PDF 다운로드Download Code or Download PDF

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가 하기 위한 전체 프레임 워크입니다.The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. 또한 마우스 클릭과 같은 동작을 지원 합니다.It also supports actions, like mouse clicks. 그러나 마우스 클릭으로 애니메이션을 시작 하는 경우 애니메이션 중 마우스 클릭을 사용 하지 않도록 설정 하는 것이 좋습니다.However when a mouse click starts an animation, it is desirable to disable mouse clicks during the animation.

개요Overview

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가 하기 위한 전체 프레임 워크입니다.The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. 또한 마우스 클릭과 같은 동작을 지원 합니다.It also supports actions, like mouse clicks. 그러나 마우스 클릭으로 애니메이션을 시작 하는 경우 애니메이션 중 마우스 클릭을 사용 하지 않도록 설정 하는 것이 좋습니다.However when a mouse click starts an animation, it is desirable to disable mouse clicks during the animation.

단계Steps

먼저 페이지에 ScriptManager를 포함 합니다. 그런 다음 ASP.NET AJAX 라이브러리가 로드 되어 컨트롤 도구 키트를 사용할 수 있습니다.First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

애니메이션은 다음과 같은 HTML 단추에 적용 됩니다.The animation will be applied to an HTML button like this:

<input type="button" ID="Button1" runat="server" Value="Launch Animation" />

단추를 사용 하 여 포스트백을 만들지 않기 때문에 웹 컨트롤 대신 HTML 컨트롤을 사용 합니다. 클라이언트 쪽 애니메이션을 시작 하기만 하면 됩니다.Note that an HTML Control is used instead of a Web Control since we do not want the button to create a postback; it shall just launch the client-side animation for us.

그런 다음 ID, TargetControlID 특성 및 obligatory runat="server"를 제공 하 여 페이지에 AnimationExtender를 추가 합니다.Then, add the AnimationExtender to the page, providing an ID, the TargetControlID attribute and the obligatory runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">

<Animations> 노드 내에서 <OnClick> 마우스 클릭을 처리할 올바른 요소입니다.Within the <Animations> node, <OnClick> is the right element to handle the mouse click. 그러나 애니메이션을 수행 하는 동안에도 단추를 클릭할 수 있습니다.However, the button could be clicked during the animation, as well. <EnableAction> 요소는이를 처리할 수 있습니다.The <EnableAction> element can take care of that. Enabled="false"를 설정 하면 애니메이션의 일부로 단추가 사용 되지 않습니다.Setting Enabled="false" disables the button as part of the animation. 여러 개별 애니메이션 (단추 및 실제 애니메이션 사용 안 함)을 사용 하 고 있으므로 단일 애니메이션을 하나로 붙이려면 <Parallel> 요소가 필요 합니다.Since we are using several individual animations (disabling the button and the actual animations), the <Parallel> element is required to glue the single animations together into one. AnimationExtender에 대 한 전체 태그는 다음과 같습니다.Here is the complete markup for AnimationExtender:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
 <Animations>
 <OnClick>
 <Parallel>
 <EnableAction Enabled="false" />
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

목록의 끝에 있는 다음 XML 요소를 사용 하 여 애니메이션 뒤에 단추를 다시 사용 하도록 설정할 수도 있습니다.It would also be possible to re-enable to button after the animation, using the following XML element at the end of the list:

<EnableAction Enabled="true" />

그러나 지정 된 시나리오에서는 단추가 페이드 아웃 되어 애니메이션의 끝에 표시 되지 않으므로이는 쓸모가 없습니다.However in the given scenario this would be useless since the button fades out and is not visible at the end of the animation.

애니메이션이 실행 되는 즉시 단추를 사용할 수 없습니다.The button is disabled as soon as the animation runs

애니메이션을 실행 하는 즉시 단추를 사용할 수 없습니다 (전체 크기 이미지를 보려면 클릭).The button is disabled as soon as the animation runs (Click to view full-size image)