animations -- Silverlight 动画制作

Silverlight 动画制作

Silverlight 可以制作动画。这篇快速导航将介绍silverlight动画特征并且带你走进你的第一个silgerlight动画。
本文包括如下几个内容：

1. 寻找制作动画的素材
2. 创建EventTrigger
3. 创建Storyboard 和一个动画
时间属性
动画变化时间

第一步：寻找制作动画的素材
首先，你需要一些素材去组织动画，这个例子中，你将用到一个圆形。接下来我们将创建这个圆形并且把它用黑色填充。
代码如下：
<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>

我们需要给这个圆定义一个名字，以便我们在动画中对它编辑。（另外，我们也可以在xaml文件的任何位置通过这个名字对它进行操作）.现在你有一个制作动画的对象了，接下来

就是创建一个事件触发你的动画。

第二步：创建事件触发器
事件触发器其实就是当某些事件引发的一个动作。就像它名字一样，某些事件是通过 RoutedEvent 属性来说明的。
由于你想通过事件触发器开始你的动画，你得使用BeginStoryboard 作为它的动作。
你同样需要确定什么事件触发你的动画。在silverlight 1.0中，选择一个事件很简单，因为事件触发器对象仅仅支持一个事件（装载事件）。把canvas.loaded事件设

置RoutedEvent属性的值，那么动画就会在canvas装载时开始。下面的例子将会介绍怎么实现这个场景。

现在准备创建了一个Storyboard 和动画了。

第三步:创建了 Storyboard 和动画
Storyboard 能够描述并且控制一个或多个动画。在这个例子中，我们将使用一个动画。在silverlight中，你可以通过设置对象的属性制作动画。因为canvas.left这个属性将被

动态控制，并且是个双精度类型的值，因此我们通过DoubleAnimation 属性来控制圆的canvas.left属性。

对动画的操作，我们必须给它一个target name(Storyboard.TargetName="ellipse")。一个target属性(Storyboard.TargetProperty="(Canvas.Left)")，一个最终值

(To="300"), 动画持续多久. Duration 属性说明了动画从开始时间到结束时间的时间间隙。 0:0:1表示一秒。

你使用了DoubleAnimation 属性，是因为我们要动态控制的是 canvas.Left，它是一个双精度浮点型值。
恭喜你，你已经创建好了你的第一个Silverlight 动画了。如果你像了解更多关于动画内容，请接着往下学习。

其他类型的动画
Silverlight 也支持颜色变动的动画和点变动的动画。当你制作颜色变化的动画时，请记住颜色和实体颜色刷的不同。former 是后者的一个属性。当你把一个形状设置Stroke

和Fill属性为一种颜色的名字或者十六进制数值时，silverlight将会把这个值或名字转换成实体颜色刷。使形状物的Stroke 或者Fill动态变化，你需要动态控制你使用

的Solidcolorbrush的Color 属性。通常，当你想要动态控制brush的一个属性时，最好用描述替代颜色的名字或者一个十六进制值，并且给这个描述设置一个名字。

<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
      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>

Timelines属性族
Storyboard 和DoubleAnimation 都是Timelines对象。Timelines有一系列属性

Storyboard.TargetName 属性：动画对象的名字。如果你没有说明这个属性，那么timeline 将使用Storyboard.TargetName 的父timeline。如果你没有指明任何它的父timelines

，timeline 将会指向拥有触发器的元素并且启动它。

Storyboard.TargetProperty属性：你需要动态变化的对象的属性。
指向附加属性语法为（ownerType.propertyName）如："(Canvas.Top)" 指向 Canvas.Top 属性.
指向其他属性语法为（propertyName）如："COlor" 指向 SolidColorBrush的color 属性.

BeginTime属性：timeline 开始时间。默认的时间单位为天，如果你简单的设置为“2”的话，那么结果将是在开始时间2天后开始timeline。它的具体格式如下： “0：0：0”，表示

小时，分，秒。

Duration属性：timeline 的持续时间。对一个动画来说，它是动画开始时间和结束时间之间的长度。同样它的设置格式与begintime是一样的，同时它有两个特殊值Forever"

和"Automatic"。

FillBehavior属性:当一个动画的timeline停止后，应该有怎么样的行为。这个属性有两个值，stop和holdend。 stop返回动画开始前的值。holdend返回的是动画最终的值。默认

值是holdend。

RepeatBehavior属性: 指明timeline重复的频率。这个属性有3个值。重复的次数，时间值，是否永远重复。 “Forever”将会导致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>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
</Canvas.Triggers>
<Ellipse x:Name="e1" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/>
<TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
<Ellipse x:Name="e2" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/>
<TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
<Ellipse x:Name="e3" Fill="Purple"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/>
<TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
<Ellipse x:Name="e4" Fill="Blue"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/>
<TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
<Ellipse x:Name="e5" Fill="Green"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/>
<TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
<Ellipse x:Name="e6" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/>
<TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
<Ellipse x:Name="e7" Fill="Orange"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/>
<TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
<Ellipse x:Name="e8" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/>
<TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>
</Canvas>

posted on 2008-03-28 18:58 大森林阅读(1171) 评论(0) 编辑收藏举报