silverlight基础3Storyboard

silverlight Storyboard

silverlight的Storyboard可以实现动画效果。

Xmal中：

<Storyboard>
oneOrMoreChildTimelines
</Storyboard>

其中oneOrMoreChildTimelines用来设置动画效果，有5种形式

1.ColorAnimation（设置颜色动画，使控件颜色变化一次）

2.ColorAnimationUsingKeyFrames（设置颜色动画，使控件颜色变化任意次）

3.DoubleAnimation（设置动画，使控件的任意一个属性（double类型的，eg：透明度）变化一次）

4.DoubleAnimationUsingKeyFrames（设置动画，使控件的任意一个属性（double类型的，eg：透明度）变化任意次）

5.PointAnimation（设置动画，使控件的位置变化一次）

6.PointAnimationUsingKeyFrames（设置动画，使控件的位置变化任意次）

下面通过一个例子展示这6个功能：

这个例子通过六个button：

CA_btn：控制一个矩形的颜色由绿变红 ColorAnimation

CAUKF_btn：控制一个矩形的颜色不断变化 ColorAnimationUsingKeyFrames

DA_btn：控制一个矩形的透明度变化一次 DoubleAnimation

DAUKF_btn：控制一个矩形的X值不断变化 DoubleAnimationUsingKeyFrames

PA_btn：控制一个圆形的位置变化一次 PointAnimation

PAUKF_btn：控制一个圆形的位置不断变化 PointAnimationUsingKeyFrames

代码如下：

xmal文件

代码

<Grid x:Name="button_grid" HorizontalAlignment="Center"  VerticalAlignment="Top" Height="30" Margin="12,0,27,0">

            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>

            <Button Content="ColorAnimation" Height="30" HorizontalAlignment="Center"  Name="CA_btn" VerticalAlignment="Top" Width="150" Click="CA_btn_Click" Grid.Row ="0" Grid.Column="0"/>
            <Button Content="ColorAnimationUsingKeyFrames" Height="30" HorizontalAlignment="Center"  Name="CAUKF_btn" VerticalAlignment="Top" Width="200" Click="CAUKF_btn_Click" Grid.Row ="0" Grid.Column="1"/>
            <Button Content="DoubleAnimation" Height="30" HorizontalAlignment="Center"  Name="DA_btn" VerticalAlignment="Top" Width="150" Click="DA_btn_Click" Grid.Row ="0" Grid.Column="2"/>
            <Button Content="DoubleAnimationUsingKeyFrames" Height="30" HorizontalAlignment="Center"  Name="DAUKF_btn" VerticalAlignment="Top" Width="200" Grid.Row ="0" Grid.Column="3" Click="DAUKF_btn_Click" />
            <Button Content="PointAnimation" Height="30" HorizontalAlignment="Center"  Name="PA_btn" VerticalAlignment="Top" Width="150" Click="PA_btn_Click" Grid.Row ="0"  Grid.Column="4"/>
            <Button Content="PointAnimationUsingKeyFrames" Height="30" HorizontalAlignment="Center"  Name="PAUKF_btn" VerticalAlignment="Top" Width="200" Grid.Row ="0" Grid.Column="5" Click="PAUKF_btn_Click" />

        </Grid>

     
   <Rectangle x:Name="MyAnimatedRectangle" Fill="Blue" Margin="107,56,224,181" Height=" 100" Width="100">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="AnimatedTranslateTransform" />
        </Rectangle.RenderTransform>
   </Rectangle>

<Path Fill="Yellow">
            <Path.Data>
                
                <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
  Center="20,50" RadiusX="15" RadiusY="15" />
            </Path.Data>
    </Path>

    </Grid>
</UserControl>

xmal.cs文件

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Storyboard_sample
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        //ColorAnimation
        private void CA_btn_Click(object sender, RoutedEventArgs e)
        {
            CA_Storyboard.Begin();//启动CA_Storyboard动画
        }

        //ColorAnimationUsingKeyFrames
        private void CAUKF_btn_Click(object sender, RoutedEventArgs e)
        {
            CAUKF_Storyboard.Begin();//启动CAUKF_Storyboard动画
        }

        //DoubleAnimation
        private void DA_btn_Click(object sender, RoutedEventArgs e)
        {
            DA_Storyboard.Begin();//启动DA_Storyboard动画
        }

        //DoubleAnimationUsingKeyFrames
        private void DAUKF_btn_Click(object sender, RoutedEventArgs e)
        {
            DAUKF_Storyboard.Begin();//启动DAUKF_Storyboard动画
        }

        //PointAnimation
        private void PA_btn_Click(object sender, RoutedEventArgs e)
        {
            PA_Storyboard.Begin();//启动PA_Storyboard动画
        }

        //PointAnimationUsingKeyFrames
        private void PAUKF_btn_Click(object sender, RoutedEventArgs e)
        {
            PAUKF_Storyboard.Begin();//启动PAUKF_Storyboard动画
        }
    }
}

界面如下

下载：

Storyboard_sample

一般Storyboard会放在容器XXX（grid，stackpanel等）的XXX.Resources中，这样这个容器内的其他控件，就可以直接调用这个Storyboard。

Storyboard中也可以安排很多片段动画，组成一个完整的动画，例如

代码

<Storyboard>
    <DoubleAnimation 1 />
    <DoubleAnimation 2/>
    <ColorAnimation 3 />
    ......

</Storyboard>

说明：
不要试图在页面的构造函数中调用 Storyboard 成员（例如 Begin）。这将导致动画失败，且无任何提示。