Sdílet prostřednictvím

Přidání animace k ovládacímu prvku (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. V tomto kurzu se dozvíte, 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. V tomto kurzu se dozvíte, jak takovou animaci nastavit.

Postup

Prvním krokem je jako obvykle zahrnout ScriptManager na stránku, aby se načetla knihovna AJAX ASP.NET 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ého runat="server"atributu TargetControlID musí být nastaven na ovládací prvek, který se má v našem případě animovat, panel:

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

Celá animace se používá deklarativně pomocí syntaxe XML, bohužel v současné době není plně podporována technologií IntelliSense sady Visual Studio. Kořenový uzel je <Animations>; uvnitř tohoto uzlu, je povoleno několik událostí, které určují, kdy se animace zabírají:

  • OnClick (kliknutí myší)
  • OnHoverOut (když myš opustí ovládací prvek)
  • OnHoverOver (když myš najede myší 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 myší na ovládací prvek, nezastaví OnMouseOut se animace)

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

  • <Color> (změna barvy)
  • <FadeIn> (slábne)
  • <FadeOut> (vymizí)
  • <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 musí 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 1 a půl sekundy.

Panel se vysychá ven

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

Další