Silverlight - animacja

Animacja umożliwia tworzenie prawdziwie dynamicznych interfejsów użytkownika. Jest często używany do nakładania efektów, na przykład ikon, które rosną po najechaniu na nie, obracających się logo, przewijanego tekstu i tak dalej.

Czasami efekty te wydają się nadmiernym blichtrem. Jeśli są właściwie używane, animacje mogą ulepszyć aplikację na wiele sposobów. Dzięki nim aplikacja wydaje się bardziej responsywna, naturalna i intuicyjna.

Na przykład przycisk, który wsuwa się po kliknięciu, wygląda jak prawdziwy, fizyczny przycisk, a nie kolejny szary prostokąt. Animacje mogą również zwracać uwagę na ważne elementy i prowadzić użytkownika przez przejście do nowej treści.

Podejście Silverlight do animacji jest raczej deklaratywne niż skupia się na sekwencjach animacji klatek.

Definiowanie animacji

Animacje są zwykle definiowane w sekcjach zasobów. W rzeczywistości są one zwykle opakowane w element storyboardu, który wkrótce zobaczymy szczegółowo.

Udostępnia metodę Begin (), dzięki czemu animację można wywołać z kodu.
Animacje można również umieszczać wewnątrz elementów stanu wizualnego w szablonie kontrolnym.

Deklaratywna animacja

Animacje w Silverlight są deklaratywne. Opisują, co by się stało. Zostaw to Silverlight, aby dowiedzieć się, jak to zrobić. Dlatego animacje zazwyczaj są zgodne ze wzorem, w którym mówimy Silverlight, co chcielibyśmy zmienić.

Jest to zawsze jakaś własność niektórych nazwanych elementów, np TargetName i TargetProperty.

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

Mówimy, jak chcielibyśmy zmienić tę właściwość, w tym przypadku zmieniamy krycie z wartości zero na wartość jeden. Innymi słowy, lubimy, gdy docelowe elementy blakną z nieprzezroczystego do przezroczystego.
Na koniec mówimy, jak długo chcielibyśmy to potrwać, w tym przypadku zajmie to pięć sekund.
znaczenie double w tej podwójnej animacji polega na tym, że celuje w właściwość, która ma typ double, czyli wartość zmiennoprzecinkową.
Jeśli chcesz animować właściwość reprezentującą kolor, użyj zamiast tego animacji koloru.

Spójrzmy na prosty przykład podwójnej animacji. Poniżej podano kod XAML, w którym dodano dwa przyciski, jeden prostokąt i dwie plansze scenariuszy.

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

Oto implementacja dla różnych zdarzeń w 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(); 
      } 
   } 
}

Gdy powyższy kod zostanie skompilowany i wykonany, zobaczysz następujące dane wyjściowe.

Powtarzanie i cofanie

Animacje oferują pewne właściwości do automatycznego powtarzania i wszystkie animacje odwrotne.

Jeśli ustawisz właściwość zachowania powtarzania na spam czasowy, animacja będzie się powtarzać, dopóki nie upłynie określony czas, lub możesz po prostu powiedzieć, ile razy chcesz, aby się powtarzała.
Obsługuje kropki dziesiętne, dzięki czemu można powtórzyć cztery i pół razy.
Możesz powtarzać w nieskończoność, a także możesz powiedzieć animacji, że gdy dojdzie do końca, powinna działać w odwrotnej kolejności z powrotem do początku.

Animacja klatek kluczowych

Często prosta animacja od A do B jest zbyt prosta. Na przykład chcesz animować piłkę odbijającą się od ziemi. Nie jest to prosty ruch wskazujący na punkt. Piłka spada, stopniowo przyspieszając, a następnie zmienia kierunek, gdy uderza w dno. Znowu zwalnia, gdy wraca do szczytu swojej podróży.

Spójrzmy na prosty przykład Key Frame animation.

Poniżej podano kod XAML, który zawiera elipsę i podwójną animację z kluczowymi klatkami.

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

Oto implementacja dla mouse left button down zdarzenie, które rozpocznie animację, gdy użytkownik naciśnie lewy przycisk myszy na stronie internetowej.

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(); 
      } 
   } 
}

Gdy powyższy kod zostanie skompilowany i wykonany, zobaczysz następujące dane wyjściowe.

Po kliknięciu strony internetowej zobaczysz, że piłka zaczyna się poruszać.