AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF/E CTP Quick Start - 第九部分：动画（翻译）

2017-11-13 1001
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

演练：为一个对象添加动画效果

第一步：寻找对象
　　首先，您需要一个对象，可以把动画效果添加之上。让我们先使用一个 Ellipse。下面的例子创建了一个 Ellipse并将它填充成黑色。 
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse x:Name="ellipse"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
Fill="black" />
</Canvas>
　　请注意，这个Ellipse有一个名字：
　　x:Name="ellipse"
　　这个Ellipse需要有一个名字，这样它才能够被添加动画。现在您可以有一个用于动画的对象了，下一步则是添加一个用于开始动画的 EventTrigger。
 
第二步：创建一个EventTrigger
　　 EventTrigger会在被它被触发时执行一个动作。从它的名字可以看出，触发它的是一个事件，一个由它的 RoutedEvent属性指定的事件。因为您希望这个 EventTrigger开始一个动画，那么使用一个 BeginStoryBoard对象作为它的动作。
　　您也需要决定是由哪个事件来触发这个动画。在这里非常简单，因为 EventTrigger只支持一个事件， Loaded事件，因此我们将 RoutedEvent属性设为Canvas.Loaded（最终我们会使用别的东西来触发这个动画）。这样，当 Canvas加载时我们的动画就会被开启。下面是到此为止的标记。 
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>

<!-- Insert Storyboard here. -->
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<Ellipse x:Name="ellipse"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
Fill="black"/>
</Canvas>
　　现在，您已经为创建一个 Storyboard和动画做好准备了。
 
第三步：创建一个Storyboard和一个动画
　　一个 Storyboard可以用于描述和控制一个或多个动画。在这个例子里，我们只用了一个动画。在WPF/E中，您通过把动画应用到对象的属性上来添加动画效果。使用一个 DoubleAnimation把一个动画效果运用在 Ellipse的 Canvas.Left属性上。您使用了 DoubleAnimation因为这个被操作的属性， Canvas.Left，是一个 Double类型（一个双精度浮点数）的属性。
　　为了使动画生效，需要为它指定一个目标名称（Storyboard.TargetName="ellipse"）、一个目标属性（Storyboard.TargetProperty="(Canvas.Left)"）、一个变换的值（To="300"）和一个 Duration（Duration="0:0:1"）。这个 Duration属性指定了动画效果从它的起始值到结束值的变化所用的时间长度。0:0:1表示这个 Duration为1秒钟。 
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation 
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Left)"
To="300" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Ellipse x:Name="ellipse"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
Fill="black"/>
</Canvas>
　　您使用了 DoubleAnimation因为这个被操作的属性， Canvas.Left，是一个 Double类型（一个双精度浮点数）的属性。
　　恭喜！您刚才创建了您的第一个WPF/E动画。如果您希望对WPF/E动画系统了解更多，请继续阅读下面的内容。
 
其它类型的动画
　　WPF/E还支持颜色的动画（ ColorAnimation）和点的动画效果（ PointAnimation）。当您对颜色添加动画效果时，请记住一个颜色和 SolidColorBrush的区别。当您为一个形状的 Stroke和 Fill属性指定一个颜色名或者十六进制值时，WPF/E会将其转换为使用 SolidColorBrush的方式。当您要为一个形状的 Stroke或 Fill添加动画时，您需要操作设置该属性的 SolidColorBrush对象的 Color。通常，当您要使用一个动画操作一个包含画刷的属性时，最好是使用复杂的语法来声明那个画刷，而不是使用一个颜色名或者十六进制值，这样您就可以为它添加一个名字了。
　　下面的例子为两个Ellipse添加了动画效果。第一个Ellipse的属性使用一个 SolidColorBrush显式设置了Fill属性。在例子里为 SolidColorBrush提供了一个名字，并操作了它的 Color属性。第二个动画就有些复杂了，因为第二个Ellipse的 Fill属性被设置为一个颜色名。当这个标记被执行时，系统会创建一个 SolidColorBursh，我们只能间接地为属性添加动画。 
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation 
Storyboard.TargetName="e1_brush"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:5" />
<ColorAnimation 
Storyboard.TargetName="e2"
Storyboard.TargetProperty="(Fill).(Color)"
From="Red" To="Blue" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<Ellipse Fill="Black"
Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
<Ellipse.Fill>
<SolidColorBrush x:Name="e1_brush" Color="black"/>
</Ellipse.Fill>
</Ellipse>

<Ellipse x:Name="e2" Fill="Black"
Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>
 
Timeline的属性
　　 Storyboard和 DoubleAnimation都是 Timeline类型的对象。Timeline有许多有用的属性：
  • Storyboard.TargetName：您操作的对象的名称。如果您不指定一个Storyboard.TargetName的值，Timeline会使用它父Timeline的Storyboard.TargetName。如果您不不指定任何父Timeline的Storyboard.TargetName属性，Timeline则会找到使用EventTrigger来启动它的那个对象。
  • Storyboard.TargetProperty：您操作的属性。如果您不指定Storyboard.TargetProperty，Timeline会使用它父Timeline的Storyboard.TargetProperty。这个属性所使用的语法由它操作的属性类型决定：
    • 指定附加属性时所用的语法："(ownerType.propertyName)"。例如："(Canvas.Top)"指定了Canvas.Top属性。
    • 指定其它类型属性时所用的语法："proeprtyName"。例如："Opacity"指定了Opacity属性。
  • BeginTime：Timeline开始的时间。请注意您在使用的语法，因为在这里默认的单位是“天”（简单地将该属性设为2，则表示BeginTime为2天！）。使用下面的语法来指定小时，分钟和秒：“小时:分钟:秒”。例如，“0:0:2”将BeginTime设为2秒（0小时，0分钟，2秒）。如果您不指定BeginTime，这个属性的值将默认为0秒。
  • Duration：Timeline执行一次所需的时间长度。对于一个动画来说，这表示它从起始值进行到结束值所用的时间长度。Duration属性使用与BeginTime相同的语法。再强调一下，请注意不要在您想表示“秒”的时候却设成了“小时”！Duration能够被设为两个特殊的值：“Forever”和“Automatic”。该属性的默认值为“Automatic”。如果您想了解有关这两个特殊值的详细信息，请参考WPF/E SDK中的Duration相关章节。
  • FillBehavior：指定了Timeline会停止之后会做 什么。这个属性可以使用两个值：Stop或HoldEnd。“Stop”会再Timeline结束时将被操作的属性设为它的起始值；“HoldEnd”说 明被操作的属性将再结束时保持最后的值不变。该属性默认值为“HoldEnd”。
  • RepeatBehavior：说明Timeline在重复的次数。这个属性能够被设为三种类型的值：重复次数，一个时间段，以及一个特殊值“Forever”。
    • “Forever”使Timeline不断地重复。
    • 一个时间段表示Timeline运行的时间长度。例如，将一个Duration为2.5秒的动画的RepeatBehavior设为“0:0:5”会使动画重复两次。
    • 重复次数指定了Timeline运行的次数。您使用下面的语法来指定重复次数：重复次数x。例如，“4x”表示Timeline重复四次。
    该属性默认值为“1x”，表示时间线只会执行一次。
　　下面的例子展示了这些Timeline的属性。 
<Storyboard 
Storyboard.TargetName="e1"
Storyboard.TargetProperty="(Canvas.Left)"
BeginTime="0:0:1">
<DoubleAnimation To="300" />
<DoubleAnimation To="300" Storyboard.TargetName="e2"/>
<DoubleAnimation To="80" Storyboard.TargetName="e3"
Storyboard.TargetProperty="Width"/>
<DoubleAnimation From="200" To="300" 
Storyboard.TargetName="e4"/>
<DoubleAnimation To="300" Duration="0:0:5.3"
Storyboard.TargetName="e5"/>
<DoubleAnimation FillBehavior="HoldEnd" To="200"
Storyboard.TargetName="e6"/>
<DoubleAnimation FillBehavior="Stop" To="200"
Storyboard.TargetName="e7"/>
<DoubleAnimation RepeatBehavior="Forever" To="300"
Storyboard.TargetName="e8"/>
</Storyboard>
 
指定动画变换的值
　　 DoubleAnimation， ColorAnimation和 PointAnimation都有 From和 To两个属性，用于指定被操作属性的起始值和结束值。如果没有制动 From属性的值，起始值则为被操作属性的当前值。此外您可以使用 By属性来设定偏移量的大小，而不是使用 To属性来设置属性的结束值。
 
在同一个对象上添加多个动画
　　您可以使用多个动画操作同一个对象的同一个属性。如果您想让让动画依次执行，那么可以将动画的 BeginTime和 Duration设为合适的值。下面的示例将两个动画应用到了同一个属性上，第二个动画将在第一个动画结束以后开始。 
<Storyboard 
Storyboard.TargetName="e1"
Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation BeginTime="0" Duration="0:0:2" To="250" />
<DoubleAnimation BeginTime="0:0:2" Duration="0:0:2" To="20" />
</Storyboard>
 

本文转自 jeffz 51CTO博客，原文链接：http://blog.51cto.com/jeffz/60389，如需转载请自行联系原作者
文章标签：
C#
关键词：
wpf动画
wpf quick
wpf ctp quick start
wpf ctp
技术小阿哥
目录
相关文章
mingupup
|
5月前
|
C#
WPF中动画教程（DoubleAnimation的基本使用）
WPF中动画教程（DoubleAnimation的基本使用）
mingupup
90 0
小王老师呀
|
4月前
|
算法 C# Windows
不可不知的WPF动画（Animation）
【9月更文挑战第19天】在 WPF（Windows Presentation Foundation）中，动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画，可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发，支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化，可创建引人入胜的用户界面。
小王老师呀
61 7
土木林森
|
5月前
|
C# UED 开发者
WPF与性能优化：掌握这些核心技巧，让你的应用从卡顿到丝滑，彻底告别延迟，实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法，详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈，如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着，通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画，从而有效提升应用性能。通过这些优化措施，WPF应用将更加流畅，用户体验也将得到显著改善。
土木林森
367 1
土木林森
|
5月前
|
C# UED 开发者
WPF动画大揭秘：掌握动画技巧，让你的界面动起来，告别枯燥与乏味！
【8月更文挑战第31天】在WPF应用开发中，动画能显著提升用户体验，使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法，包括平移、缩放、旋转等常见类型，并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外，还将介绍动画触发器的使用，帮助开发者更好地控制动画效果，提升应用的吸引力。
土木林森
273 0
mingupup
|
5月前
|
存储 C# 数据格式
WPF动画教程（PointAnimationUsingPath的使用）
WPF动画教程（PointAnimationUsingPath的使用）
mingupup
62 0
李杰-@yd
|
8月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放，可沿X或Y轴调整。在故事板中，通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性，并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时，EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后，展示了如何将动画集成到自定义按钮样式中。
李杰-@yd
198 0
Rick_1/2
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
Rick_1/2
233 0
杰克.陈
|
C#
WPF特效-鱼游动动画2
原文:WPF特效-鱼游动动画2           纯代码撸动画实践2:           原图：（png格式）                                                添加Effect以及Effect动画处理后Gif效果：                                     处理： 眼部放大缩小动画； 嘴缩放动画； 尾部收缩动画；  颜色变化效果动画。
杰克.陈
1069 0
杰克.陈
|
C#
WPF编游戏系列 之六 动画效果（1）
原文:WPF编游戏系列 之六 动画效果（1）        本篇主要针对界面进行动画效果处理。首先在打开或关闭界面时，使其产生动态效果而不是生硬的显示或消失（如下图）。其次在鼠标放到关闭窗口图标上时，使其出现闪动效果。
杰克.陈
704 0
杰克.陈
|
C# 前端开发
WPF编游戏系列 之七 动画效果（2）
原文:WPF编游戏系列 之七 动画效果（2）        上一篇已经对关闭窗口图标进行了动画效果处理，本篇将对窗口界面的显示和关闭效果进行处理。由于所有的动画效果都是针对窗口界面的Canvas，所以先要为它添加一些RenderTranform属性，这些属性不要填写任何效果，后面会由Storyboard和EventTrigger为其提供。
杰克.陈
677 0