Silverlight学习之动画.docx

在Silverlight中，动画可以通过添加移动和交互性来增加图形的创建效果。通过对背景色进行动画处理或应用动画Transform,我们可以创造出生动的屏幕过渡效果或提供有帮助的视觉提示。l 动画简介：动画是快速播放一系列图像(其中每个图像与下一个图像略微不同)给人造成的一种幻觉。大脑感觉这组图像是一个变化的场景。在电影中，摄像机每秒钟拍摄许多照片(帧) ），便可使人形成这种幻觉。用投影仪播放这些帧时，观众便可以看电影了。在 Silverlight 中，通过对对象的个别属性应用动画，可以对对象进行动画处理。例如，若要使 UIElement 增大，需对其 Width 和 Height 属性进行动画处理。若要使 UIElement 逐渐从视野中消失，可以对其 Opacity 属性进行动画处理。可以对 Silverlight 中许多对象的属性进行动画处理。注意：在Silverlight中,我们只能对值类型为Double、Color或Point的属性执行简单的动画处理。此外，还可以使用 ObjectAnimationUsingKeyFrames 对其他类型的属性进行动画处理，但是这需要使用离散内插（从一个值跳到另一个值），而多数人认为这不是真正的动画。l 使UIElement逐渐进入视野并从视野中逐渐消失：来演示一个示例。这个例子演示如何使用 Silverlight 动画通过对属性值进行动画处理，使 Rectangle 逐渐进入视野并从视野中逐渐消失。本示例使用 DoubleAnimation（一种生成 Double 值的动画类型）对 Rectangle 的 Opacity 属性进行动画处理。因此，Rectangle 将逐渐进入视野并逐渐从视野中消失。示例第一部分在StackPanel中创建一个Rectangle元素。 如果要创建动画并将其应用于矩形的Opacity属性，请执行以下操作： 创建 DoubleAnimation 创建 Storyboard 开始 Storyboard 以响应事件1.创建DoubleAnimation由于 Opacity 属性的类型是 Double，因此需要一个生成 Double 值的动画。DoubleAnimation 就是这样一种动画；它可以创建两个 Double 值之间的过渡。若要指定 DoubleAnimation 的起始值，可设置其 From 属性。若要指定其终止值，可设置其 To 属性。1. 不透明度值 1.0 使对象完全不透明，不透明度值 0.0 使对象完全不可见。若要使动画的不透明度值从 1.0 过渡为 0.0，可以将其 From 属性设置为 1.0，将其 To 属性设置为 0.0。2. 为该动画指定 Duration。动画的 Duration 属性指定了从其起始值过渡为目标值所需的时间。下面的示例将动画的持续时间设置为一秒钟。3. 上面的示例创建了不透明度值从 1.0 向 0.0 过渡的动画，此过渡使目标元素从完全不透明逐渐转变为完全不可见。若要使元素在消失后再逐渐回到视野中，请将 AutoReverse 属性设置为 true。若要使动画无限期地重复，请将其 RepeatBehavior 属性设置为 Forever。2.创建Storyboard若要向对象应用动画，请创建 Storyboard 对象并使用 TargetName 和 TargetProperty 附加属性指定要进行动画处理的对象和属性。1. 创建 Storyboard 并将动画添加为其子项。 这里 Storyboard 仅包含一个动画，不过可以添加多个动画。2. 使用 TargetName 附加属性指定要进行动画处理的对象。在下面的代码中，为 DoubleAnimation 指定了一个目标名称 myAnimatedRectangle，这是要进行动画处理的对象的名称。 3. 使用 TargetProperty 附加属性指定要进行动画处理的属性。在下面的代码中，动画被配置为面向 Rectangle 的 Opacity 属性。 3.将Storyboard与事件相关联：我们在上面已经指定了动画的目标对象以及动画的行为方式；接下来我们需要指定何时开始播放动画。可以使用事件执行此操作。1. 将演示图板(Storyboard)作为一种资源。将 Storyboard 放入一个资源块内，以便能够轻松地自代码引用该 Storyboard，以执行开始、停止、暂停和继续等操作。下面的标记显示 StackPanel 对象资源块中声明的 Storyboard。请注意，你可以在任意资源块中声明 Storyboard，只要该资源块与你希望进行动画处理的对象位于同一个作用域中。 2. 将事件附加到某一元素。我们可以使用多种事件来启动动画，包括鼠标相关事件，如在用户单击某一对象时引发的 MouseLeftButtonDown，或是在首次加载对象时引发的 Loaded 事件。在这里我们使用MouseLeftButtonDown 事件附加到 Rectangle，这样用户单击矩形时将引发该事件。3.从事件处理程序控制动画。Storyboard 提供多种方法，这些方法允许我们控制 Storyboard 动画的播放，包括 Begin、Stop、Pause 和 Resume。本示例使用 Begin 方法，该方法在用户单击矩形并引发 MouseLeftButtonDown 事件时启动动画。private void Mouse_Clicked(object sender, MouseEventArgs e) myStoryboard.Begin();开始、停止、暂停和继续动画播放:上面的示例演示如何使用 Begin 方法启动动画；不过，Storyboard 还提供 Stop、Pause 和 Resume 方法，这些方法可用于控制动画。下面的示例提供一系列按钮，这些按钮允许用户控制 Ellipse 在整个屏幕中的动画播放。 This sample uses the Begin, Pause, Resume, and Stop methods to control an animation. C#代码： private void Animation_Begin(object sender, RoutedEventArgs e) myStoryboard.Begin(); private void Animation_Pause(object sender, RoutedEventArgs e) myStoryboard.Pause(); private void Animation_Resume(object sender, RoutedEventArgs e) myStoryboard.Resume(); private void Animation_Stop(object sender, RoutedEventArgs e) myStoryboard.Stop(); 控制动画的开始时间:Storyboard 以及所有其他动画对象（DoubleAnimation、DoubleAnimationUsingKeyFrames、ColorAnimation 等）从 Timeline 类继承。Timeline 类授予很多有用的属性给这些动画对象，其中包括 BeginTime 属性。顾名思义，使用 BeginTime 属性可以指定动画对象活动开始点的时间。例如，可以对 Storyboard 的 BeginTime 指定两秒时间。当使用 Begin 方法开始 Storyboard 时，Storyboard 将等待两秒钟，然后再开始。此外，可以指定 Storyboard 内的动画对象的 BeginTime。例如，如果我们有一个 BeginTime 为两秒钟的 Storyboard，此 Storyboard 包含两个 DoubleAnimation 对象（一个未指定 BeginTime，另一个的 BeginTime 为三秒钟），则第一个 DoubleAnimation 将在对 Storyboard 调用 Begin 方法之后的两秒钟启动，第二个 DoubleAnimation 将在调用该方法之后的五秒钟启动（Storyboard 的两秒钟延迟加上 DoubleAnimation 的三秒钟延迟）。下面的示例显示如何执行此项操作。 C#: private void Start_Animation(object sender, EventArgs e) myStoryboard.Begin(); 可以考虑将 Storyboard 作为其他动画对象（例如 DoubleAnimation）以及其他 Storyboard 对象的容器。即可以在 Storyboard 对象中嵌套该对象并分别为每个 Storyboard 指定 BeginTime 值。使用嵌套的演示图板可帮助我们安排精心设计的动画序列。每个子 Storyboard 都会在其父 Storyboard 开始前等待，然后在再次开始前开始倒计时。在程序代码中创建动画除了使用 XAML，也可以完全在程序代码（如 C# 或 Visual Basic）中创建动画。下面的示例演示如何创建一个动画，在其中用动画播放 Rectangle 的 Canvas.:.Top 和 Canvas.:.Left 附加属性。 private void Create_And_Run_Animation(object sender, EventArgs e) Rectangle myRectangle = new Rectangle(); myRectangle.Width = 200; myRectangle.Height = 200; Color myColor = Color.FromArgb(255, 255, 0, 0); SolidColorBrush myBrush = new SolidColorBrush(); myBrush.Color = myColor; myRectangle.Fill = myBrush; LayoutRoot.Children.Add(myRectangle); Duration duration = new Duration(TimeSpan.FromSeconds(2); DoubleAnimation myDoubleAnimation1 = new DoubleAnimation(); DoubleAnimation myDoubleAnimation2 = new DoubleAnimation(); myDoubleAnimation1.Duration = duration; myDoubleAnimation2.Duration = duration; Storyboard sb = new Storyboard(); sb.Duration = duration; sb.Children.Add(myDoubleAnimation1); sb.Children.Add(myDoubleAnimation2); Storyboard.SetTarget(myDoubleAnimation1, myRectangle); Storyboard.SetTarget(myDoubleAnimation2, myRectangle); Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath(Canvas.Left); Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath(Canvas.Top); myDoubleAnimation1.To = 200; myDoubleAnimation2.To = 200; LayoutRoot.Resources.Add(unique_id, sb); sb.Begin(); 注意：不要在页面的构造函数中调用 Storyboard 方法，如 Begin。这将导致动画失败，且无任何提示。来说一说动画类型：除了我们上面使用的DoubleAnimation类型，Silverlight 还提供其他几种动画对象。由于动画生成属性值，因此对于不同的属性类型，会有不同的动画类型。若要对采用 Double 值的属性（例如元素的 Width 属性）进行动画处理，请使用生成 Double 值（DoubleAnimation）的动画。若要对采用 Point 值的属性进行动画处理，请使用生成 Point 值（如 PointAnimation 等）的动画。Silverlight提供两大类动画类型，From/To/By 动画和关键帧动画。类别说明命名约定From/To/By 动画在起始值和结束值之间进行动画处理：u 若要指定起始值，请设置动画的 From 属性。u 若要指定结束值，请设置动画的 To 属性。u 若要指定相对于起始值的结束值，请设置动画的 By 属性（而不是 To 属性）。上面的例子中使用这些动画，因为这些动画最容易实现。typeAnimation关键帧动画在使用关键帧对象指定的一系列值之间播放动画。关键帧动画的功能比 From/To/By 动画的功能更强大，因为我们可以指定任意多个目标值，甚至可以控制它们的插值方法。typeAnimationUsingKeyFrames列出一些常用动画类型以及这些类型一直使用的一些属性。属性类型对应的基本 (From/To/By) 动画对应的关键帧动画用法示例ColorColorAnimationColorAnimationUsingKeyFrames对 SolidColorBrush 或 GradientStop 的 Color 进行动画处理。DoubleDoubleAnimationDoubleAnimationUsingKeyFrames对 Rectangle 的 Width 或 Ellipse 的 Height（或任意 FrameworkElement）进行动画处理。PointPointAnimationPointAnimationUsingKeyFrames对 EllipseGeometry 的 Center 位置进行动画处理。Object无ObjectAnimationUsingKeyFrames对 Fill 属性进行动画处理，使其在不同的 GradientBrush 之间进行转换。动画是时间线：所有动画均继承自Timeline对象，因此所有动画都是专用类型的时间线。Timeline 定义时间段。我们可以指定时间线的以下计时行为：其 Duration 和重复次数，甚至可以为时间线指定时间走得多快。因为动画是 Timeline，所以它还表示一个时间段。在动画的指定时间段（即 Duration）内运行动画时，动画会计算输出值。在运行或播放动画时，动画将更新与其关联的属性。Duration、AutoReverse 和 RepeatBehavior 是三个常用的计时属性。Duration 属性时间线（以及继承自时间线的动画）表示一个时间段。该时间段的长度由时间线的 Duration 属性（通常用 TimeSpan 值指定）来决定。当时间线达到其持续时间的终点时，表示时间线完成了一次重复。动画使用其 Duration 属性来确定其当前值。如果没有为动画指定 Duration 值，它将使用默认值（1 秒）。下面的语法显示了 Duration 属性 (Property) 的 XAML 属性 (Attribute) 语法的简化版本。小时 : 分钟 : 秒下表显示了一些 Duration 设置及其结果值。设置所得值0:0:5.55.5 秒。0:30:5.530 分 5.5 秒。1:30:5.51 小时 30 分 5.5 秒。AutoReverse 属性AutoReverse 属性指定时间线在到达其 Duration 的终点后是否倒退。如果将此动画属性设置为 true，则动画在到达其 Duration 的终点后将倒退，即从其终止值向其起始值反向播放。默认情况下，该属性为 false。RepeatBehavior 属性RepeatBehavior 属性指定时间线的播放次数。默认情况下，时间线