Silverlight - 动画

动画允许您创建真正动态的用户界面.它通常用于应用效果，例如，当您移动它们时生长的图标，旋转的徽标，滚动到视图的文本等等.

有时，这些效果似乎喜欢过度的浮华.如果使用得当，动画可以通过多种方式增强应用程序.它们可以使应用程序看起来更具响应性，自然性和直观性.

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

Silverlight的动画方法是声明性的，而不是关注帧动画序列.

定义动画

动画通常在资源部分中定义.事实上，它们通常包含在故事板元素中，我们将在稍后详细介绍.

它提供了一个Begin()方法，因此可以从代码中调用动画.
动画也可以放在控件模板中的可视状态元素内.

声明性动画

Silverlight中的动画是声明性的.他们描述了想要发生的事情.将它留给Silverlight来研究如何实现这一目标.所以动画通常遵循我们告诉Silverlight我们想要改变的模式.

这总是某些命名元素的某些属性，即 TargetName 和 TargetProperty .

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

我们说在这种情况下我们希望改变财产的方式我们正在改变不透明度从零值到值1.换句话说，我们喜欢将目标元素从不透明变为透明.
最后，我们说我们希望这需要多长时间，在这种情况下它需要五秒钟.
这个双动画中double的重要性在于它定位的是一个double类型的属性，所以浮点值.
如果要为表示颜色的属性设置动画，请使用颜色动画.

让我们看一下双动画的简单例子.下面给出了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();       }    }}

编译并执行上述代码时，您将看到以下输出./p> 声明性动画

重复和反转

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

如果将repeat behavior属性设置为a时间垃圾邮件动画将循环重复，直到指定的时间已过，或者你可以告诉它你希望它重复多少次.
这支持小数点，所以你可以重复四次半.
你可以永远重复，你也可以告诉动画一旦到达终点，它应该反向运行回到开始.

关键帧动画

通常很简单从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();       }    }}

编译并执行上述代码时，您将看到以下输出.

关键帧动画