Silverlight动画概述

Silverlight动画概述在Silverlight中，动画可以通过添加移动和交互性来增强图形的创建效果。通过对背景色进行动画处理或应用动画Transform，您可以创造出生动的屏幕过渡效果或提供有帮助的视觉提示。本主题包括下列各节。动画简介使UIElement逐渐进入视野并从视野中逐渐消失开始、停止、暂停和继续动画播放控制动画的开始时间在程序代码中创建动画动画类型对属性应用动画对变换进行动画处理动画结束后会发生什么情况缓动函数相关主题动画简介动画是快速播放一系列图像（其中每个图像与下一个图像略微不同）给人造成的一种幻觉。大脑感觉这组图像是一个变化的场景。在电影中，摄像机每秒钟拍摄许多照片（帧），便可使人形成这种幻觉。用投影仪播放这些帧时，观众便可以看电影了。在Silverlight中，通过对对象的个别属性应用动画，可以对对象进行动画处理。例如，若要使UIElement增大，需对其Width和Height属性进行动画处理。若要使UIElement逐渐从视野中消失，可以对其Opacity属性进行动画处理。可以对Silverlight中许多对象的属性进行动画处理。说明：在Silverlight中，您只能对值类型为Double、Color或Point的属性执行简单的动画处理。此外，还可以使用ObjectAnimationUsingKeyFrames对其他类型的属性进行动画处理，但是这需要使用离散内插（从一个值跳到另一个值），而多数人认为这不是真正的动画。下一节演示如何创建一个简单的动画，使Rectangle（一种UIElement）逐渐进入视野并从视野中逐渐消失。使UIElement逐渐进入视野并从视野中逐渐消失此示例演示如何使用Silverlight动画通过对属性值进行动画处理，使Rectangle逐渐进入视野并从视野中逐渐消失。本示例使用DoubleAnimation（一种生成Double值的动画类型）对Rectangle的Opacity属性进行动画处理。因此，Rectangle将逐渐进入视野并逐渐从视野中消失。若要查看您将演练的动画的预览，请单击下面的链接来运行示例，然后单击矩形开始运行动画。运行此示例示例的第一部分创建一个Rectangle元素，并将其显示在StackPanel中。XAML复制StackPanelRectangleMouseLeftButtonDown=Mouse_Clickedx:Name=MyAnimatedRectangleWidth=100Height=100Fill=Blue//StackPanel若要创建动画并将其应用于矩形的Opacity属性，请执行以下操作：创建DoubleAnimation创建Storyboard开始Storyboard以响应事件以下各节将详细讨论这些步骤。有关完整的示例，请参见完整示例一节。创建DoubleAnimation由于Opacity属性的类型是Double，因此需要一个生成Double值的动画。DoubleAnimation就是这样一种动画；它可以创建两个Double值之间的过渡。若要指定DoubleAnimation的起始值，可设置其From属性。若要指定其终止值，可设置其To属性。1.不透明度值1.0使对象完全不透明，不透明度值0.0使对象完全不可见。若要使动画的不透明度值从1.0过渡为0.0，可以将其From属性设置为1.0，将其To属性设置为0.0。XAML复制DoubleAnimationFrom=1.0To=0.0/2.为该动画指定Duration。动画的Duration属性指定了从其起始值过渡为目标值所需的时间。下面的示例将动画的持续时间设置为一秒钟。XAML复制DoubleAnimationFrom=1.0To=0.0Duration=0:0:1/3.上面的示例创建了不透明度值从1.0向0.0过渡的动画，此过渡使目标元素从完全不透明逐渐转变为完全不可见。若要使元素在消失后再逐渐回到视野中，请将AutoReverse属性设置为true。若要使动画无限期地重复，请将其RepeatBehavior属性设置为Forever。XAML复制DoubleAnimationFrom=1.0To=0.0Duration=0:0:1AutoReverse=TrueRepeatBehavior=Forever/创建演示图板若要向对象应用动画，请创建Storyboard对象并使用TargetName和TargetProperty附加属性指定要进行动画处理的对象和属性。1.创建Storyboard并将动画添加为其子项。XAML复制StoryboardDoubleAnimationFrom=1.0To=0.0Duration=0:0:1AutoReverse=TrueRepeatBehavior=Forever//Storyboard本示例中的Storyboard仅包含一个动画，不过您可以添加多个动画。2.使用TargetName附加属性指定要进行动画处理的对象。在下面的代码中，为DoubleAnimation指定了一个目标名称myAnimatedRectangle，这是要进行动画处理的对象的名称。XAML复制StoryboardDoubleAnimationStoryboard.TargetName=MyAnimatedRectangleFrom=1.0To=0.0Duration=0:0:1AutoReverse=TrueRepeatBehavior=Forever//Storyboard3.使用TargetProperty附加属性��定要进行动画处理的属性。在下面的代码中，动画被配置为面向Rectangle的Opacity属性。XAML复制StoryboardDoubleAnimationStoryboard.TargetName=MyAnimatedRectangleStoryboard.TargetProperty=OpacityFrom=1.0To=0.0Duration=0:0:1AutoReverse=TrueRepeatBehavior=Forever//Storyboard将演示图板与事件相关联此时您已经指定了动画的目标对象以及动画的行为方式；接下来您需要指定何时开始播放动画。可以使用事件执行此操作。1.将演示图板作为一种资源。将Storyboard放入一个资源块内，以便您能够轻松地自代码引用该Storyboard，以执行开始、停止、暂停和继续等操作。下面的标记显示StackPanel对象资源块中声明的Storyboard。请注意，您可以在任意资源块中声明Storyboard，只要该资源块与您希望进行动画处理的对象位于同一个作用域中。XAML复制StackPanelStackPanel.Resources!--Animatestherectangle'sopacity.--Storyboardx:Name=myStoryboardDoubleAnimationStoryboard.TargetName=MyAnimatedRectangleStoryboard.TargetProperty=OpacityFrom=1.0To=0.0Duration=0:0:1AutoReverse=TrueRepeatBehavior=Forever//Storyboard/StackPanel.ResourcesRectanglex:Name=MyAnimatedRectangleWidth=100Height=100Fill=Blue//StackPanel2.将事件附加到某一元素。您可以使用多种事件来启动动画，包括鼠标相关事件，如在用户单击某一对象时引发的MouseLeftButtonDown，或是在首次加载对象时引发的Loaded事件。有关事件的更多信息，请参见Silverlight的事件概述。在本示例中，MouseLeftButtonDown事件附加到Rectangle，这样用户单击矩形时将引发该事件。XAML复制RectangleMouseLeftButtonDown=Mouse_Clickedx:Name=MyAnimatedRectangleWidth=100Height=100Fill=Blue/3.从事件处理程序控制动画。Storyboard提供多种方法，这些方法允许您控制Storyboard动画的播放，包括Begin、Stop、Pause和Resume。本示例使用Begin方法，该方法在用户单击矩形并引发MouseLeftButtonDown事件时启动动画。//WhentheuserclickstheRectangle,theanimation//begins.privatevoidMouse_Clicked(objectsender,MouseEventArgse){myStoryboard.Begin();}完整的示例下面的示例演示了完整的XAML标记，这些标记用于创建在加载时逐渐进入视野并从视野中逐渐消失的矩形。XAML复制UserControlx:Class=animation_ovw_intro.Pagexmlns=:x==400Height=300StackPanelStackPanel.Resources!--Animatestherectangle'sopacity.--Storyboardx:Name=myStoryboardDoubleAnimationStoryboard.TargetName=MyAnimatedRectangleStoryboard.TargetProperty=OpacityFrom=1.0To=0.0Duration=0:0:1AutoReverse=TrueRepeatBehavior=Forever//Storyboard/StackPanel.ResourcesTextBlockMargin=10Clickontherectangletostarttheanimation./TextBlockRectangleMouseLeftButtonDown=Mouse_Clickedx:Name=MyAnimatedRectangleWidth=100Height=100Fill=Blue//StackPanel/UserControl//WhentheuserclickstheRectangle,theanimation//begins.privatevoidMouse_Clicked(objectsender,MouseEventArgse){myStoryboard.Begin();}开始、停止、暂停和继续动画播放上面的示例演示如何使用Begin方法启动动画；不过，Storyboard还提供Stop、Pause和Resume方法，这些方法可用于控制动画。下面的示例提供一系列按钮，这些按钮允许用户控制Ellipse在整个屏幕中的动画播放。XAML复制UserControlx:Class=interactive_animation.Pagexmlns=:x==400Height=300StackPanelTextBlockMargin=10TextWrapping