导航

silverlight基础3-Storyboard

Posted on 2010-06-07 22:47  寒宵飞飞  阅读(2297)  评论(0编辑  收藏  举报

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)。这将导致动画失败,且无任何提示。