ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 애니메이션을 변경할 수도 있습니다.
개요
ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 사용자 지정 클라이언트 쪽 JavaScript 코드를 사용하여 애니메이션을 변경할 수도 있습니다.
단계
우선 페이지에 를 ScriptManager 포함합니다. 그런 다음 ASP.NET AJAX 라이브러리가 로드되어 제어 도구 키트를 사용할 수 있습니다.
<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" />
그런 다음 , 특성 및 의무 를 TargetControlIDID제공하여 페이지에 을 추가 AnimationExtender 합니다.runat="server"
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1" />
컨트롤 내에 노드가 AnimationExtender 없습니다<Animations>. 사용자 지정 JavaScript 코드는 컨트롤과 함께 사용할 애니메이션을 제공하는 데 사용됩니다.
의 AnimationExtender서버 API와 마찬가지로 아직 확장자에 애니메이션을 할당하는 쉬운 방법은 없습니다. 그러나 extender는 다양한 이벤트(OnClick, OnLoad등)에 등록된 애니메이션을 읽고 쓰는 여러 메서드를 노출합니다. 몇 가지 예제는 다음과 같습니다.
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 코드는 현재 extender의 애니메이션에 OnClick 이 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>
애니메이션은 마우스 클릭 없이 즉시 실행됩니다(태그가 거의 없음)(전체 크기 이미지를 보려면 클릭).
