Анимация в зависимости от условия (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления "Анимация" в наборе средств управления AJAX ASP.NET — это не только элемент управления, но и вся платформа для добавления анимаций в элемент управления. Может ли анимация выполняться или не может зависеть от условия в виде кода JavaScript.

Обзор

Элемент управления "Анимация" в наборе средств управления AJAX ASP.NET — это не только элемент управления, но и вся платформа для добавления анимаций в элемент управления. Может ли анимация выполняться или не может зависеть от условия в виде кода JavaScript.

Шаги

Во-первых, включите ScriptManager на страницу, а затем загружается библиотека AJAX ASP.NET, что позволяет использовать набор элементов управления.

<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>

Затем добавьте AnimationExtender на страницу, указав ID и атрибут TargetControlID, а также обязательный runat="server":.

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

Внутри узла <Animations> используйте <OnLoad> для запуска анимации после полной загрузки страницы. Вместо одной из обычных анимаций начинает использоваться элемент <Condition>. Код JavaScript, предоставленный в качестве значения атрибута ConditionScript , выполняется во время выполнения. Если значение равно 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 должно быть экранировано (). При запуске этого скрипта либо не выполняется ни одна анимация, либо выполняется одна из двух, либо обе.

Панель исчезает без изменения размера, поэтому активируется вторая анимация, а первая - нет (Нажмите, чтобы увидеть изображение в полном размере)