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