Silverlight动画的基本知识、关键帧动画

基础知识

（一）动画：是快速播放一系列图像（其中每个图像与下一个图像略微不同）给人造成的一种幻觉

（二）动画类型：两类    （1）From/To/By动画：在起始值和结束值之间进行动画处理。      (2)关键帧动画：在使用关键帧对象指定的一系列值之间播放动画

(三) 动画是时间线:所有动画均继承自 Timeline 对象，因此所有动画都是专用类型的时间线.有以下重要属性：

(1)TargetName:指定要进行动画处理的对象    
    (2)TargetProperty:指定要进行动画处理的属性    
    (3)Duration：（时间线）整个动画单次播放持续的时间(格式为 小时 : 分钟 : 秒 或者Forever 或者 Automatic)    
    (4)AutoReverse：指定时间线在到达其 Duration 的终点后是否倒退（True/Flase）     
    (5)RepeatBehavior：获取或设置此时间线的重复行为(RepeatBehavior 可以定义为时间跨度字符串、#x 字符串或者特殊值 Forever)。 
    (6)FillBehavior: 属性指定时间线结束时的行为方式( HoldEnd和Stop) ，默认HoldEnd.如果想保持结束后的状态HoldEnd，否则Stop     
    (7) BeginTime: 属性可以指定动画对象活动开始点的时间

 <UserControl x:Class="AnimationStudy.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="" d:DesignWidth="">
     <StackPanel>
         <StackPanel.Resources>
             <!-- 矩形透明度动画 -->
             <Storyboard x:Name="myStoryboard">
                 <!--
                 ()TargetName:指定要进行动画处理的对象
                 ()TargetProperty:指定要进行动画处理的属性
                （）Duration：（时间线）整个动画单次播放持续的时间(格式为 小时 : 分钟 : 秒 或者Forever 或者 Automatic)
                （）AutoReverse：指定时间线在到达其 Duration 的终点后是否倒退（True/Flase）
                （）RepeatBehavior：获取或设置此时间线的重复行为(RepeatBehavior 可以定义为时间跨度字符串、#x 字符串或者特殊值 Forever)。
                 ()FillBehavior: 属性指定时间线结束时的行为方式( HoldEnd和Stop) ，默认HoldEnd.如果想保持结束后的状态HoldEnd，否则Stop
                 () BeginTime: 属性可以指定动画对象活动开始点的时间
                 -->
                 <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle"
                                  Storyboard.TargetProperty="Opacity" BeginTime="0:0:2"
                                  From="1.0" To="0.0" Duration="0:0:1"
                                  AutoReverse="False"
                                  RepeatBehavior="1x" FillBehavior="HoldEnd" />
             </Storyboard>
         </StackPanel.Resources>

         <TextBlock Margin="">点击矩形开始动画</TextBlock>
         <Rectangle MouseLeftButtonDown="Mouse_Clicked"
                    x:Name="MyAnimatedRectangle"
                    Width=""
                    Height=""
                    Fill="Blue" />
     </StackPanel>
 </UserControl>

（四） 对属性应用动画

 <UserControl x:Class="AnimationStudy.AnimationByProperty"
     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="" d:DesignWidth="">
     <!--对属性应用动画
     （）间接以属性作为目标
         正在进行动画处理的属性值 (Color) 属于未命名甚至未显式声明的 SolidColorBrush 对象
         Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
     （）直接属性目标
         显式创建 SolidColorBrush，对其进行命名，然后直接以其 Color 属性为目标
     -->
     <StackPanel x:Name="myStackPanel"  Background="Red"  Loaded="Start_Animation">
         <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>
     <!--<StackPanel Loaded="Start_Animation">
         <StackPanel.Resources>
             <Storyboard x:Name="colorStoryboard">
                 <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush"
         Storyboard.TargetProperty="Color" From="Red" To="Green" Duration="0:0:4" />
             </Storyboard>
         </StackPanel.Resources>
         <StackPanel.Background>
             <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
         </StackPanel.Background>
     </StackPanel>-->
 </UserControl>

（五）在程序代码中创建动画，改写（三）中Xaml为程序代码

 //在程序代码中创建动画
         private void button1_Click(object sender, RoutedEventArgs e)
         {
             //创建矩形
             Rectangle myRectangle = new Rectangle();
             myRectangle.Width = ;
             myRectangle.Height = ;
             Color myClolor = Color.FromArgb(, , , );
             SolidColorBrush myBrush = new SolidColorBrush();
             myBrush.Color = myClolor;
             myRectangle.Fill = myBrush;
             LayoutRoot.Children.Add(myRectangle);
             //2秒中的时间线
             Duration duration = new Duration(TimeSpan.FromSeconds());

             // 创建DoubleAnimation动画
             DoubleAnimation myDoubleAnimation = new DoubleAnimation();
             myDoubleAnimation.Duration = duration;
             //创建演示图版.并将myDoubleAnimation动画加到演示图板
             Storyboard sb = new Storyboard();
             sb.Duration = duration;
             sb.Children.Add(myDoubleAnimation);

             //设置动画对象和动画属性
             Storyboard.SetTarget(myDoubleAnimation, myRectangle);
             Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(OpacityProperty));
             myDoubleAnimation.To =0.0;
             sb.BeginTime = new TimeSpan(, , , );
             sb.RepeatBehavior = new RepeatBehavior();
             myDoubleAnimation.AutoReverse = false;
             myDoubleAnimation.FillBehavior = FillBehavior.HoldEnd;
             //以资源文件加入到LayOutRoot
             LayoutRoot.Resources.Add("",sb);
             //开始动画
             sb.Begin();   

         }

（一）关键帧动画:动画形式显示了目标属性的值,单个关键帧动画可以创建任意数量的目标值之间的过渡.

（二）关键帧动画的优点：

(1)使用关键帧对象描述关键帧动画的目标值

(2)单个关键帧动画可以创建任意数量的目标值之间的过渡

(3)某些关键帧方法除支持多个目标值外，还支持多个内插方法

（三）内插方法：定义了从某个值过渡到下一个值的方式

（1）离散

（2）线性

（3）样条

（四）创建关键帧动画

(1)步骤：

a、 按照对 From/To/By 动画使用的方法声明动画并指定其 Duration。

b、  对于每一个目标值，创建相应类型的关键帧，设置其值和 KeyTime，并将其添加到动画的 KeyFrames 集合内。

c、 按照对 From/To/By 动画使用的方法，将动画与属性相关联。

（2）实例讲解：

 <UserControl x:Class="AnimationStudy.AnimationUsingKeyFrames"
     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="" d:DesignWidth="">

     <Canvas>
         <Canvas.Resources>
             <Storyboard x:Name="myStoryboard">
                 <!--
                 （一）目标值（关键帧）和关键时间
                        Value（目标值/关键帧）: 指定关键帧的目标值
                        KeyTime（关键时间）: 属性指定到达关键帧的 Value 的时间（在动画的 Duration 之内）
                 （二）关键帧的类型
                        _interpolationMethod(内插方法)_type（处理得值类型） KeyFrame
                 （三）内插方法：
                       （）线性（Linear）内插：动画将以段持续期间内的固定速度来播放。
                       （）离散（Discrete）内插：动画函数将从一个值跳到下一个没有内插的值
                       （）样条（Spline）内插：样条内插可用于达到更现实的计时效果
                  （四）样条内插中的KeySpline
                        （）KeySpline作用：获取或设置用于定义此关键帧的动画进度的两个控制点。
                         ()应用：KeySpline 来模拟下落的水滴或跳动的球等物体的物理轨迹。
                            a)"渐入"和"渐出"效果应用于动画。
                            b) 对于用户交互效果，例如背景淡入/淡出或控制按钮弹跳等
                            c)以便按照特定的方式来提高或降低动画的更改速率
                         ()在该列中SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00"，这里的两个控制点为
                               (0.6,0.0)和(0.9,0.00)两个控制点
                  (五）组合内插方法：可以在单个关键帧动画中使用具有不同内插类型的关键帧（将以几个内插方法【线性、离散、样条】组合起来）
                 （六）缓动函数：以将自定义算术公式应用于动画。
                 -->
                 <DoubleAnimationUsingKeyFrames
                     Storyboard.TargetName="MyAnimatedTranslateTransform"
                     Storyboard.TargetProperty="X"
                     Duration="0:0:10">
                     <LinearDoubleKeyFrame Value="" KeyTime="0:0:3" />
                     <DiscreteDoubleKeyFrame Value="" KeyTime="0:0:4" />
                     <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="" KeyTime="0:0:6" />
                 </DoubleAnimationUsingKeyFrames>
             </Storyboard>
         </Canvas.Resources>
         <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="" Height="">
             <Rectangle.RenderTransform>
                 <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="" Y="" />
             </Rectangle.RenderTransform>
         </Rectangle>
     </Canvas>
 </UserControl>

文章转自：http://www.cnblogs.com/Joetao/articles/2054005.html