silverlight学习之storyboard 动画

利用silverlight的storyboard可以很方便的制作一些简单的“动画”，比如控制一些控件double类型或者color类型的属性值的变化。下面简单地说其中最简单的两个方面：DoubleAnimation（控制控件double类型的属性）和ColorAnimation（控制控件Color类型的属性）。

前提知识：DoubleAnimation是一个执行动画的动画对象，ColorAnimation也只是一个执行动画的动画对象，他们不是独立存在的，而是要寄存在管理动画的演示图板对象（storyboard对象）上。可以这样理解：DoubleAnimation、ColorAnimation只是storyboard的一个属性而已。

XAML代码：

<UserControl.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation  Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Width" 
                              From="160" To="300" Duration="0:0:2" AutoReverse="True" RepeatBehavior="forever">
            </DoubleAnimation>
            <ColorAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(rectangle1.Fill).Color" 
                            From="Blue" To="Red" Duration="0:0:5" AutoReverse="True" RepeatBehavior="forever">
            </ColorAnimation>
            <ColorAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(rectangle1.stroke).Color" 
                            From="Green" To="Black" Duration="0:0:5" AutoReverse="True" RepeatBehavior="forever">
            </ColorAnimation>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Rectangle Height="100" HorizontalAlignment="Left" Margin="90,96,0" Name="rectangle1" stroke="#FF16DB16" 
                   strokeThickness="10" VerticalAlignment="Top" Width="200" Fill="#FFD83232" />
    </Grid>
</UserControl>

1、可以看到里面的控件就只有一个：矩形 Rectangle

2、建立一个Storyboard对象

3、在Storyboard里添加一个DoubleAnimation属性（暂且这么理解吧）
Storyboard.TargetName：表示动画要作用于的控件

Storyboard.TargetProperty：表示动画要作用于的控件的哪个属性

From="160" ：表示控件属性的初始值 To=300" ：表示控件属性值的结束值

Duration=0:0:2" ：表示要经历的时间，表是时：分：秒

AutoReverse=True" 表示从From到To结束后再从To到From变化。 RepeatBehavior=forever" 表示无限重复

在ColorAnimation 属性里，我们想改变矩形的填充颜色，但这里要注意一下写法： Storyboard.TargetProperty = "(rectangle1.Fill).Color"

silverlight学习之storyboard 动画

相关推荐