请稍等...页面即将加载完成

Silverlight动画完全解答(2)

时间: 2009-05-09 / 分类: SilverLight / 浏览次数: 430 views / 1个评论 发表评论

清单4 - 在屏幕上使一个星星前后运动

<Polygon.Triggers>
<EventTriggerRoutedEvent="Polygon.Loaded">
 <EventTrigger.Actions>
    <BeginStoryboard>
   <Storyboard>
   <!– Translate from 1 to 750 pixels, repeated, back-and-forth  –>
    <DoubleAnimationStoryboard.TargetName="xformTranslate"
       Storyboard.TargetProperty="X"
       From="1"To="750"Duration="0:0:14"
       AutoReverse ="True"RepeatBehavior="Forever" />

     </Storyboard>
    </BeginStoryboard>
    </EventTrigger.Actions>
 </EventTrigger>
</Polygon.Triggers>

如果我们想使这个星星在屏幕中移动的同时旋转,我们需要为旋转变换增加一个DoubleAnimation。清单5列出的是使多边形星星在表单中前后移动的同时作360度旋转的代码。
清单5 - 使星星旋转
<Polygon.Triggers>
<EventTriggerRoutedEvent="Polygon.Loaded">
 <EventTrigger.Actions>
    <BeginStoryboard>
    <Storyboard>
      <!– RotateTransform angle from 0 to 360 in 1 second, repeated forever –>
      <DoubleAnimationStoryboard.TargetName="xformRotate"
      Storyboard.TargetProperty="Angle"
       From="0"To="360"Duration="0:0:01"
       RepeatBehavior="Forever" />

     <DoubleAnimationStoryboard.TargetName="xformTranslate"
      Storyboard.TargetProperty="X"
       From="1"To="750"Duration="0:0:14"
       AutoReverse ="True"RepeatBehavior="Forever" />
      </Storyboard>
    </BeginStoryboard>
 </EventTrigger.Actions>
</EventTrigger>
</Polygon.Triggers>

最后我们可以通过使它的填充颜色从蓝到红作一个平滑的变换。我们只需要在ColorAnimation标签中驾驭颜色变化。我们可以像清单7展示的那样通过指定持续时间来控制颜色的改变和颜色的改变速率。注意,我们必须给我们要改变的画刷一个名字,像清单6展示的那样,这样我们才能在清单7的颜色变换中引用它:
清单6 - 在XAML中命名画刷
<Polygon.Fill>
     <SolidColorBrushx:Name ="mybrush"Color="Red" />
</Polygon.Fill>

清单7 - 在XAML中改变颜色
<Polygon.Triggers>
              <EventTriggerRoutedEvent="Polygon.Loaded">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                  <Storyboard>
                    <!– Animate the color from red to blue, and from blue to red in 7 seconds –>
                     <ColorAnimationStoryboard.TargetName="mybrush"
                        Storyboard.TargetProperty="Color"
                        From="Red"To="Blue"Duration="0:0:7"
                        RepeatBehavior="Forever"AutoReverse="True"/>

                    <DoubleAnimationStoryboard.TargetName="xformRotate"
                                     Storyboard.TargetProperty="Angle"
                                     From="0"To="360"Duration="0:0:01"
                                     RepeatBehavior="Forever" />

                    <DoubleAnimationStoryboard.TargetName="xformTranslate"
                                     Storyboard.TargetProperty="X"
                                     From="1"To="750"Duration="0:0:14"
                                     AutoReverse ="True"RepeatBehavior="Forever" />

                  </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
              </Polygon.Triggers>

让一个位图运动
使多边形运动很有意思,下面让我们看看如何使一个位图运动。实际上使图形和位图运动的区别很小。这张Kenny的位图在XAML中和多边形使用了同样的定义方式。唯一的不同在于定义图像的那些属性(比如Source属性定义了位图的文件名)。图像的变换和多边形的变换采用了完全相同的方式。
清单8 - 在XAML中描述一张Kenny的图像
<ImageMargin="75,61,0,119"Name="image1"Source="ImagesKENNY.bmp"HorizontalAlignment="Left"Width="72">
          <Image.RenderTransform>
            <TransformGroup>
              <RotateTransformx:Name="KennyRotateIt"   CenterX="50"CenterY="50"Angle="45"  />
              <ScaleTransformx:Name="KennyScaleIt"ScaleX=".75"ScaleY=".75" />
              <TranslateTransform x:Name="KennyTranslateIt"X="0"Y="100" />
            </TransformGroup>
          </Image.RenderTransform>


在从多边开到位图改变的过程中,故事板的结构并未改变。清单9的示例中,我们通过使用关键帧加速了Kenny在屏幕中的移动,达到一个盘旋的效果。关键帧达到了在表单中在不同时间段内摇晃Kenny的效果。(或许我们应该在他身后表示一个闪电动画,这样更符合Kenny的人物特点)。
清单9 - 使用关键帧在屏幕中摇晃Kenny
<Image.Triggers>
            <EventTriggerRoutedEvent="Image.Loaded">
              <EventTrigger.Actions>
                <BeginStoryboard>
                  <Storyboardx:Name="myStoryBoard1"Completed="OnCompletedAnimation">
                    <DoubleAnimationStoryboard.TargetName="KennyRotateIt"
                                     Storyboard.TargetProperty="Angle"
                                     From="0"To="360"Duration="0:0:01"
                                     RepeatBehavior="Forever" />
 

                    <!– Jolt Kenny across the screen at different time frames –>
                    <DoubleAnimationUsingKeyFrames
                         Storyboard.TargetName="KennyTranslateIt"
                         Storyboard.TargetProperty="X"
                         Duration="0:0:10"AutoReverse="True"RepeatBehavior="Forever">
                      <!– These KeyTime properties are specified as TimeSpan values
                 which are in the form of "hours:minutes:seconds". –>
                      <LinearDoubleKeyFrameValue="10"KeyTime="0:0:3" />
                      <LinearDoubleKeyFrameValue="100"KeyTime="0:0:5" />
                      <LinearDoubleKeyFrameValue="200"KeyTime="0:0:10" />
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger.Actions>
            </EventTrigger>
 </Image.Triggers>
结束语
        XAML引入了一种通过在故事板中插入一组简单规则来实现运动的方法。通过这些规则你可以创建有趣的2D和3D运动场景来添加到你的软件中。希望在将来我们还可以向你展示怎么利用这些特性来制作一些简单的游戏。同时,请不要害怕跟大家分享你的动画故事,这样他们才能更好地利用XAML和.NET的力量。

更多
订阅

1个评论

  1. Buy Samsung UN55C8000
    2010/11/18 于 16:16:14

    How do you start an interior design business?

发表评论

您的昵称 *

您的邮箱 *

您的网站


2 * one =