Postupné provedení několika animací (C#)

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 spustit několik animací jednu po druhé.

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 spustit několik animací jednu po druhé.

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ý atribut .runat="server":

<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 <Sequence> . Všechny animace uvnitř <Sequence> se spouštějí jednu po druhé. Tady je možné označení AnimationExtender ovládacího prvku, nejprve rozšířit panel a pak snížit jeho výšku:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Když spustíte tento skript, panel se nejprve rozšíří a pak zmenší.

Nejprve se zvětší šířka (kliknutím zobrazíte obrázek v plné velikosti).

Pak se výška zmenší (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší