Silverlight动画概述Word文档格式.docx
《Silverlight动画概述Word文档格式.docx》由会员分享，可在线阅读，更多相关《Silverlight动画概述Word文档格式.docx（24页珍藏版）》请在冰豆网上搜索。
可以对Silverlight中许多对象的属性进行动画处理。
说明：
在Silverlight中，您只能对值类型为Double、Color或Point的属性执行简单的动画处理。
此外，还可以使用ObjectAnimationUsingKeyFrames对其他类型的属性进行动画处理，但是这需要使用离散内插（从一个值跳到另一个值），而多数人认为这不是真正的动画。
下一节演示如何创建一个简单的动画，使Rectangle（一种UIElement）逐渐进入视野并从视野中逐渐消失。
使UIElement逐渐进入视野并从视野中逐渐消失
此示例演示如何使用Silverlight动画通过对属性值进行动画处理，使Rectangle逐渐进入视野并从视野中逐渐消失。
本示例使用DoubleAnimation（一种生成Double值的动画类型）对Rectangle的Opacity属性进行动画处理。
因此，Rectangle将逐渐进入视野并逐渐从视野中消失。
若要查看您将演练的动画的预览，请单击下面的链接来运行示例，然后单击矩形开始运行动画。
运行此示例
示例的第一部分创建一个Rectangle元素，并将其显示在StackPanel中。
XAML
复制
<
StackPanel>
<
RectangleMouseLeftButtonDown="
Mouse_Clicked"
x:
Name="
MyAnimatedRectangle"
Width="
100"
Height="
Fill="
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。
DoubleAnimationFrom="
1.0"
To="
0.0"
2.为该动画指定Duration。
动画的Duration属性指定了从其起始值过渡为目标值所需的时间。
下面的示例将动画的持续时间设置为一秒钟。
Duration="
0:
1"
3.上面的示例创建了不透明度值从1.0向0.0过渡的动画，此过渡使目标元素从完全不透明逐渐转变为完全不可见。
若要使元素在消失后再逐渐回到视野中，请将AutoReverse属性设置为true。
若要使动画无限期地重复，请将其RepeatBehavior属性设置为Forever。
AutoReverse="
True"
RepeatBehavior="
Forever"
/>
创建演示图板
若要向对象应用动画，请创建Storyboard对象并使用TargetName和TargetProperty附加属性指定要进行动画处理的对象和属性。
1.创建Storyboard并将动画添加为其子项。
Storyboard>
/Storyboard>
本示例中的Storyboard仅包含一个动画，不过您可以添加多个动画。
2.使用TargetName附加属性指定要进行动画处理的对象。
在下面的代码中，为DoubleAnimation指定了一个目标名称myAnimatedRectangle，这是要进行动画处理的对象的名称。
DoubleAnimation
Storyboard.TargetName="
From="
3.使用TargetProperty附加属性��定要进行动画处理的属性。
在下面的代码中，动画被配置为面向Rectangle的Opacity属性。
Storyboard.TargetProperty="
Opacity"
将演示图板与事件相关联
此时您已经指定了动画的目标对象以及动画的行为方式；
接下来您需要指定何时开始播放动画。
可以使用事件执行此操作。
1.将演示图板作为一种资源。
将Storyboard放入一个资源块内，以便您能够轻松地自代码引用该Storyboard，以执行开始、停止、暂停和继续等操作。
下面的标记显示StackPanel对象资源块中声明的Storyboard。
请注意，您可以在任意资源块中声明Storyboard，只要该资源块与您希望进行动画处理的对象位于同一个作用域中。
StackPanel.Resources>
!
--Animatestherectangle'
sopacity.-->
Storyboardx:
myStoryboard"
>
/StackPanel.Resources>
Rectangle
2.将事件附加到某一元素。
您可以使用多种事件来启动动画，包括鼠标相关事件，如在用户单击某一对象时引发的MouseLeftButtonDown，或是在首次加载对象时引发的Loaded事件。
有关事件的更多信息，请参见Silverlight的事件概述。
在本示例中，MouseLeftButtonDown事件附加到Rectangle，这样用户单击矩形时将引发该事件。
3.从事件处理程序控制动画。
Storyboard提供多种方法，这些方法允许您控制Storyboard动画的播放，包括Begin、Stop、Pause和Resume。
本示例使用Begin方法，该方法在用户单击矩形并引发MouseLeftButtonDown事件时启动动画。
//WhentheuserclickstheRectangle,theanimation
//begins.
privatevoidMouse_Clicked（objectsender,MouseEventArgse）
{
myStoryboard.Begin（）;
}
完整的示例
下面的示例演示了完整的XAML标记，这些标记用于创建在加载时逐渐进入视野并从视野中逐渐消失的矩形。
UserControlx:
Class="
animation_ovw_intro.Page"
xmlns="
xmlns:
x="
400"
300"
TextBlockMargin="
10"
Clickontherectangletostarttheanimation.<
/TextBlock>
/UserControl>
开始、停止、暂停和继续动画播放
上面的示例演示如何使用Begin方法启动动画；
不过，Storyboard还提供Stop、Pause和Resume方法，这些方法可用于控制动画。
下面的示例提供一系列按钮，这些按钮允许用户控制Ellipse在整个屏幕中的动画播放。
interactive_animation.Page"
TextWrapping="
Wrap"
ThissampleusestheBegin,Pause,Resume,andStopmethodstocontrolananimation.<
Canvas>
Canvas.Resources>
--Animatethecenterpointoftheellipse.-->
PointAnimationStoryboard.TargetProperty="
Center"
MyAnimatedEllipseGeometry"
5"
20,200"
400,100"
/Canvas.Resources>
PathFill="
Path.Data>
--Describesanellipse.-->
EllipseGeometryx:
Center="
20,20"
RadiusX="
15"
RadiusY="
/Path.Data>
/Path>
StackPanelOrientation="
Horizontal"
Canvas.Left="
Canvas.Top="
265"
--Buttonthatbeginsanimation.-->
ButtonClick="
Animation_Begin"
65"
30"
Margin="
2"
Content="
Begin"
--ButtonthatpausesAnimation.-->
Animation_Pause"
Pause"
--ButtonthatresumesAnimation.-->
Animation_Resume"
Resume"
--ButtonthatstopsAnimation.Stoppingtheanimationreturnsthe
ellipsetoitsoriginallocation.-->
Animation_Stop"
Stop"
/Canvas>
privatevoidAnimation_Begin（objectsender,RoutedEventArgse）
privatevoidAnimation_Pause（objectsender,RoutedEventArgse）
myStoryboard.Pause（）;
privatevoidAnimation_Resume（objectsender,RoutedEventArgse）
myStoryboard.Resume（）;
privatevoidAnimation_Stop（objectsender,RoutedEventArgse）
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的三秒钟延迟）。
下面的示例显示如何执行此项操作。
--Storyboardstarts2secondsafteritsBegin
methodiscalled.-->
StoryboardBeginTime="
swidth.No
BeginTimespecifiedsobydefaultbegins
assoonasit'
sparent（theStoryboard）
begins.-->
DoubleAnimation
Width"
sopacity.ABeginTime
of3secondsspecifiedsobeginsthreeseconds
aftertheStoryboardbegins（totalof5seconds）-->
DoubleAnimationBeginTime="
3"
0"
Rectanglex:
Loaded="
Start_Animation"
//Starttheanimationwhentheobjectloads.
privatevoidStart_Animation（objectsender,EventArgse）
可以考虑将Storyboard作为其他动画对象（例如DoubleAnimation）以及其他Storyboard对象的容器。
即可以在Storyboard对象中嵌套该对象并分别为每个Storyboard指定BeginTime值。
使用嵌套的演示图板可帮助您安排精心设计的动画序列。
每个子Storyboard都会在其父Storyboard开始前等待，然后在再次开始前开始倒计时。
在程序代码中创建动画
除了使用XAML，也可以完全在程序代码（如C#或VisualBasic）中创建动画。
下面的示例演示如何创建一个动画，在其中用动画播放Rectangle的Canvas.Top和Canvas.Left附加属性。
privatevoidCreate_And_Run_Animation（objectsender,EventArgse）
//Createaredrectanglethatwillbethetarget
//oftheanimation.
RectanglemyRectangle=newRectangle（）;
myRectangle.Width=200;
myRectangle.Height=200;
ColormyColor=Color.FromArgb（255,255,0,0）;
SolidColorBrushmyBrush=newSolidColorBrush（）;
myBrush.Color=myColor;
myRectangle.Fill=myBru
升级会员 