silverlight基础3-Storyboard

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

<UserControl x:Class="Storyboard_sample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <!--将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操作，
                     如start, stop, pause,和恢复Storyboard
        以下Storyboard中的参数说明：
           Storyboard.TargetName:附加属性操作到指定的对象上;
           Storyboard.TargetProperty:要操作指定对象的属性;
           From..To :上述属性值的起始范围;
           Duration: 在多少时间内完成上述属性值的变化;
           AutoReverse:是否在vanishes 之后 fade back 到初始状态;
           RepeatBehavior:指示当前animation不断反复
        --> 
        <Grid.Resources>
            <!--1.ColorAnimation示例，控制一个矩形的颜色由绿色转变为红色.
            本例中Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
            即改变矩形的Rectangle.Fill属性，颜色-->
            <Storyboard x:Name="CA_Storyboard">
                <ColorAnimation
                   Storyboard.TargetName="MyAnimatedRectangle"
                   Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" 
                   From="Green"
                   To="red"
                   Duration="0:0:2"/>
            </Storyboard>
            
            <!--2.ColorAnimationUsingKeyFrames示例，控制一个矩形的颜色依次转变成不同的颜色 -->
            <Storyboard x:Name="CAUKF_Storyboard">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
                Storyboard.TargetName="MyAnimatedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)">

                    <!-- 前2秒，矩形颜色逐渐转换成红色，LinearColorKeyFrame：颜色变换模式为渐变（颜色慢慢改变），Value：目标颜色， KeyTime：时间 -->
                    <LinearColorKeyFrame Value="Red" KeyTime="00:00:02" />

                    <!-- 接下来0.5秒钟，矩形颜色瞬间转变成黄色，DiscreteColorKeyFrame:颜色变换模式为瞬间改变，Value：目标颜色， KeyTime：时间-->
                    <DiscreteColorKeyFrame Value="Yellow" KeyTime="00:00:2.5" />

                    <!-- 最后2秒钟，矩形颜色由黄色转变成绿色，SplineColorKeyFrame：颜色变换模式按照KeySpline中指定的颜色变换速率，
                    这个例子中，这个矩形刚开始颜色转变缓慢，到最后时颜色转变速度加快
                    KeySpline的解释请看http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.keyspline(VS.95).aspx-->
                    <SplineColorKeyFrame Value="Green" KeyTime="00:00:4.5" KeySpline="0.6,0.0 0.9,0.00" />

                </ColorAnimationUsingKeyFrames>
            </Storyboard>


            <!--3.DoubleAnimation示例，控制一个矩形的透明度，不透明变为透明，Storyboard.TargetProperty：修改目标矩形的Opacity（透明度)-->
            <Storyboard x:Name="DA_Storyboard">
                <DoubleAnimation
                   Storyboard.TargetName="MyAnimatedRectangle"
                   Storyboard.TargetProperty="Opacity"
                   From="1.0"
                   To="0.0"
                   Duration="0:0:1"/>
            </Storyboard>

            <!--4.DoubleAnimationUsingKeyFrames示例，控制一个矩形的X坐标变化-->
            <Storyboard x:Name="DAUKF_Storyboard">
             <!-- Animate the TranslateTransform.X property using 3 KeyFrames
                   which animates the rectangle along a straight line.-->
                <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="AnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:6">

                    <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
                     steadily from its starting position to 500 over 
                     the first 3 seconds.  -->
                    <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />

                    <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
                     appears at 400 after the fourth second of the animation. -->
                    <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />

                    <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
                     back to its starting point. The
                     animation starts out slowly at first and then speeds up. 
                     This KeyFrame ends after the 6th
                     second. -->
                    <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <!--5.PointAnimation示例，控制一个圆形位置变化-->
            <Storyboard x:Name="PA_Storyboard">
                <PointAnimation Storyboard.TargetProperty="Center"
                    Storyboard.TargetName="MyAnimatedEllipseGeometry"
                    Duration="0:0:3"
                    From="20,20"
                    To="400,400" />
             </Storyboard>

            <!--6.PointAnimation示例，控制一个圆形位置变化-->
            <Storyboard x:Name="PAUKF_Storyboard">

              <!--Animating the Center property uses 3 KeyFrames, which animate
                   the ellipse allong a triangular path.-->
                
                <PointAnimationUsingKeyFrames
                Storyboard.TargetProperty="Center"
                Storyboard.TargetName="MyAnimatedEllipseGeometry"
                Duration="0:0:5">

                 <!-- Over the first half second, Using a LinearPointKeyFrame, the ellipse 
                  moves steadily from its starting position along the first line of the 
                 trianglar path.  -->
                  <LinearPointKeyFrame 
                  KeyTime="0:0:0.5"
                  Value="100,300" />

                    <!-- Using a DiscretePointKeyFrame, the ellipse suddenly changes position
                     after the first second of the animation. -->
                  <DiscretePointKeyFrame 
                  KeyTime="0:0:1"
                  Value="400,300" />

                    <!-- Using a SplinePointKeyFrame, the ellipse moves back to its starting
                     position. It moves slowly at first and then speeds up. This key frame 
                     takes 2 seconds to complete. -->
                  <SplinePointKeyFrame 
                  KeySpline="0.6,0.0 0.9,0.00" 
                  KeyTime="0:0:3"
                  Value="200,100" />
                </PointAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>

         <!-- 设置一个Grid存放六个功能按钮-->
            <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>

     <!--设置一个矩形显示以上的动画,RenderTransform设置矩形的位置等属性-->
   <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>
                <!-- Describes an ellipse. -->
                <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）。这将导致动画失败，且无任何提示。