Animazione in base a una condizione (C#)

di Christian Wenz

Scarica il PDF

Il controllo Animazione nel ASP.NET AJAX Control Toolkit non è solo un controllo ma un intero framework per aggiungere animazioni a un controllo. Se un'animazione viene eseguita o meno può dipendere anche da una condizione sotto forma di codice JavaScript.

Panoramica

Il controllo Animazione nel ASP.NET AJAX Control Toolkit non è solo un controllo ma un intero framework per aggiungere animazioni a un controllo. Se un'animazione viene eseguita o meno può dipendere anche da una condizione sotto forma di codice JavaScript.

Passaggi

Prima di tutto, includere nella ScriptManager pagina; quindi, la libreria ASP.NET AJAX viene caricata, rendendo possibile usare Control Toolkit:

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

L'animazione verrà applicata a un pannello di testo simile al seguente:

<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>

Nella classe CSS associata per il pannello definire un bel colore di sfondo e impostare anche una larghezza fissa per il pannello:

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

Aggiungere quindi l'oggetto AnimationExtender alla pagina, specificando un IDattributo e l'attributo TargetControlID obbligatorio runat="server":

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

All'interno del <Animations> nodo, usare <OnLoad> per eseguire le animazioni dopo che la pagina è stata completamente caricata. Anziché una delle animazioni regolari, l'elemento <Condition> entra in gioco. Il codice JavaScript fornito come valore dell'attributo ConditionScript viene eseguito in fase di esecuzione. Se restituisce true, l'animazione viene eseguita, in caso contrario, non. Il markup seguente fornisce due animazioni, ognuna delle quali viene eseguita nel 50% dei casi in caso casuale. Poiché è possibile che vi sia solo un'animazione all'interno <OnLoad>di , le due <Condition> animazioni vengono unite insieme usando l'elemento <Sequence> :

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
  <Animations>
    <OnLoad>
      <Sequence>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <Resize Width="1000" Height="150" Unit="px" />
        </Condition>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <FadeOut Duration="1.5" Fps="24" />
        </Condition>
      </Sequence>
    </OnLoad>
  </Animations>
</ajaxToolkit:AnimationExtender>

Si noti che il segno () minore di (<) nell'attributo ConditionScript deve essere escape (). Quando si esegue questo script, non viene eseguita alcuna animazione o una delle due operazioni o entrambe.

Il pannello non viene ridimensionato senza ridimensionamento, quindi la seconda animazione viene eseguita, la prima non è stata (Fare clic per visualizzare l'immagine full-size)

IndietroAvanti