Поделиться через

Одновременное выполнение нескольких анимаций (C#)

  • Статья

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

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

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

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

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

Этапы

Во-первых, добавьте 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> для запуска анимации после полной загрузки страницы. Как правило, <OnLoad> принимает только одну анимацию. Платформа Анимация позволяет объединить несколько анимаций в одну с помощью <Parallel> элемента . Все анимации внутри <Parallel> выполняются одновременно.

Ниже приведена возможная разметка AnimationExtender для элемента управления, одновременно исчезающая и изменяющая размер панели:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

И действительно: при выполнении этого скрипта отображается панель, а затем изменяется размер (более чем в три раза и вдвое уменьшается высота) и исчезает одновременно.

Панель исчезает и изменяет размер (включая ее содержимое, благодаря механизму отрисовки браузера)

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

НазадВперед