WPF动画设置（转）
一、AnimationTimeline，WPF中的集成关系请查看网址：http://msdn.microsoft.com/en-us/library/system.windows.media.animation.animationtimeline(v=vs.110).aspx#inheritanceContinued
一个简单的动画如下代码所示：
da.To = 300;
da.Duration = new Duration(TimeSpan.Parse("0:0:15")); //从动画开始到结束所用的时间
da.AccelerationRatio = 0.4; //加速比率一般与DecelerationRatio相对应，除加速减速的部分其他全是匀速
da.DecelerationRatio = 0.2;
da.AutoReverse = true; //是否自动回复到初始状态
da.RepeatBehavior = RepeatBehavior.Forever; //设置动画的重复特性
btn1.BeginAnimation(Canvas.LeftProperty, da);
btn1.BeginAnimation(Canvas.TopProperty, da);
一般动画的使用步骤如下：
1.选定动画对象。2.选定动画对象的相关属性。3.根据相关属性的数据类型，选定相应的动画类，如上例中的Width为double类型，选用DoubleAnimation的动画类。4.设置动画的相关属性，如上例中的From To等。5.选择动画的出发条件，如本例中的点击鼠标触发动画。6.调用所要动画对象中的BeginAnimation方法，该方法把DoubleAnimation和按钮的WidthProperty联系了起来。
动画的相关属性如加速比率AccelerationRatio、减速比率DecelerationRatio、动画时间Duration、开始时刻BeginTime、结束时刻、动画重复次RepeatBehavior、动画终止状态FillBehavior、是否返回到开始状态AutoReverse、相关属性的范围From To 等内容，请查阅帮助文档。相关属性的动画范围By 是在原有属性的基础上加上（By为正）或者减去（By为负）。IsAdditive为True是，相关属性的动画从From+相关属性的当前值。IsCumulative针对连续变化的相关属性动画，为True时，第二次动画的from和to是在原有的基础上加上原来的from和to。
二、StoryBoard，WPF动画的基本操作如前面所叙述的那样，其中都是对一些动画基类的操作，他们的基类都继承自AnimationTimeline，其他的动画类如下图的组织方式。
StoryBoard在WPF动画中起着至关重要的作用，他支持多个动画的并发进行，并且WPF专门设计了BeginStoryBoard，他是一个触发器类，他为StoryBoard提供了宿主（只能含有一个storyboard）。
<GroupBox Header="Storyboard">
<Canvas Height="50">
<Ellipse Name="mypp" Canvas.Left="0" Canvas.Top="12" Width="50" Height="50">
<Ellipse.Fill>
<SolidColorBrush x:Name="brushColor" Color="DarkBlue"></SolidColorBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseEnter">
<BeginStoryboard Name="AnimationColor">
<Storyboard >
<ColorAnimation Storyboard.TargetName="brushColor"
Storyboard.TargetProperty="Color"
To="Red" Duration="0:0:8"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Ellipse.MouseEnter">
<BeginStoryboard Name="DoubleAnimation">
<Storyboard >
<DoubleAnimation Storyboard.TargetName="mypp"
Storyboard.TargetProperty="Width"
To="288"
Duration="0:0:8"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
<PauseStoryboard BeginStoryboardName="DoubleAnimation"/>
<PauseStoryboard BeginStoryboardName="AnimationColor"/>
</EventTrigger>
<EventTrigger RoutedEvent="Ellipse.MouseLeftButtonUp">
<ResumeStoryboard BeginStoryboardName="DoubleAnimation"/>
<ResumeStoryboard BeginStoryboardName="AnimationColor"/>
</EventTrigger>
<EventTrigger RoutedEvent="Ellipse.MouseRightButtonUp">
<SeekStoryboard BeginStoryboardName="AnimationColor"/>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
</GroupBox>
三、KeyFrame KeyFrame动画就是程序员需要为某个相关属性在特定的时间内设置特定的值，如Bool、Char等类型在基本动画类中并没有相应的动画类，我们可以利用KeyFrame进行手动设置，在特定的时间设置相应的值。其中KeyFrame包括线性KeyFrame和非线性KeyFrame（spline KeyFrame），以及离散KeyFrame（Discrate KeyFrame）。其中线性和非线性都是以过度的形式进行慢慢的变化，而离散的KeyFrame完全是突然的变化，在相应的时刻变换为相应的值，完全没有过度。
使用示例如下：
<Window.Resources>
<!--线性变化-->
<Storyboard x:Key="myBoard" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="circle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="00:00:00" Value="AliceBlue"/>
<LinearColorKeyFrame KeyTime="00:00:03" Value="Blue"/>
<LinearColorKeyFrame KeyTime="00:00:08" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(TranslateTransform.Y)">
<LinearDoubleKeyFrame KeyTime="00:00:00" Value=" 0"/>
<LinearDoubleKeyFrame KeyTime="00:00:03" Value="296"/>
<LinearDoubleKeyFrame KeyTime="00:00:08" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(TranslateTransform.X)">
<LinearDoubleKeyFrame KeyTime="00:00:00" Value=" 0"/>
<LinearDoubleKeyFrame KeyTime="00:00:03" Value="296"/>
<LinearDoubleKeyFrame KeyTime="00:00:08" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--离散KeFrame-->
<Storyboard x:Key="myBoard2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:3"
Storyboard.TargetName="circle1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame KeyTime="00:00:00" Value="Red"/>
<DiscreteColorKeyFrame KeyTime="00:00:01" Value="Green"/>
<DiscreteColorKeyFrame KeyTime="00:00:02" Value="Yellow"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:3"
Storyboard.TargetName="circle2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame KeyTime="00:00:00" Value="Green"/>
<DiscreteColorKeyFrame KeyTime="00:00:01" Value="Red"/>
<DiscreteColorKeyFrame KeyTime="00:00:02" Value="Yellow"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:3"
Storyboard.TargetName="circle3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame KeyTime="00:00:00" Value="Yellow"/>
<DiscreteColorKeyFrame KeyTime="00:00:01" Value="Green"/>
<DiscreteColorKeyFrame KeyTime="00:00:02" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource ResourceKey=myBoard}"/>
<BeginStoryboard Storyboard="{StaticResource ResourceKey=myBoard2}"/>
</EventTrigger>
</Window.Triggers>
在主窗口中定义如下两个元素，
<GroupBox Header="线性KeyFrame">
<Canvas Height="20">
<Ellipse Name="circle" Width="30" Height="30" Stroke="Red" StrokeThickness="3" RenderTransformOrigin="0.5,0.5">
<Ellipse.Fill>
<SolidColorBrush Color="Blue"/>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Canvas>
</GroupBox>
<GroupBox Header="离散KeyFrame">
<StackPanel Orientation="Horizontal">
<Ellipse Name="circle1" Fill="Black" Width="50" Height="50"/>
<Ellipse Name="circle2" Fill="Black" Width="50" Height="50"/>
<Ellipse Name="circle3" Fill="Black" Width="50" Height="50"/>
</StackPanel>
</GroupBox>
非线性KeyFrame的使用
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />替换相应的线性KeyFrame代码即可。
GIS需要我们添砖加瓦
浙公网安备 33010602011771号