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代碼即可。