【WPF學習】第五十一章 動畫緩動

　　線性動畫的一個缺點是，它通常讓人覺得很機械且不能夠自然。相比而言，高級的用戶界面具有模擬真實世界系統的動畫效果。例如，可能使用具有觸覺的下壓按鈕，當單擊時按鈕快速彈回，但是當沒有進行操作時它們會慢慢地停下來，創建真正移動的錯覺。或者，可能使用類似Windows操作系統的最大化和最小化效果，當視窗解決最終尺寸時視窗擴展或收縮的速度會加速。這些細節十分細微，當它們的實現比較完美時可能不會註意到它們。然而，幾乎總會註意到，粗糙的缺少這些更細微特征的動畫會給人留下笨拙的印象。

　　改進動畫並創建更趨自然的動畫的秘訣是改變變化速率。不是創建以固定不變的速率改變的屬性的動畫，而是需要設計根據某種方式加速或減速的動畫。WPF提供了幾種選擇。基於幀的動畫和關鍵幀動畫，這兩種技術都提供了更精細地控制動畫的能力。但實現更趨自然的動畫的最簡單方法是使用預置的緩動函數(easing function)。

　　當使用緩動函數時，仍可通過指定開始和結束屬性值以常規的方式定義動畫。但為了附加這些細節，需要添加預先編寫好的修改動畫過場的數學函數，使動畫在不同的點加速或減速。

一、使用緩動函數

　　動畫緩動的最大優點是，相對於其他方法，如基於幀的動畫和關鍵幀動畫，這種方法需要的工作少很多。為使用動畫緩動，使用某個緩動函數類(繼承自EasingFunctionBase的類)的實例設置動畫對象的EasingFunction屬性。通常需要設置緩動函數的幾個屬性，並且為了得到所希望的效果，可能必須使用不同的設置，但不需要編寫代碼並且只需很少的XAML。

　　例如，分析下麵給出的兩個動畫，這兩個動畫用於按鈕。當用戶將滑鼠移到按鈕上時，使用一小段代碼調用growStoryboard動畫，將按鈕拉伸到400單位。當用戶移動滑鼠使其離開按鈕時，按鈕收縮到其正常尺寸。

<Storyboard x:Name="growStoryboard">
   <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
             To="400" Duration="0:0:1.5"></DoubleAnimation>
</Storyboard>
<Storyboard x:Name="revertStoryboard">
    <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
            Duration="0:0:3"></DoubleAnimation>
</Storyboard>

　　現在，動畫使用線性插值，這意味著按鈕以恆定的機械性的速度增長和收縮。為得到更趨自然的效果，可使用緩動函數。下麵的示例添加了名為ElasticEase的緩動函數。最終效果是按鈕彈跳出其完整寬度，然後迅速彈回一點，接著在此擺動超出其完整尺寸（但比上一次稍少一點），再以稍小的幅度迅速彈回，等等，隨著運動的減弱不斷地重覆這一跳動模式。之後逐漸進入緩和的10此振蕩。Oscillations屬性控制最終跳動的次數。ElasticEase類提供了另一個在該例中沒有使用的屬性：Springiness。該屬性的值越大，後續的每個振蕩靜止得越快(預設值是3)。

<Storyboard x:Name="growStoryboard">
    <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
                                     To="400" Duration="0:0:1.5">
           <DoubleAnimation.EasingFunction>
                  <ElasticEase Oscillations="10" EasingMode="EaseOut"></ElasticEase>
            </DoubleAnimation.EasingFunction>
      </DoubleAnimation>
</Storyboard>

　　為真正理解該標記和前面緩動函數的示例之間的區別，需要試一下該動畫。變化是顯著的。僅時候用一行XAML，就將一個簡單的動畫從業務的效果修改為精緻美觀的效果，在專業的應用程式中會感覺到這種精緻效果。

二、在動畫開始時應用緩動與動畫結束時應用緩動

　　在繼續分析不同的緩動函數前，理解緩動函數的應用時機很很重要的。所有緩動函數類都繼承自EasingFunctionBase類，並且繼承了EasingMode屬性。該屬性具有三個可能值：EaseIn(該值意味著在動畫開始時應用緩動效果)、EaseOut(該值意味著在動畫結束時應用緩動效果)、EaseInOut(該值意味著在動畫開始和結束時應用緩動效果——將EaseIn用於動畫的前半部分，將EaseOut用於動畫的後半部分)。

　　在上面的示例中，growStoryboard中的動畫使用EaseOut模式。因此，逐漸減弱的跳動序列發生於動畫的末尾。

　　如果將ElasticEase函數的緩動模式切換為EaseIn，跳動將在動畫的開始部分發生。按鈕手勢使其寬度比開始值更小一點，然後擴展寬度使其超過開始值，繼而再稍多地收縮回一點，持續這種模式以逐漸地增加振蕩直到自由振蕩並擴展剩餘的部分(使用ElasticEase.Osicillations屬性控制振蕩次數)。

　　最後，EaseInOut模式創建更新穎的效果，在動畫的前半部分是振蕩動畫的開始，接下來在動畫的後半部分是振蕩動畫的結束。

三、緩動函數類

　　WPF提供了11個緩動函數類，所有這些類都位於熟悉的System.Windows.Media.Animation名稱控制項中。下表描述了所有緩動函數類，併列出了它們的重要屬性。請記住，每個緩動函數類還提供了EasingMode屬性，用於控制是影響動畫的開始(EaseIn)、是影響動畫的結束(EaseOut)還是同時影響動畫的開始和結束(EaseInOut)。

表 緩動函數

　　許多緩動函數提供了類似但隱約不同的效果。為成功地使用動畫緩動，需要決定使用哪個緩動函數，以及如何進行配置。通常，這個過程需要一點試錯的體驗。有兩個資源可提供幫助。

　　首先，WPF文檔為每個緩動函數的行為提供了插圖示例，顯示動畫如何隨著時間修改屬性值。查看這些插圖是理解緩動函數作用的好方法。

　　其次，Microsoft提供了幾個範常式序，可使用這些範例播放不同的緩動函數，並嘗試不同的屬性值。最方便的範例之一是Silverlight應用程式。

四、創建自定義緩動函數

　　通過從EasingFunctionBase繼承自己的類，並重載EaseInCore()和CreateInstanceCore()方法，可創建自定義緩動效果。這是一個非常專業的技術，因為大部分開發人員能通過配置標準的緩動函數來獲得所希望的效果。然而，如果確實決定創建自定義緩動函數，將發現該過出奇簡單。

　　需要編寫的幾乎所有邏輯都在EaseInCore()方法中運行。該方法接受一個規範化的時間值——本質上，是表示動畫進度的從0到1之間的值。當動畫開始時，規範化得時間值是0。它從該點開始增加，直到在動畫結束點達到1。

protected override double EaseInCore(double normalizedTime)
{...}

　　在動畫運行期間，每次更新動畫的值時WPF都會調用EaseInCore()方法。確切的調用頻率取決於動畫的幀率，但可以預期每秒調用EaseInCore()方法的次數接近60。

　　為執行緩動，EaseInCore()方法採用規範化的時間值，並以某種方式對其進行調整。EaseInCore()方法返回的調整後的值，隨後被用於調整動畫的進度。例如，如果EaseInCore()方法返回0，動畫被返回到其開始點。如果EaseInCore()方法返回1，動畫跳到其結束點。然而，EaseInCore()方法的返回值並不局限於這一範圍——例如，可返回1.5以使動畫過渡運行自身50%。已經看到過用於緩動函數(如ElasticEase)的這類效果。

　　下麵給出的EaseInCore()方法版本根本不執行任何工作。該版本返回規範化的時間值，意味著動畫將均勻展開，就像是沒有緩動。

protected override double EaseInCore(double normalizedTime)
{
   return normalizedTime;     
}

　　下麵的EaseInCore()方法版本通過計算規範化時間值得立方，複製CubicEase函數的效果。因為規範化的時間值是小數，其立方值是更小的小數；所以該方法的效果是最初減慢動作動畫，並當規範化的時間值(及其立方值)解決與1時導致動畫加速。

protected override double EaseInCore(double normalizedTime)
        {
            return Math.Pow(normalizedTime, 3);
        }

　　最後，下麵是一個執行更有趣內容的自定義緩動函數——以一定的隨機量便宜規範化的時間值，導致分散的抖動效果。可使用提供的Jitter依賴性屬性（在一個較小的範圍內）調整抖動的幅度，該屬性接受從0到2000之間的數值。

public class RandomJitterEase : EasingFunctionBase
    {

        // Store a random number generator.
        private Random rand = new Random();

        protected override double EaseInCore(double normalizedTime)
        {
            //To see the values add code like this:
            //System.Diagnostics.Debug.WriteLine(...);

            // Make sure there's no jitter in the final value.
            if (normalizedTime == 1) return 1;

            // Offset the value by a random amount.
            return Math.Abs(normalizedTime - (double)rand.Next(0, 10) / (2010 - Jitter));
        }

        public int Jitter
        {
            get { return (int)GetValue(JitterProperty); }
            set { SetValue(JitterProperty, value); }
        }

        public static readonly DependencyProperty JitterProperty =
            DependencyProperty.Register("Jitter", typeof(int), typeof(RandomJitterEase),
            new UIPropertyMetadata(1000), new ValidateValueCallback(ValidateJitter));

        private static bool ValidateJitter(object value)
        {
            int jitterValue = (int)value;
            return ((jitterValue <= 2000) && (jitterValue >= 0));
        }

        // This required override simply provides a live instance of your easing function.
        protected override Freezable CreateInstanceCore()
        {
            return new RandomJitterEase();
        }
    }

下麵是緩動函數在XAML中使用的示例：

<Window x:Class="Animation.CustomEasingFunction"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Animation"
        Title="CustomEasingFunction" Height="300" Width="600">
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
            Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)"
            To="500" Duration="0:0:10">
                        </DoubleAnimation>
                        <DoubleAnimation
            Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)"
            To="500" Duration="0:0:10">
                            <DoubleAnimation.EasingFunction>
                                <local:RandomJitterEase EasingMode="EaseIn" Jitter="1000"></local:RandomJitterEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Canvas Margin="10">
        <Ellipse Name="ellipse1" Canvas.Left="0" Fill="Red" Width="20" Height="20"></Ellipse>

        <Ellipse Name="ellipse2" Canvas.Top="100" Canvas.Left="0" Fill="Red" Width="20" Height="20"></Ellipse>
    </Canvas>
</Window>

　　效果圖如下所示，可以看到上面的圓圈平滑向右移動，下麵的圓圈來回緩動向右移動：