代码改变世界

wpf创建动画示例

2011-06-30 00:46  观海看云  阅读(255)  评论(0编辑  收藏  举报

第 1 部分:创建 DoubleAnimation

1.不透明度值 1.0 使对象完全不透明,不透明度值 0.0 使对象完全不可见。 <[default] http://msdn2.microsoft.com/mtps:sentence runat="server" sentenceid="b25a8506c7a98ca77fd044981ed22f95" xmlns="http://msdn2.microsoft.com/mtps" class="tgtSentence" id="tgt51">若要使动画的不透明度值从 1.0 过渡为 0.0,可以将其 From 属性设置为 1.0,将其 To 属性设置为 0.0
...<DoubleAnimation From="1.0" To="0.0" />
..

2.然后,必须指定 Duration。
动画的 Duration 指定了从其起始值过渡为目标值所需的时间。
在下面的示例中,为动画指定的持续时间为五秒钟。
...<DoubleAnimation From="1.0" To="0.0"
Duration="0:0:5" />
...

3.上面的代码显示了不透明度值从 1.0 向 0.0 转换的动画,此转换使目标元素从完全不透明逐渐转变为完全不可见。
若要使元素在消失后再逐渐回到视野中,请将动画的 AutoReverse 属性设置为 true。 若要使动画无限期地重复,请将其 RepeatBehavior
属性设置为 Forever。

...<DoubleAnimation From="1.0" To="0.0"
Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
...

第 2 部分:创建演示图板

若要向对象应用动画,请创建 Storyboard 并使用 TargetName 和
TargetProperty附加属性指定要进行动画处理的对象和属性。
1.创建 Storyboard 并将动画添加为其子项。
...<Storyboard>
  <DoubleAnimation
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
...
2.Storyboard 必须知道要在哪里应用动画。 使用 Storyboard .TargetName 附加属性指定要进行动画处理的对象。
在下面的代码中,为 DoubleAnimation 指定了一个目标名称 MyRectangle,这是要进行动画处理的对象的名称。
...<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
From="1.0"
To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
...

3.使用 TargetProperty
附加属性指定要进行动画处理的属性。 在下面的代码中,动画被配置为面向 Rectangle 的 Opacity 属性。

<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>


第 3 部分 (XAML):将演示图板与触发器关联


在 XAML 中应用和启动 Storyboard 的最简单的方法是使用事件触发器。


创建一个 BeginStoryboard 对象并将演示图板与其关联。 BeginStoryboard 是一种应用和启动 Storyboard 的
TriggerAction。


<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>


创建 EventTrigger 并将 BeginStoryboard 添加至其 Actions 集合。 将 EventTrigger 的
RoutedEvent 属性设置为启动 Storyboard 所需的路由事件。
<!-- Animates the rectangle's
opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>



将 EventTrigger 添加至矩形的 Triggers 集合。
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!--
Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>