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

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

Загрузить PDF-файл

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

Общие сведения

Элемент управления Анимация в наборе элементов управления ASP.NET AJAX — это не только элемент управления, но и целая платформа для добавления анимации в элемент управления. Запуск или отсутствие анимации также может зависеть от условия в виде кода 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 должен быть экранирован (). При выполнении этого скрипта анимация либо не выполняется, либо выполняется один из двух сценариев, либо выполняется и то, и другое.

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

НазадВперед