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

  • 常规讨论

  • 动画

    当动画基于元素属性改变时,常常是一些简单的视觉效果。例如,一个元素从画布的左上角移动到右下角,它的Canvas.LeftCanvas.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.LoadedElement是包含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>。这种动画使一个值从初始值到结束值“动态”地变化,例如110。每个动画承特定时间段内运行。在这个时间间隔内,相关动态值从初始值到结束值逐渐改变。从1变到10,它的值有可能为11.11.2,依此类推,一直到10,这依赖于动画时间周期。如果动态值是元素的x轴坐标,将创建元素从一点平滑移动到另一点的视觉效果。

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

    AutoReverse

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

    Duration

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

    From

    动画的初始值

    To

    动画的结束值

    By

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

    RepeatBehavior

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

    Storyboard.TargetName

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

    Storyboard.TargetProperty

    动画元素的属性

    提示:Storyboard.TargetProperty的值是接收动态值的属性的名称,如果属性包含点(如Canvas.LeftCanvas.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:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:14
    版主