Client-Side 코드를 사용하여 애니메이션 변경(C#)

작성자 : Christian Wenz

PDF 다운로드

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 애니메이션을 변경할 수도 있습니다.

개요

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 애니메이션을 변경할 수도 있습니다.

단계

우선 페이지에 포함하면 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>

실제 애니메이션은 HTML 단추로 시작됩니다.

<input type="button" id="Button1" runat="server" value="Launch Animation" />

그런 다음, AnimationExtender을/를 페이지에 추가하고, ID, TargetControlID 특성 및 필수 runat="server"을/를 제공하세요.

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

AnimationExtender 컨트롤 안에 <Animations> 노드가 없습니다. 사용자 지정 JavaScript 코드는 컨트롤과 함께 사용할 애니메이션을 제공하는 데 사용됩니다.

서버 AnimationExtenderAPI와 마찬가지로 아직 확장자에 애니메이션을 할당하는 쉬운 방법은 없습니다. 그러나 extender는 다양한 이벤트(OnClickOnLoad등)에 등록된 애니메이션을 읽고 쓰는 여러 메서드를 노출합니다. 다음은 몇 가지 예입니다.

  • get_OnClick()
  • set_OnClick()
  • get_OnLoad()
  • set_OnLoad()
  • ...

함수의 반환 값 get_*() 형식과 함수에 대한 set_*() 인수의 형식은 JSON 문자열로, XML 태그의 개체 표현을 제공합니다. 현재는 개체를 전달할 방법이 없지만 지정된 애니메이션(get_OnXXXBehavior() 메서드)에서 개체를 읽을 수 있습니다.

다음은 단추에 의해 트리거되는 애니메이션을 나타내는 JSON 문자열(구분 따옴표 및 서식이 잘 지정되지 않은)이지만 패널 크기를 조정하고 동시에 페이드 아웃하여 패널에 애니메이션 효과를 주는 문자열입니다.

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

다음 JavaScript 코드는 현재 익스텐더의 애니메이션에 이 JSON 기술을 할당하고 실행합니다.

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

애니메이션은 마우스 클릭 없이 즉시 실행됩니다(태그가 거의 없는 경우).

애니메이션은 마우스 클릭 없이(그리고 태그가 거의 없는) 즉시 실행됩니다(전체 크기 이미지를 보려면 클릭).

이전다음

  • Last updated on