Silverlight - 动画

动画允许您创建真正动态的用户界面。它通常用于应用效果，例如，当您在图标上移动时会变大的图标、旋转的徽标、滚动到视图中的文本等等。

有时，这些效果看起来过于浮华。如果使用得当，动画可以通过多种方式增强应用程序。它们可以使应用程序看起来响应更快、更自然、更直观。

例如，单击时滑入的按钮感觉就像一个真实的物理按钮，而不仅仅是另一个灰色矩形。动画还可以引起人们对重要元素的注意，并引导用户过渡到新内容。

Silverlight 的动画方法是声明性的，而不是专注于帧动画序列。

定义动画

动画通常在资源部分中定义。事实上，它们通常包含在故事板元素中，我们很快就会详细看到。

  • 它提供了一个 Begin() 方法，因此可以从代码中调用动画。

  • 动画也可以放置在控件模板中的视觉状态元素内。

声明式动画

Silverlight 中的动画是声明性的。他们描述了希望发生的事情。让 Silverlight 来决定如何实现这一点。因此动画通常遵循我们告诉 Silverlight 我们想要更改的内容的模式。

这始终是某些命名元素的某些属性，即TargetName和TargetProperty。

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

  • 我们说我们希望该属性如何改变，在这种情况下，我们将不透明度从零值更改为一值。换句话说，我们希望目标元素从不透明渐变为透明。

  • 最后，我们说我们希望这需要多长时间，在本例中需要五秒钟。

  • 此双精度动画中双精度的重要性在于，它的目标是双精度类型的属性，即浮点值。

  • 如果您想要为代表颜色的属性设置动画，则可以使用颜色动画。

让我们看一个双重动画的简单示例。下面给出的是 XAML 代码，其中添加了两个按钮、一个矩形和两个故事板。

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

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

当上面的代码被编译并执行时，您将看到以下输出。

声明式动画

重复和反转

动画提供了一些自动重复和所有反向动画的属性。

  • 如果将重复Behave属性设置为时间垃圾，动画将循环重复，直到指定的时间过去，或者您可以告诉它您希望它重复多少次。

  • 它支持小数点，因此您可以重复四次半。

  • 您可以永远重复，也可以告诉动画，一旦到达结尾，它应该反向运行回到开头。

关键帧动画

通常，从 A 到 B 的简单动画有点过于简单。例如，您想要制作从地面弹起的球的动画。这不是简单的点对点运动。球下降，逐渐加速，然后在到达底部时反转方向。当它回到行程的最高点时，再次减速。

让我们看一个关键帧动画的简单例子。

下面给出的是 XAML 代码，其中包含带有关键帧的椭圆和双动画。

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

这是鼠标左键按下事件的实现，当用户在网页上按下鼠标左键时，该事件将开始动画。

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

当上面的代码被编译并执行时，您将看到以下输出。

关键帧动画

当您单击网页时，您将看到球开始移动。

关键帧动画移动