Sdílet prostřednictvím


Změna animace klientským kódem (VB)

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. Animaci je také možné změnit pomocí vlastního kódu JavaScriptu na straně klienta.

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. Animaci je také možné změnit pomocí vlastního kódu JavaScriptu na straně klienta.

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>

Samotná animace se spustí tlačítkem HTML:

<input type="button" id="Button1" runat="server" value="Launch Animation" />

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

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

Všimněte si, že ovládací prvek neobsahuje AnimationExtender žádný <Animations> uzel. Vlastní kód JavaScriptu slouží k poskytování animací, které se mají použít s ovládacím prvku.

Stejně jako u serverového AnimationExtenderrozhraní API nástroje zatím neexistuje snadný způsob, jak přiřadit animaci k extenderu. Extender však zveřejňuje několik metod pro čtení a zápis animací registrovaných pomocí různých událostí (OnClick, OnLoadatd.). Tady je několik příkladů:

  • get_OnClick()
  • set_OnClick()
  • get_OnLoad()
  • set_OnLoad()
  • ...

Formát návratové hodnoty get_*() funkcí a formát argumentu pro set_*() funkce je řetězec JSON, který představuje objektovou reprezentaci kódu XML. V současné době neexistuje způsob, jak objekt předat, ale je možné číst objekt z dané animace (get_OnXXXBehavior() metody).

Tady je řetězec JSON (bez oddělovacích uvozovek a pěkně naformátovaný), který představuje animaci aktivovanou tlačítkem, ale animuje panel změnou jeho velikosti a jeho vyblednutím ve stejnou dobu:

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

Následující kód JavaScriptu přiřadí tento popis json animaci OnClick aktuálního extenderu a spustí ho:

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

Animace se spustí okamžitě, bez kliknutí myší (a s velmi malými revizemi).

Animace se spustí okamžitě, bez kliknutí myší (a s velmi malými značkami) (kliknutím zobrazíte obrázek v plné velikosti).