Essential Silverlight翻译连载---第六章 续2

Question

动画

当动画基于元素属性改变时，常常是一些简单的视觉效果。例如，一个元素从画布的左上角移动到右下角，它的Canvas.Left和Canvas.Top属性在一段时间内每秒都在改变。如果一个元素慢慢淡出，变为不可见，它的Opacity值也从100%变为0%。所以从理论上，您可以仅仅依赖JavaScript并通过它访问Silverlight元素属性就能创建动画。当然，使用Silverlight内嵌的动画支持将更为方便。创建一个动画需要很多步骤，但这样做非常值得。

创建动画

创建一个动画包括几个步骤和几行标记，智能提示使这些变得简单。例如，将一个元素平滑地移动到另一个位置需要使用元素动起来。为了实现它，您需要给元素命名：

<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

    Foreground="Black" Text="Silverlight" x:Name="MyTextBlock">

．．．

</TextBlock>

在这个元素中需要使用<TextBlock.Triggers>元素定义一个trigger（如果您想让一个矩形动起来，需要使用<Rectangle.Triggers>，依此类推）。当事件被触发时，一个实际的trigger(用<EventTrigger>来表现)是处于活动状态的。在<EventTrigger>中的RoutedEvent属性中提供这个事件。当前，Silverlight只支持一个事件：Element.Loaded，Element是包含trigger的对象的名称(这里是TextBlock)。

<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

           Foreground="Black" Text="Silverlight" x:Name="MyTextBlock">

<TextBlock.Triggers>

    <EventTrigger RoutedEvent="TextBlock.Loaded">

      ．．．

    </EventTrigger>

</TextBlock.Triggers>

</TextBlock>

在事件trigger内部，创建了一个storyboard。这需要使用<BeginStoryboard>和<Storyboard>这两个元素。一个storyboard由一个或多个动画组成。您可以尝试去比较动画中的storyboard和变形中的<TransformGroup>，它们都可以把东西组合在一起。一个动画可以由几个单独的动画组成，稍后会介绍。

<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

           Foreground="Black" Text="Silverlight" x:Name="MyTextBlock">

<TextBlock.Triggers>

    <EventTrigger RoutedEvent="TextBlock.Loaded">

      <BeginStoryboard>

        <Storyboard>

          ．．．

        </Storyboard>

      </BeginStoryboard>

    </EventTrigger>

</TextBlock.Triggers>

</TextBlock>

Silverlight支持几种动画，在下一节将详细讲述它们。为了完成当前示例，首先介绍最普通的动画：<DoubelAnimation>。这种动画使一个值从初始值到结束值“动态”地变化，例如1到10。每个动画承特定时间段内运行。在这个时间间隔内，相关动态值从初始值到结束值逐渐改变。从1变到10，它的值有可能为1，1.1，1.2，依此类推，一直到10，这依赖于动画时间周期。如果动态值是元素的x轴坐标，将创建元素从一点平滑移动到另一点的视觉效果。

在使用动画时，您将经常使用以下几个属性：

AutoReverse

动画结束后重新开始（也就是让元素重新回到开始的地方）

Duration

动画运行周期，语法为：hh:mm:ss(小时，分钟，秒)

From

动画的初始值

To

动画的结束值

By

动画改变的绝对值（和To属性两者选一来使用）

RepeatBehavior

动画结束后该做什么；您可以提供一个持续周期，重复次数，或不断重复永不结束

Storyboard.TargetName

动画元素的名称(为此需要赋一个name属性)

Storyboard.TargetProperty

动画元素的属性

提示：Storyboard.TargetProperty的值是接收动态值的属性的名称，如果属性包含点(如Canvas.Left或Canvas.Top)，需要在圆括号内使用完整名称，如(Canvas.Left)或(Canvas.Top)。

添加一个<DoubleAnimation>完成上述代码，如例6-7所示。矩形和文本都向右移动了300个像素，这里使用了默认的动画周期（这里是1秒）。图6-7是输出效果。

例6-7 使用<DoubleAnimation>，XAML文件（DoubleAnimation.xaml）

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15"

             x:Name="MyRectangle">

    <Rectangle.Triggers>

      <EventTrigger RoutedEvent="Rectangle.Loaded">

        <BeginStoryboard>

          <Storyboard>

            <DoubleAnimation

              From="0" To="300.456"

              Storyboard.TargetName="MyRectangle"

              Storyboard.TargetProperty="(Canvas.Left)"/>

          </Storyboard>

        </BeginStoryboard>

      </EventTrigger>

    </Rectangle.Triggers>

</Rectangle>

<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

             Foreground="Black" Text="Silverlight" x:Name="MyTextBlock">

    <TextBlock.Triggers>

      <EventTrigger RoutedEvent="TextBlock.Loaded">

        <BeginStoryboard>

          <Storyboard>

            <DoubleAnimation

              From="25" To="325.456"

              Storyboard.TargetName="MyTextBlock"

              Storyboard.TargetProperty="(Canvas.Left)"/>

          </Storyboard>

        </BeginStoryboard>

      </EventTrigger>

    </TextBlock.Triggers>

</TextBlock>

</Canvas>

---

My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

My contact: QQ:372900288 E-mail:[e-mail] msn:[e-mail]