使用silverlight中的Storyboard实现动画效果
在silverlight中，可使用StoryBoard（故事板）不实现相似于动画的效果，本文就是借助该
对象来实现一个相册显示的例子，其运行效果以下图所示（鼠标放在中间图片上，而后离开）：
在正文开始以后，先介绍一下Storyboard, 其定义以下:
Controls animations with a timeline, and provides object and property targeting
information for its child animations.
由于它用时间线（timeline）来控制，并提供了要绑定的对象和目标属性信息。其在XAML中的
格式以下：
其中的oneOrMoreChildTimelines能够是以下任一或多个对象元素：
Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation,
DoubleAnimationUsingKeyFrames, PointAnimation, PointAnimationUsingKeyFrames
下面就其中几个主要的元素做以下演示说明，首先请看“DoubleAnimation”：
DoubleAnimation：当动画值的变化（FROM ...TO...）类型是 Double型时使用。
下面演示的就是矩形（MyAnimatedRectangle）的“Opacity”（透明度）属性在一秒内从1到0
的动画（参数说明见注释）。
ColorAnimation：当动画值的变化（FROM ...TO...）类型是 Color型时使用。
下面演示的是myStackPanel背景色在4秒内从红到绿的动画。
下面XAML代码与上面所示的实现效果相同：
接下来是PointAnimation: 当动画值的变化（FROM ...TO...）类型是 Point型时使用。
下面的XAML演示的是EllipseGeometry对象从point(20,200)移动到point(400,100)的动画。
好了，有了上面的介绍以后，咱们下面着手开发这个DEMO。
首先咱们创建一个silverlight application,并将其命名为：Animation_Sample。
而后咱们要去找几张相册用的图片，将其放在项目中的resource文件夹下，并将其设置为资源，
以下图所示：
而后在xaml中加入以下代码段做为Image元素对相应图片的引用：
而后在该xaml文件上击鼠标右键，选择"在 Expression Blend 中打开"菜单项，而后在打开的Blend 窗口中
按下图中所指示的方式来建立一个Storyboard，名为：p_w_picpath1Storyboard .
接着拖动当前帧到2秒处，执行“record keyframe”操做：
而后对左侧的图片进行"rotate transfer"和"scale transfer"操做，以下图：
而其最终的值以下图所示：
这里咱们能够经过下图所示演示一下当前图片从0秒到2秒的运行状况：
同理对其它图片进行相相似的操做后，就能够将当前文件进行保存，并单击F5进行试运行了。接着，咱们还要
再切换回VS完成动画播放的工做。在本DEMO中，由于使用了鼠标移入移出方式来实现动画的播听任务。因此咱们
要在相应的xaml.cs文件中加入storyboard的"Begin()"方法绑定以下：
这样就能够运行该DEMO了。
到这里，咱们只是实现了将图片从初始位置移动到指定位置。而没有实现reverse操做，即图片从分散展现状态
再回到实始状态。但实现这个功能也很是简单，主要是用了一个小技巧：
1.首先咱们要对当前的storyboard执行复制操做，以下图：
2. 而后在新生成的storyboard中修改其名称，并对其进行reverse操做，以下图：
这样咱们就获得了一个对展开的“逆操做”的storyboard.而后咱们在xaml.cs中调用这个storyboard的
Begin()方法便可，以下：
private
void
LayoutRoot_MouseLeave(
object
sender, MouseEventArgs e)
{
p_w_picpath1Storyboard_Reverse.Begin();
}
经过Blend工具，咱们很是轻松的实现了展现效果，这远比在XAML中手写代码要来得“简单正确”。
好了，今天的内容就到这里了。
×××连接，请点击这里：）
对象来实现一个相册显示的例子，其运行效果以下图所示（鼠标放在中间图片上，而后离开）：
在正文开始以后，先介绍一下Storyboard, 其定义以下:
Controls animations with a timeline, and provides object and property targeting
information for its child animations.
由于它用时间线（timeline）来控制，并提供了要绑定的对象和目标属性信息。其在XAML中的
格式以下：
<
Storyboard
>
oneOrMoreChildTimelines
</ Storyboard >
>
oneOrMoreChildTimelines
</ Storyboard >
其中的oneOrMoreChildTimelines能够是以下任一或多个对象元素：
Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation,
DoubleAnimationUsingKeyFrames, PointAnimation, PointAnimationUsingKeyFrames
下面就其中几个主要的元素做以下演示说明，首先请看“DoubleAnimation”：
DoubleAnimation：当动画值的变化（FROM ...TO...）类型是 Double型时使用。
下面演示的就是矩形（MyAnimatedRectangle）的“Opacity”（透明度）属性在一秒内从1到0
的动画（参数说明见注释）。
<
StackPanel
>
< StackPanel.Resources >
<!-- 将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操做，如
start, stop, pause,和恢复Storyboard. -->
< Storyboard x:Name ="myStoryboard" >
< DoubleAnimation
Storyboard.TargetName ="MyAnimatedRectangle"
Storyboard.TargetProperty ="Opacity"
From ="1.0"
To ="0.0"
Duration ="0:0:1"
AutoReverse ="True"
RepeatBehavior ="Forever" />
</ Storyboard >
</ StackPanel.Resources >
<!-- 参数说明：
Storyboard.TargetName:附加属性操做到指定的对象上;
Storyboard.TargetProperty:要操做指定对象的属性;
From..To :上述属性值的起始范围;
Duration: 在多少时间内完成上述属性值的变化;
AutoReverse:是否在vanishes 以后 fade back 到初始状态;
RepeatBehavior:指示当前animation 不断反复
-->
< Rectangle MouseLeftButtonDown ="Mouse_Clicked"
x:Name ="MyAnimatedRectangle"
Width ="100" Height ="100" Fill ="Blue" />
</ StackPanel >
< StackPanel.Resources >
<!-- 将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操做，如
start, stop, pause,和恢复Storyboard. -->
< Storyboard x:Name ="myStoryboard" >
< DoubleAnimation
Storyboard.TargetName ="MyAnimatedRectangle"
Storyboard.TargetProperty ="Opacity"
From ="1.0"
To ="0.0"
Duration ="0:0:1"
AutoReverse ="True"
RepeatBehavior ="Forever" />
</ Storyboard >
</ StackPanel.Resources >
<!-- 参数说明：
Storyboard.TargetName:附加属性操做到指定的对象上;
Storyboard.TargetProperty:要操做指定对象的属性;
From..To :上述属性值的起始范围;
Duration: 在多少时间内完成上述属性值的变化;
AutoReverse:是否在vanishes 以后 fade back 到初始状态;
RepeatBehavior:指示当前animation 不断反复
-->
< Rectangle MouseLeftButtonDown ="Mouse_Clicked"
x:Name ="MyAnimatedRectangle"
Width ="100" Height ="100" Fill ="Blue" />
</ StackPanel >
ColorAnimation：当动画值的变化（FROM ...TO...）类型是 Color型时使用。
下面演示的是myStackPanel背景色在4秒内从红到绿的动画。
<
StackPanel
x:Name
="myStackPanel"
Background
="Red"
Grid.Row
="0"
Loaded ="Start_Animation" >
< TextBlock Foreground ="White" > 使用层级方式绑定TargetProperty： </ TextBlock >
< StackPanel.Resources >
< Storyboard x:Name ="colorStoryboard" >
< ColorAnimation BeginTime ="00:00:00" Storyboard.TargetName ="myStackPanel"
Storyboard.TargetProperty ="(Panel.Background).(SolidColorBrush.Color)"
From ="Red" To ="Green" Duration ="0:0:4" />
</ Storyboard >
</ StackPanel.Resources >
</ StackPanel >
Loaded ="Start_Animation" >
< TextBlock Foreground ="White" > 使用层级方式绑定TargetProperty： </ TextBlock >
< StackPanel.Resources >
< Storyboard x:Name ="colorStoryboard" >
< ColorAnimation BeginTime ="00:00:00" Storyboard.TargetName ="myStackPanel"
Storyboard.TargetProperty ="(Panel.Background).(SolidColorBrush.Color)"
From ="Red" To ="Green" Duration ="0:0:4" />
</ Storyboard >
</ StackPanel.Resources >
</ StackPanel >
下面XAML代码与上面所示的实现效果相同：
<
StackPanel
Loaded
="Start_Animation"
>
< TextBlock Foreground ="White" > 普通方式绑定TargetProperty： </ TextBlock >
< StackPanel.Resources >
< Storyboard x:Name ="colorStoryboard2" >
< ColorAnimation BeginTime ="00:00:00" Storyboard.TargetName ="mySolidColorBrush"
Storyboard.TargetProperty ="Color" From ="AliceBlue" To ="Green" Duration ="0:0:4" FillBehavior ="Stop" />
</ Storyboard >
</ StackPanel.Resources >
< StackPanel.Background >
< SolidColorBrush x:Name ="mySolidColorBrush" Color ="AliceBlue" />
</ StackPanel.Background >
</ StackPanel >
< TextBlock Foreground ="White" > 普通方式绑定TargetProperty： </ TextBlock >
< StackPanel.Resources >
< Storyboard x:Name ="colorStoryboard2" >
< ColorAnimation BeginTime ="00:00:00" Storyboard.TargetName ="mySolidColorBrush"
Storyboard.TargetProperty ="Color" From ="AliceBlue" To ="Green" Duration ="0:0:4" FillBehavior ="Stop" />
</ Storyboard >
</ StackPanel.Resources >
< StackPanel.Background >
< SolidColorBrush x:Name ="mySolidColorBrush" Color ="AliceBlue" />
</ StackPanel.Background >
</ StackPanel >
接下来是PointAnimation: 当动画值的变化（FROM ...TO...）类型是 Point型时使用。
下面的XAML演示的是EllipseGeometry对象从point(20,200)移动到point(400,100)的动画。
<
PointAnimation
Storyboard.TargetProperty
="Center"
Storyboard.TargetName ="MyAnimatedEllipseGeometry"
Duration ="0:0:5"
From ="20,200"
To ="400,100"
RepeatBehavior ="Forever" />
</ Storyboard >
</ Canvas.Resources >
< Path Fill ="Blue" >
< Path.Data >
<!-- Describes an ellipse. -->
< EllipseGeometry x:Name ="MyAnimatedEllipseGeometry"
Center ="20,20" RadiusX ="15" RadiusY ="15" />
</ Path.Data >
</ Path >
Storyboard.TargetName ="MyAnimatedEllipseGeometry"
Duration ="0:0:5"
From ="20,200"
To ="400,100"
RepeatBehavior ="Forever" />
</ Storyboard >
</ Canvas.Resources >
< Path Fill ="Blue" >
< Path.Data >
<!-- Describes an ellipse. -->
< EllipseGeometry x:Name ="MyAnimatedEllipseGeometry"
Center ="20,20" RadiusX ="15" RadiusY ="15" />
</ Path.Data >
</ Path >
好了，有了上面的介绍以后，咱们下面着手开发这个DEMO。
首先咱们创建一个silverlight application,并将其命名为：Animation_Sample。
而后咱们要去找几张相册用的图片，将其放在项目中的resource文件夹下，并将其设置为资源，
以下图所示：
而后在xaml中加入以下代码段做为Image元素对相应图片的引用：
<
Grid
x:Name
="LayoutRoot"
Background
="White"
MouseEnter
="LayoutRoot_MouseEnter"
MouseLeave ="LayoutRoot_MouseLeave" >
< Image x:Name ="p_w_picpath_one" Source ="resource/img_one.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="p_w_picpath_two" Source ="resource/img_two.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="img_three" Source ="resource/img_three.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="img_four" Source ="resource/img_four.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="img_five" Source ="resource/img_five.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
</ Grid >
MouseLeave ="LayoutRoot_MouseLeave" >
< Image x:Name ="p_w_picpath_one" Source ="resource/img_one.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="p_w_picpath_two" Source ="resource/img_two.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="img_three" Source ="resource/img_three.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="img_four" Source ="resource/img_four.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
< Image x:Name ="img_five" Source ="resource/img_five.jpg" Height ="40" Width ="400" Canvas.Left ="30"
Canvas.Top ="30" Margin ="12,0,0,0" ></ Image >
</ Grid >
而后在该xaml文件上击鼠标右键，选择"在 Expression Blend 中打开"菜单项，而后在打开的Blend 窗口中
按下图中所指示的方式来建立一个Storyboard，名为：p_w_picpath1Storyboard .
接着拖动当前帧到2秒处，执行“record keyframe”操做：
而后对左侧的图片进行"rotate transfer"和"scale transfer"操做，以下图：
而其最终的值以下图所示：
这里咱们能够经过下图所示演示一下当前图片从0秒到2秒的运行状况：
同理对其它图片进行相相似的操做后，就能够将当前文件进行保存，并单击F5进行试运行了。接着，咱们还要
再切换回VS完成动画播放的工做。在本DEMO中，由于使用了鼠标移入移出方式来实现动画的播听任务。因此咱们
要在相应的xaml.cs文件中加入storyboard的"Begin()"方法绑定以下：
private
void
LayoutRoot_MouseEnter(
object
sender, MouseEventArgs e)
{
p_w_picpath1Storyboard.Begin();
}
{
p_w_picpath1Storyboard.Begin();
}
这样就能够运行该DEMO了。
到这里，咱们只是实现了将图片从初始位置移动到指定位置。而没有实现reverse操做，即图片从分散展现状态
再回到实始状态。但实现这个功能也很是简单，主要是用了一个小技巧：
1.首先咱们要对当前的storyboard执行复制操做，以下图：
2. 而后在新生成的storyboard中修改其名称，并对其进行reverse操做，以下图：
这样咱们就获得了一个对展开的“逆操做”的storyboard.而后咱们在xaml.cs中调用这个storyboard的
Begin()方法便可，以下：
private
void
LayoutRoot_MouseLeave(
object
sender, MouseEventArgs e)
{ p_w_picpath1Storyboard_Reverse.Begin();}
经过Blend工具，咱们很是轻松的实现了展现效果，这远比在XAML中手写代码要来得“简单正确”。
好了，今天的内容就到这里了。
×××连接，请点击这里：）
相关文章
- 1. 使用silverlight中的Storyboard实现动画效果
- 2. 使用storyboard实现粒子效果
- 3. 动画实现始终效果案例（动画的使用，居中的使用）
- 4. 动画效果的实现
- 5. 用js实现的动画效果
- 6. jquery实现动画效果
- 7. jQuery动画效果实现
- 8. React实现动画效果
- 9. JQuery——实现动画效果
- 10. JQuery 现实动画效果
- 更多相关文章...
- • 现实生活中的 XML - XML 教程
- • SVG 模糊效果 - SVG 教程
- • ☆基于Java Instrument的Agent实现
- • C# 中 foreach 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse设置粘贴字符串自动转义
- 2. android客户端学习-启动模拟器异常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout问题
- 4. MYSQL8.0数据库恢复 MYSQL8.0ibd数据恢复 MYSQL8.0恢复数据库
- 5. 你本是一个肉体，是什么驱使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一个肉体，是什么驱使你前行【3】
- 9. 你本是一个肉体，是什么驱使你前行【2】
- 10. 【资讯】LocalBitcoins达到每周交易比特币的7年低点
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 使用silverlight中的Storyboard实现动画效果
- 2. 使用storyboard实现粒子效果
- 3. 动画实现始终效果案例（动画的使用，居中的使用）
- 4. 动画效果的实现
- 5. 用js实现的动画效果
- 6. jquery实现动画效果
- 7. jQuery动画效果实现
- 8. React实现动画效果
- 9. JQuery——实现动画效果
- 10. JQuery 现实动画效果