Windows Phone開發（42）：緩動動畫

前面在討論主要畫面格動畫的時候，我有意把幾個帶緩動動畫的主要畫面格動畫忽略掉，如EasingColorKeyFrame、EasingDoubleKeyFrame和EasingPointKeyFrame，其實為數不多，就這麼幾個。因為我希統一放到這節課程來吹一下easing 函式。

所謂easing 函式，就是我們在代數裡面說的函數，說白了嘛，就是根特定的函數規則，用輸入的值算出最終值，使得動畫在兩個主要畫面格之間不再是均衡過度，而是帶有加/減速或其他效果，當然，還要取決於演算法。

 

比如函數

 

所以，我們看出來了，easing 函式涉及複雜的數學運算，不過，灰常幸運的是，常用的緩函數MS已經為我們封裝好了，這也是從WPF/Silverlight中遷移到WP的，整合性相容性MD的好，所以，在使用的時候，大家可以輕鬆一大把了，因此，當你在練習的時候，記得沖一杯咖啡放在桌上，一邊寫代碼一邊品嘗吧。呵呵，編程快樂，快樂編程。

 

如果你幹過WPF或SL，這些東西你會覺得灰常Easy，我不是第一次強調了，所以說，基礎很重要，把基礎紮實了，無論你學習什麼新玩意兒，都可以一通百通的，不管你信不信，反正我信了。

 

如何你對easing 函式沒有一個直觀的認識也不要緊，下面推薦大家一個遊戲，很好玩的，不玩你學WP會後悔的。遊戲地址：http://samples.msdn.microsoft.com/Silverlight/silverlight_next/Animations/easing_functions_gallery/testpage.html

記住要認真玩，這樣你才會熟悉easing 函式與相關的類。

 

某致理名言說得好，“自己動手，豐衣足食”，還是老規矩，執行個體決定一切，動手幹活吧。

 

演練一、請參考以下XAML代碼構建你的UI。

    <Grid Loaded="gridLoaded">        <Ellipse HorizontalAlignment="Left"                 VerticalAlignment="Top"                 Fill="Orange"                 Width="100"                 Height="100"                 x:Name="elp">            <Ellipse.RenderTransform>                <TranslateTransform x:Name="trm"/>            </Ellipse.RenderTransform>        </Ellipse>                <Grid.Resources>            <Storyboard x:Name="std">                <DoubleAnimationUsingKeyFrames Duration="0:0:8"                                               Storyboard.TargetName="trm"                                               Storyboard.TargetProperty="Y"                                               RepeatBehavior="30">                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>                    <EasingDoubleKeyFrame KeyTime="0:0:8" Value="485">                        <EasingDoubleKeyFrame.EasingFunction>                            <BounceEase Bounciness="3" Bounces="3"/>                        </EasingDoubleKeyFrame.EasingFunction>                    </EasingDoubleKeyFrame>                </DoubleAnimationUsingKeyFrames>            </Storyboard>        </Grid.Resources>    </Grid>

後台C#代碼啟用動畫。

        private void gridLoaded(object sender, RoutedEventArgs e)        {            this.std.Begin();        }

現在，運行上面的樣本，你會發現圓在下落的過程發生了兩次回彈，動畫才結束，而且一開始較慢，後來漸漸加速，這就是easing 函式所產生的效果。

 

 

演練二。

參考以下XAML代碼建立UI介面。

    <Grid Loaded="gridLoaded">        <Rectangle Margin="35" x:Name="rec">            <Rectangle.Fill>                <LinearGradientBrush x:Name="brs" StartPoint="0,0.5" EndPoint="1,0.5">                    <GradientStop Color="Blue" Offset="0"/>                    <GradientStop Color="Yellow" Offset="0.5"/>                    <GradientStop Color="Blue" Offset="1"/>                </LinearGradientBrush>            </Rectangle.Fill>        </Rectangle>                <Grid.Resources>            <Storyboard x:Name="std">                <DoubleAnimationUsingKeyFrames Duration="0:0:10"                                               Storyboard.TargetName="brs"                                               Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)"                                               RepeatBehavior="35"                                               AutoReverse="True">                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.2"/>                    <EasingDoubleKeyFrame KeyTime="0:0:10" Value="0.8">                        <EasingDoubleKeyFrame.EasingFunction>                            <ElasticEase Oscillations="4" Springiness="1"/>                        </EasingDoubleKeyFrame.EasingFunction>                    </EasingDoubleKeyFrame>                </DoubleAnimationUsingKeyFrames>            </Storyboard>        </Grid.Resources>    </Grid>

 

在gridLoaded上右擊，從彈出的菜單中選擇“導航到事件處理常式”，在產生的方法中完成以下C#代碼。

        private void gridLoaded(object sender, RoutedEventArgs e)        {            std.Begin();        }

 

運行程式後，你會看到漸層填充中間黃色的色塊在左右來回移動。

 

 

 

演練三：

請參照以下XAML建立UI。

<phone:PhoneApplicationPage     x:Class="Sample.Page3"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="Portrait" Orientation="Portrait"    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"    shell:SystemTray.IsVisible="True">    <!--LayoutRoot 是包含所有頁面內容的根網格-->    <Grid x:Name="LayoutRoot" Background="Transparent">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <!--TitlePanel 包含應用程式的名稱和網頁標題-->        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">            <TextBlock x:Name="ApplicationTitle" Text="我的應用程式" Style="{StaticResource PhoneTextNormalStyle}"/>            <TextBlock x:Name="PageTitle" Text="頁面名稱" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>        </StackPanel>        <!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Rectangle HorizontalAlignment="Left" VerticalAlignment="Bottom"                       Width="60" Height="45" Fill="White"                       MouseLeftButtonDown="onShow"/>            <TextBlock HorizontalAlignment="Center"                       VerticalAlignment="Center"                       Text="請點擊左下角的白色矩形。"                       TextWrapping="Wrap"                       Margin="30,0,40,0"                       FontSize="45"/>            <StackPanel x:Name="sp" Background="LightBlue"                        Height="180"                        VerticalAlignment="Bottom">                <TextBlock Foreground="Red"                            Margin="20,22,20,20"                           FontSize="32"                           Text="你好，點擊下面的按鈕吧。"/>                <Button Content="確    定" Background="Blue"                        Click="onHide"/>                <StackPanel.RenderTransform>                    <TranslateTransform x:Name="trm"                                        Y="180"/>                </StackPanel.RenderTransform>            </StackPanel>                        <Grid.Resources>                <Storyboard x:Name="stdShow">                    <DoubleAnimationUsingKeyFrames                        Storyboard.TargetName="trm"                        Storyboard.TargetProperty="Y"                        Duration="1">                        <EasingDoubleKeyFrame                            KeyTime="0:0:0" Value="180"/>                        <EasingDoubleKeyFrame                            KeyTime="0:0:1" Value="0">                            <EasingDoubleKeyFrame.EasingFunction>                                <PowerEase Power="10"/>                            </EasingDoubleKeyFrame.EasingFunction>                        </EasingDoubleKeyFrame>                    </DoubleAnimationUsingKeyFrames>                </Storyboard>                                <Storyboard x:Name="stdHide">                    <DoubleAnimationUsingKeyFrames                        Duration="0:0:1"                        Storyboard.TargetName="trm"                        Storyboard.TargetProperty="Y">                        <EasingDoubleKeyFrame KeyTime="0:0:0"                                              Value="0"/>                        <EasingDoubleKeyFrame KeyTime="0:0:1"                                              Value="180">                            <EasingDoubleKeyFrame.EasingFunction>                                <PowerEase Power="10"/>                            </EasingDoubleKeyFrame.EasingFunction>                        </EasingDoubleKeyFrame>                    </DoubleAnimationUsingKeyFrames>                </Storyboard>            </Grid.Resources>        </Grid>    </Grid></phone:PhoneApplicationPage>

分別在onShow和onHide方法上右擊，從彈出的菜單中選擇“導航到事件處理常式”，完成後台代碼邏輯。

        private void onShow(object sender, MouseButtonEventArgs e)        {            if (stdHide.GetCurrentState() != ClockState.Stopped)            {                stdHide.Stop();            }            stdShow.Begin();        }        private void onHide(object sender, RoutedEventArgs e)        {            if (stdShow.GetCurrentState() != ClockState.Stopped)            {                stdShow.Stop();            }            stdHide.Begin();        }

 

現在，運行程式，單擊螢幕左下方的白色矩形，這時候螢幕下方會彈出一個面板，再點擊面板上的按鈕，面板會縮下去。

這樣，使用動畫，我們就做出了一個類似工具條的效果。