Silverlight - Animazione

L'animazione ti consente di creare interfacce utente veramente dinamiche. Viene spesso utilizzato per applicare effetti, ad esempio icone che crescono quando ci si sposta sopra, loghi che ruotano, testo che scorre in vista e così via.

A volte, questi effetti sembrano eccessivi sfarzi. Se usate correttamente, le animazioni possono migliorare un'applicazione in molti modi. Possono far sembrare un'applicazione più reattiva, naturale e intuitiva.

Ad esempio, un pulsante che scorre quando fai clic su di esso sembra un pulsante fisico reale, non solo un altro rettangolo grigio. Le animazioni possono anche attirare l'attenzione su elementi importanti e guidare l'utente attraverso le transizioni a nuovi contenuti.

L'approccio di Silverlight all'animazione è dichiarativo piuttosto che concentrarsi su sequenze di animazioni di frame.

Definizione di animazioni

Le animazioni sono generalmente definite nelle sezioni delle risorse. In effetti, di solito sono avvolti in un elemento dello storyboard, che vedremo in dettaglio a breve.

  • Fornisce un metodo Begin (), quindi l'animazione può essere richiamata dal codice.

  • Le animazioni possono anche essere inserite all'interno degli elementi dello stato di visualizzazione in un modello di controllo.

Animazione dichiarativa

Le animazioni in Silverlight sono dichiarative. Descrivono cosa vorrebbe che accadesse. Lascia che sia Silverlight a capire come farlo accadere. Quindi le animazioni in genere seguono lo schema che diciamo a Silverlight cosa vorremmo cambiare.

Questa è sempre una proprietà su alcuni elementi con nome es TargetName e TargetProperty.

<DoubleAnimation 
   Storyboard.TargetName = "myRectangle" 
   Storyboard.TargetProperty = "Opacity" 
   From = "0" To = "1" 
   Duration = "0:0:5"  
/>

  • Diciamo come vorremmo che quella proprietà cambiasse in questo caso stiamo cambiando l'opacità da un valore di zero a un valore di uno. In altre parole, ci piace che gli elementi target passino da opachi a trasparenti.

  • Infine, diciamo quanto tempo vorremmo che richiedesse, in questo caso ci vorranno cinque secondi.

  • il significato del double in questa doppia animazione è che prende di mira una proprietà di tipo double, quindi un valore in virgola mobile.

  • Se desideri animare una proprietà che rappresenta un colore, utilizza invece un'animazione di colore.

Vediamo un semplice esempio di doppia animazione. Di seguito è riportato il codice XAML in cui vengono aggiunti due pulsanti, un rettangolo e due storyboard.

<UserControl x:Class = "DoubleAnimationExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "fadeDown"> 
         <DoubleAnimation  
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "1" To = "0" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
      <Storyboard x:Name = "fadeUp"> 
         <DoubleAnimation 
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "0" To = "1" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle x:Name = "myRectangle" 
         Fill = "Blue" Width = "300" Height = "100"  
         HorizontalAlignment = "Center" 
         VerticalAlignment = "Top" Margin = "0,30" /> 
			
      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"  
         Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,140,0,0"  
         Click = "fadeUpButton_Click" /> 
			
      <Button x:Name = "fadeDownButton" Content = "Down"  
         Width = "80" Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,180,0,0"  
         Click = "fadeDownButton_Click" />
			
   </Grid>
	
</UserControl>

Ecco l'implementazione per diversi eventi in C #.

using System.Windows; 
using System.Windows.Controls;  

namespace DoubleAnimationExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void fadeUpButton_Click(object sender, RoutedEventArgs e) { 
         fadeUp.Begin(); 
      }
	  
      private void fadeDownButton_Click(object sender, RoutedEventArgs e) { 
         fadeDown.Begin(); 
      } 
   } 
}

Quando il codice sopra viene compilato ed eseguito, vedrai il seguente output.

Ripetizione e inversione

Le animazioni offrono alcune proprietà da ripetere automaticamente e tutte le animazioni inverse.

  • Se imposti la proprietà del comportamento di ripetizione su uno spam temporale, l'animazione verrà ripetuta fino allo scadere del periodo di tempo specificato oppure puoi semplicemente dirgli quante volte desideri che si ripeta.

  • Questo supporta i punti decimali in modo da poter ripetere quattro volte e mezza.

  • Puoi ripetere all'infinito e puoi anche dire all'animazione che una volta raggiunta la fine, dovrebbe tornare indietro all'inizio.

Animazione fotogrammi chiave

Spesso una semplice animazione da A a B è un po 'troppo semplice. Ad esempio, vuoi animare una palla che rimbalza da terra. Questo non è un semplice movimento da punto a punto. La palla cade, accelera gradualmente e poi inverte la sua direzione quando colpisce il fondo. Rallentando di nuovo mentre torna a inizio corsa.

Diamo uno sguardo a un semplice esempio di Key Frame animation.

Di seguito è riportato il codice XAML, che contiene un'ellisse e una doppia animazione con fotogrammi chiave.

<UserControl x:Class = "LinearKeyFrames.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" 
   Width = "400" Height = "300">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2"> 
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96" 
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Left)" />
				
         <DoubleAnimationUsingKeyFrames  
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Top)"> 

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" /> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/> 
				
         </DoubleAnimationUsingKeyFrames> 
			
      </Storyboard>
		
   </UserControl.Resources>
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas> 
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" /> 
      </Canvas> 
   </Grid> 
	
</UserControl>

Ecco l'implementazione per mouse left evento pulsante giù, che inizierà l'animazione quando l'utente preme il pulsante sinistro del mouse sulla pagina web.

using System.Windows.Controls; 
using System.Windows.Input; 
 
namespace LinearKeyFrames { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent();  
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown); 
      } 
	  
      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { 
         ballAnim.Begin(); 
      } 
   } 
}

Quando il codice sopra viene compilato ed eseguito, vedrai il seguente output.

Quando fai clic sulla pagina web, vedrai che la palla inizia a muoversi.