Redazione
a- a+

Silverlight e Ajax Toolkit: creare menu animati

Metodo 1:

Creiamo due animazioni all' interno dell' Expression Blend usando il KeyFrame Recorder. Muoveremo semplicemente la "Tendina" in questione nel punto in cui vogliamo appaia, e a questo punto in un intervallo di 1 secondo, lo animeremo verso l' alto.Questa azione la chiameremo "PLMoveUP"; a questo punto dovremo creare una seconda animazione, chiamata "PLMoveDown" che faccia esattamente il contrario, per riportare il menu alla normalità.

Sebbene straordinariamente funzionale, questo approccio presenta alcuni problemi. Ad esempio, se un utente clikka ripetutamente sul bottone, il menu apparirà e scomparirà a flash, a scatti, il che va evitato.

Metodo 2:

Anzichè avere due animazioni per la "Tendina" , sarebbe meglio farne una unica che le contenga entrambe. Per questo esistono le API di Silverlight: Storyboard.AutoReverse e Storyboard.Seek(amt):

In tal modo l' animazione funziona, ma è comunque difficile capire a che punto dell' animazione ci si trova. per fare ciò ci sarebbe bisogno di un timer che, ad intervalli regolari, faccia un ping/pong alla Storyboard per un aggiornamento. Per far ciò dovremo impostare l' attributo x:Name a uno dei SplineDoubleKeyFrames al fine di ricavare il valore dei KeyTime.Seconds:

Metodo 3:

Potremmo invece utilizzare l' AjaxControlToolkit dell' ASP.NET, tramite il quale saremmo in grado di fare leva su animazioni già esistenti.

Innanzitutto, creiamo un progetto usando il template ASP.NET AJAX Futures Web application (.NET Framework 3.5); a questo punto aggiungiamo al progetto il JavaScript Silverlight Project.

Impostiamo poi le strutture della GUI, usando il Microsoft Expression Blend.

Colleghiamo ora le due cose, scegliendo "Add Silverlight Link.." nel Solution Explorer di Visual Studio 2008.

A questo punto, ecco il codice:

    1:  <!-- ---------------------

    2: SILVERLIGHT CONTROL

    3: -------------------------- -->

    4:  <div class="SilverlightHost">

    5:  <asp:Xaml XamlUrl="~/Page.xaml" runat="server" ID="SilverlightControl" Windowless="true"

    6:  Width="1000" Height="750" />

    7:  </div>


Usando la tag Xaml creiamo un puntatore al file Page.xaml (contenente le strutture della GUI).

Nella UI abbiamo un PullDownMenu, che vogliamo animare verso il basso e verso l' altro:

Questo è il codice:

    1:  <script type="text/javascript">

    2:  Sys.Application.add_init(appInitHandler);

    3:  function appInitHandler() {

    4:  }

    5: 

    6:  // Silverlight is Ready, now proceed...

    7:  function appOnLoad() {

    8:  //$create(Demo.Person,null,null,null,null);

    9:  var animator = new AjaxControlToolkit.Animation.FadeAnimation($get("Overlay"), 0.5, 20, "FadeOut");

    10:  var customanim = new AjaxControlToolkit.Animation.ScriptAction("overlay", 0.5, 40, null);
    11:  animator.play();

    12:  customanim.onStep = onCustomStep;

    13:  customanim.play();

    14:  }

    15: 

    16:  // Custom Animation Sequence

    17:  function onCustomStep(percentage) {

    18:  var o = $get("SilverlightControl").content.FindName("pulldown");

    19:  var amt = Math.round(456*percentage/100);

    20:  o.SetValue("Canvas.Top", amt + -456);

    21:  }

    22:  </script>


Per funzionare c'è bisogno di hostare il progetto su un provider avente la versione .NET 3.5 installata; segnaliamo, ad esempio, http://www.beyondTheBrowser.NET































Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Luca
Ti è piaciuto l'articolo?