조건에 따른 애니메이션(C#)

2023-07-13

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>

그런 다음 , 특성 및 의무 사항을 제공하여 IDTargetControlID 페이지에 을 추가 AnimationExtender 합니다.runat="server":

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

노드 내에서 <Animations> 를 사용하여 <OnLoad> 페이지가 완전히 로드되면 애니메이션을 실행합니다. 일반 애니메이션 <Condition> 중 하나 대신 요소가 재생됩니다. 특성 값 ConditionScript 으로 제공되는 JavaScript 코드는 런타임에 실행됩니다. true로 평가되면 애니메이션이 실행되고 그렇지 않으면 실행되지 않습니다. 다음 태그는 두 개의 애니메이션을 제공하며, 각 애니메이션은 임의로 50%의 사례에서 실행됩니다. 내에 <OnLoad>애니메이션이 하나만 있을 수 있으므로 두 <Condition> 애니메이션은 요소를 사용하여 함께 조인 <Sequence> 됩니다.

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
  <Animations>
    <OnLoad>
      <Sequence>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <Resize Width="1000" Height="150" Unit="px" />
        </Condition>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <FadeOut Duration="1.5" Fps="24" />
        </Condition>
      </Sequence>
    </OnLoad>
  </Animations>
</ajaxToolkit:AnimationExtender>

특성의 보다 작음 기호(<)는 ConditionScript 이스케이프()해야 합니다. 이 스크립트를 실행하면 애니메이션이 실행되지 않거나 둘 중 하나가 실행되거나 둘 다 실행됩니다.

패널 크기 조정 없이 페이드 아웃, 그래서 두 번째 애니메이션 실행, 첫 번째 하지 않았다 (전체 크기 이미지를 보려면 클릭)

이전 다음

다음을 통해 공유

조건에 따른 애니메이션(C#)

개요

단계

피드백

추가 리소스