Silverlight & Blend動畫設計系列九：動畫（Animation）與視圖狀态管理(Visual State Manager)

　Silverlight中的動畫（Animation）與視圖狀态管理(Visual State Manager) 結合使用是非常常見的，動畫用于管理對象在某段事件段内執行的動畫動作，視圖狀态管理則用于控制對象在多個不同的視覺狀态之間切換、導航。本篇主要介紹動畫（Animation）與視圖狀态管理(Visual State Manager)的結合應用，關于視圖狀态管理的詳細内容請大家檢視相關資料。

　　舉一個簡單的示例，比如在開發一個項目中有一個按鈕，當我點選這個按鈕的時候就動态的從某個方向（如從上到下的方向，也就是從螢幕的上方動态的滑動到螢幕中）呈現出一個面闆。

　　　　　　

　　添加Storyboard并選中第一秒時間線，設定border對象的Transform.Y為-296（這個值可以在設計中直接通過滑鼠拖動Border對象确定），然後移動時間線到第三秒位置，設定Transfrom.Y為0。通過還可以在第一秒的時候設定border不透明度值為0%，第三秒的時候設定不透明度為100%，這樣在動畫過程中的效果會更好。

　　　　　　　　

　　通過上圖中布局的Button去觸發動畫開發，編譯運作程式就可以檢視到其效果，當點選按鈕的時候就會看到一個面闆從頂部已模糊到清晰的動畫載入到界面上。另外可以将Border對象預設設定為不顯示(Visibility="Collapsed")，當啟動動畫的時候将其設定為顯示（Visibile）。

<Storyboard x:Name="Storyboard1">

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" 

        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-296"/>

        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>

    </DoubleAnimationUsingKeyFrames>

        Storyboard.TargetProperty="(UIElement.Opacity)">

        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.3"/>

        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>

    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" 

        Storyboard.TargetProperty="(UIElement.Visibility)">

        <DiscreteObjectKeyFrame KeyTime="00:00:00">

            <DiscreteObjectKeyFrame.Value>

                <Visibility>Visible</Visibility>

            </DiscreteObjectKeyFrame.Value>

        </DiscreteObjectKeyFrame>

        <DiscreteObjectKeyFrame KeyTime="00:00:01">

    </ObjectAnimationUsingKeyFrames>

</Storyboard>

 　　以上的整個動畫實作采用的是Border的位置變換實作的，接下來要介紹的就是如何通過視圖狀态管理(Visual State Manager)去實作和上面同樣的功能。首先将界面設計為如下圖所示界面，Border不透明度為30%,預設Y的位置為-298。

　　接下來就是進行狀态的設計了，可以通過“視窗”菜單下的“狀态”選項打開狀态管理框，首先添加狀态組，然後再狀态組下添加兩個狀态，分别命名為In和Out。如下截圖：

　　“In”狀态用于完成面闆從外動态的進入主界面，實際上也就是完成一個位置變換動畫，詳細如下截圖所示：　　

　　“Out”狀态與“In”狀态相反，用于完成面闆從主界面以動畫的形式推出主界面，詳細設計圖下截圖所示：　　

　　

　　在整個進入和退出的動畫狀态中，為了增強使用者體驗以及達到更好的效果，我還特增加了模糊到透明的動畫處理。最終生成的狀态代碼如下：

<VisualStateManager.VisualStateGroups>

    <VisualStateGroup x:Name="VisualStateGroup">

        <VisualState x:Name="In">

            <Storyboard>

                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" 

                    Storyboard.TargetProperty="(UIElement.Visibility)">

                    <DiscreteObjectKeyFrame KeyTime="00:00:00">

                        <DiscreteObjectKeyFrame.Value>

                            <Visibility>Visible</Visibility>

                        </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" 

                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-296"/>

                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>

                </DoubleAnimationUsingKeyFrames>

                    Storyboard.TargetProperty="(UIElement.Opacity)">

                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.3"/>

                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>

            </Storyboard>

        </VisualState>

        <VisualState x:Name="Out">

                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-298"/>

                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0.3"/>

    </VisualStateGroup>

</VisualStateManager.VisualStateGroups>

　　完整的視圖狀态管理代碼如上代碼塊，要進行狀态間的切換可以通過VisualStateManager.GoToState()方法實作，如下代碼塊實作了進入與退出的狀态切換：

private void onInClick(object sender, System.Windows.RoutedEventArgs e)

{

    VisualStateManager.GoToState(this, "In", false);

}

private void onOutClick(object sender, System.Windows.RoutedEventArgs e)

    VisualStateManager.GoToState(this, "Out", false);

本文轉自 beniao 51CTO部落格，原文連結：http://blog.51cto.com/beniao/324752，如需轉載請自行聯系原作者