Silverlight - Animation

L'animation vous permet de créer des interfaces utilisateur vraiment dynamiques. Il est souvent utilisé pour appliquer des effets, par exemple, des icônes qui grandissent lorsque vous les survolez, des logos qui tournent, du texte qui défile dans la vue, etc.

Parfois, ces effets semblent être des paillettes excessives. Si elles sont utilisées correctement, les animations peuvent améliorer une application de plusieurs manières. Ils peuvent rendre une application plus réactive, naturelle et intuitive.

Par exemple, un bouton qui se glisse lorsque vous cliquez, il ressemble à un vrai bouton physique, pas simplement à un autre rectangle gris. Les animations peuvent également attirer l'attention sur des éléments importants et guider l'utilisateur à travers les transitions vers un nouveau contenu.

L'approche de Silverlight en matière d'animation est déclarative plutôt que de se concentrer sur des séquences d'animations d'images.

Définition des animations

Les animations sont généralement définies dans les sections de ressources. En fait, ils sont généralement enveloppés dans un élément de story-board, que nous verrons en détail sous peu.

  • Il fournit une méthode Begin (), de sorte que l'animation peut être appelée à partir du code.

  • Les animations peuvent également être placées à l'intérieur des éléments d'état visuel dans un modèle de contrôle.

Animation déclarative

Les animations dans Silverlight sont déclaratives. Ils décrivent ce qui aurait aimé se produire. Laissez à Silverlight le soin de déterminer comment y parvenir. Ainsi, les animations suivent généralement le modèle que nous indiquons à Silverlight ce que nous aimerions changer.

C'est toujours une propriété sur certains éléments nommés ie TargetName et TargetProperty.

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

  • Nous disons comment nous aimerions que cette propriété change dans ce cas, nous changeons l'opacité d'une valeur de zéro à une valeur de un. En d'autres termes, nous aimons que les éléments cibles passent d'opaque à transparent.

  • Enfin, nous disons combien de temps nous aimerions que cela prenne, dans ce cas, cela prendra cinq secondes.

  • la signification du double dans cette double animation est qu'il cible une propriété de type double, donc une valeur à virgule flottante.

  • Si vous souhaitez animer une propriété représentant une couleur, utilisez plutôt une animation de couleur.

Jetons un œil à un exemple simple de double animation. Vous trouverez ci-dessous le code XAML dans lequel deux boutons, un rectangle et deux story-boards sont ajoutés.

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

Voici l'implémentation pour différents événements en 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(); 
      } 
   } 
}

Lorsque le code ci-dessus est compilé et exécuté, vous verrez la sortie suivante.

Répéter et inverser

Les animations offrent certaines propriétés à répéter automatiquement et toutes les animations inversées.

  • Si vous définissez la propriété de comportement de répétition sur un temps de spam, l'animation se répétera jusqu'à ce que le temps spécifié se soit écoulé ou vous pouvez simplement lui dire combien de fois vous souhaitez qu'elle se répète.

  • Cela prend en charge les points décimaux afin que vous puissiez répéter quatre fois et demie.

  • Vous pouvez répéter indéfiniment et vous pouvez également dire à l'animation qu'une fois qu'elle atteint la fin, elle doit s'exécuter en sens inverse jusqu'au début.

Animation d'images clés

Souvent, une simple animation de A à B est un peu trop simple. Par exemple, vous souhaitez animer une balle rebondissant sur le sol. Ce n'est pas un simple mouvement de point à point. La balle tombe, accélère progressivement puis inverse sa direction lorsqu'elle touche le fond. Ralentissez à nouveau en revenant au sommet de sa course.

Jetons un coup d'œil à un exemple simple de Key Frame animation.

Vous trouverez ci-dessous le code XAML, qui contient une ellipse et une double animation avec des images clés.

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

Voici la mise en œuvre pour mouse left événement button down, qui commencera l'animation lorsque l'utilisateur appuiera sur le bouton gauche de la souris sur la page 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(); 
      } 
   } 
}

Lorsque le code ci-dessus est compilé et exécuté, vous verrez la sortie suivante.

Lorsque vous cliquez sur la page Web, vous verrez que la balle commence à bouger.