사용자 상호 작용에 대한 응답으로 애니메이션(C#)

작성자: Christian Wenz

PDF 다운로드

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 애니메이션은 자동으로 시작하거나 마우스를 클릭하여 사용자 상호 작용에 의해 트리거될 수 있습니다.

개요

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 애니메이션은 자동으로 시작하거나 마우스를 클릭하여 사용자 상호 작용에 의해 트리거될 수 있습니다.

단계

우선 페이지에 를 ScriptManager 포함합니다. 그런 다음 ASP.NET AJAX 라이브러리가 로드되어 Control Toolkit을 사용할 수 있습니다.

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

애니메이션은 다음과 같은 텍스트 패널에 적용됩니다.

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

패널에 연결된 CSS 클래스에서 좋은 배경색을 정의하고 패널에 대해 고정 너비를 설정합니다.

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

그런 다음 , 특성 및 필수 를 제공하여 IDTargetControlID 를 페이지에 추가 AnimationExtender 합니다.runat="server"

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

<Animations> 노드 내에는 사용자 상호 작용을 통해 애니메이션을 시작하는 다섯 가지 방법이 있습니다(누락된 요소는 <OnLoad> 전체 페이지가 완전히 로드되면 실행됩니다).

• <OnClick> (마우스로 컨트롤 클릭)
• <OnHoverOut> (마우스가 컨트롤을 나뭇잎)
• <OnHoverOver> (마우스가 컨트롤 위로 마우스를 가져가면 애니메이션이 중지됨 <OnHoverOut> )
• <OnMouseOut> (마우스가 컨트롤을 나뭇잎)
• <OnMouseOver> (마우스가 컨트롤을 마우스로 가리키고 애니메이션을 <OnMouseOut> 중지하지 않음)

이 시나리오에서는 가 <OnClick> 사용됩니다. 사용자가 패널을 클릭하면 크기가 조정되고 동시에 페이드 아웃됩니다.

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

마우스 클릭으로 애니메이션 시작(전체 크기 이미지를 보려면 클릭)

이전다음