Sdílet prostřednictvím

Přidání animace k ovládacímu prvku (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. Tento kurz ukazuje, jak takovou animaci nastavit.

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. Tento kurz ukazuje, jak takovou animaci nastavit.

Postup

Prvním krokem je jako obvykle zahrnout na ScriptManager stránku , aby se načetla knihovna ASP.NET AJAX a bylo možné použít sadu Control Toolkit:

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

Animace v tomto scénáři se použije na panel 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>

Přidružená třída CSS pro panel definuje barvu pozadí a šířku:

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

V dalším kroku potřebujeme AnimationExtender. Po zadání ID a obvyklých runat="server"TargetControlID vlastností musí být atribut nastaven na ovládací prvek, aby se v našem případě na panelu animovali:

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

Celá animace se používá deklarativně pomocí syntaxe XML, která bohužel v současné době intellisense sady Visual Studio plně nepodporuje. Kořenový uzel se nachází <Animations>; v tomto uzlu a je povoleno několik událostí, které určují, kdy se animace uskuteční:

  • OnClick (kliknutí myší)
  • OnHoverOut (když myš opustí ovládací prvek)
  • OnHoverOver (když ukazatel myši najede na ovládací prvek a zastaví animaci OnHoverOut )
  • OnLoad (po načtení stránky)
  • OnMouseOut (když myš opustí ovládací prvek)
  • OnMouseOver (když myš najede na ovládací prvek, nezastaví animaci OnMouseOut )

Architektura se dodává se sadou animací, z nichž každá je reprezentovaná vlastním elementem XML. Tady je výběr:

  • <Color> (změna barvy)
  • <FadeIn> (slábnoucí)
  • <FadeOut> (vybledne)
  • <Property> (změna vlastnosti ovládacího prvku)
  • <Pulse> (pulzující)
  • <Resize> (změna velikosti)
  • <Scale> (proporcionální změna velikosti)

V tomto příkladu by měl panel zeslábnout. Animace musí trvat 1,5 sekundy (Duration atribut) a zobrazit 24 snímků (kroky animace) za sekundu (Fps atribut). Tady je kompletní kód AnimationExtender ovládacího prvku:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Když spustíte tento skript, panel se zobrazí a zmizí za jednu a půl sekundy.

Panel se vysouvá.

Panel se midí (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší