Sdílet prostřednictvím

Provádění několika animací najednou (C#)

  • Článek

Christian Wenz

Stáhnout PDF

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Umožňuje paralelní spuštění několika animací.

Přehled

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Umožňuje paralelní spuštění několika animací.

Postup

Nejprve na stránce zahrňte ScriptManager . Pak se načte ASP.NET knihovna AJAX, což umožňuje použití sady nástrojů Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

Animace se použije u panelu textu, který vypadá takto:

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

V přidružené třídě CSS pro panel definujte příjemnou barvu pozadí a také nastavte pevnou šířku panelu:

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Pak na stránku IDTargetControlID přidejte AnimationExtender , atribut a povinný runat="server"parametr :

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

V rámci <Animations> uzlu použijte <OnLoad> ke spuštění animací, jakmile je stránka plně načtená. Obecně platí, že <OnLoad> akceptuje jenom jednu animaci. Architektura animace umožňuje spojit několik animací do jedné pomocí elementu <Parallel> . Všechny animace v rámci <Parallel> se spouštějí současně.

Tady je možné označení AnimationExtender ovládacího prvku, který se současně zmaní a změna velikosti panelu:

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

A skutečně: Když spustíte tento skript, panel se zobrazí, pak změní velikost (více než zakopnutí jeho šířky a poloviny jeho výšky) a zároveň zeslábne.

Panel se midí a změna velikosti (včetně jeho obsahu, díky vykreslovacímu modulu prohlížeče)

Panel se midí a změna velikosti (včetně jeho obsahu, díky vykreslovacímu modulu prohlížeče) (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší