使用silverlight中的Storyboard实现动画效果

51cto.com

daizhenj…

2008-7-17

保存本文

推荐给好友

收藏本页

欢迎进入.NET社区论坛，与200万技术人员互动交流 >>进入

在silverlight中，可以使用StoryBoard（故事板）不实现类似于动画的效果，本文就是借助该对象来实现一个相册显示的例子，其运行效果如下图所示（鼠标放在中间图片上，然后离开）：

在正文开始之后，先介绍一下Storyboard, 其定义如下:

Controls animations with a timeline, and provides object and property targeting
information for its child animations.

因为它用时间线（timeline）来控制，并提供了要绑定的对象和目标属性信息。其在XAML中的

格式如下：

         <Storyboard   >
            oneOrMoreChildTimelines
        </Storyboard>

其中的oneOrMoreChildTimelines可以是如下任一或多个对象元素：

Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation,
DoubleAnimationUsingKeyFrames, PointAnimation, PointAnimationUsingKeyFrames

下面就其中几个主要的元素作如下演示说明，首先请看“DoubleAnimation”：

DoubleAnimation：当动画值的变化（FROM ...TO...）类型是 Double型时使用。

下面演示的就是矩形（MyAnimatedRectangle）的“Opacity”（透明度）属性在一秒内从1到0的动画（参数说明见注释）。

ColorAnimation：当动画值的变化（FROM ...TO...）类型是 Color型时使用。

下面演示的是myStackPanel背景色在4秒内从红到绿的动画。

         <StackPanel x:Name="myStackPanel" Background="Red" Grid.Row="0"
                Loaded="Start_Animation">
            <TextBlock Foreground="White">使用层级方式绑定TargetProperty：</TextBlock>
            <StackPanel.Resources>
                <Storyboard x:Name="colorStoryboard">
                    <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="myStackPanel"
                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                From="Red" To="Green" Duration="0:0:4" />
                </Storyboard>
            </StackPanel.Resources>
        </StackPanel>

下面XAML代码与上面所示的实现效果相同：

         <StackPanel Loaded="Start_Animation">
             <TextBlock Foreground="White">普通方式绑定TargetProperty：</TextBlock>
             <StackPanel.Resources>
                 <Storyboard x:Name="colorStoryboard2">
                     <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush"
            Storyboard.TargetProperty="Color" From="AliceBlue" To="Green" Duration="0:0:4" FillBehavior="Stop"/>
                 </Storyboard>
             </StackPanel.Resources>
             <StackPanel.Background>
                 <SolidColorBrush x:Name="mySolidColorBrush" Color="AliceBlue" />
             </StackPanel.Background>
        </StackPanel>

接下来是PointAnimation: 当动画值的变化（FROM ...TO...）类型是 Point型时使用。

下面的XAML演示的是EllipseGeometry对象从point(20,200)移动到point(400,100)的动画。