Sdílet prostřednictvím

Provádění několika animací najednou (VB)

  • Č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 spustit několik animací paralelně.

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 spustit několik animací paralelně.

Postup

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

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

Animace se použije na panel textu, který bude vypadat 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ěknou barvu pozadí a také nastavte pevnou šířku panelu:

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

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

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

<Animations> V uzlu použijte <OnLoad> ke spuštění animací po úplném načtení stránky. Obecně platí, <OnLoad> že 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ě zvýrazní a velikost panelu se převtělí:

<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, zobrazí se panel, pak změní velikost (více než z trojnásobení šířky a poloviny jeho výšky) a zároveň zmizí.

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

Panel se vysychá 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ší