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

時間 2020-03-09

標籤 WPF學習第五十一章動畫緩動简体版

原文原文鏈接

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

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

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

1、使用緩動函數動畫

　　動畫緩動的最大優勢是，相對於其餘方法，如基於幀的動畫和關鍵幀動畫，這種方法須要的工做少不少。爲使用動畫緩動，使用某個緩動函數類(繼承自EasingFunctionBase的類)的實例設置動畫對象的EasingFunction屬性。一般須要設置緩動函數的幾個屬性，而且爲了獲得所但願的效果，可能必須使用不一樣的設置，但不須要編寫代碼而且只需不多的XAML。ui

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

<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)。spa

<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，就將一個簡單的動畫從業務的效果修改成精緻美觀的效果，在專業的應用程序中會感受到這種精緻效果。操作系統

2、在動畫開始時應用緩動與動畫結束時應用緩動設計

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

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

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

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

3、緩動函數類

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

表緩動函數

名稱	說明	屬性
BackEase	當使用EaseIn模式應用該緩動函數時，在動畫開始以前來回動畫。當使用EaseOut模式應用該緩動函數時，容許動畫稍微超越而後拉回	Amplitude屬性決定了拉回和超越的量。默認值是1，可減小該屬性值(大於0的任何值)以縮減效果，或增長該屬性值以放大效果
ElasticEase	當使用EaseOut模式應用緩動函數時，使動畫超越其最大值並先後襬動，逐漸減慢。當使用EaseIn模式應用該緩動函數時，動畫在其開始值周圍先後擺動，逐漸增長	Oscillations屬性控制動畫先後擺動的次數（默認值是3），Springiness屬性控制振盪增長或減弱的速度(默認值是3)
BounceEase	執行與ElasticEase緩動函數相似的效果，只是彈跳永遠不會超越初始值或最終值	Bounce屬性控制動畫回跳的次數(默認值是2)，Bounciness屬性決定彈跳增長或減弱的速度(默認值是2)
CircleEase	使用圓函數加速(使用EaseIn模式)或減速(使用EaseOut模式)動畫	無
CubicEase	使用基於時間立方的函數加速(使用EaseIn模式)動畫。其效果與CircleEase相似，可是加速過程更緩和	無
QuadraticEase	使用基於時間平分的函數加速(使用EaseIn模式)或減速(使用EaseOut模式)動畫。效果與CubicEase相似，但加速過程更緩和	無
QuarticEase	使用基於時間4次方的函數加速(使用EaseIn模式)或減速(使用EaseOut模式)動畫。效果和CubicEase以及QuadraticEase相似，但加速過程更明顯	無
QuinticEase	使用基於時間5次方的函數加速(使用EaseIn模式)或減速(使用EaseOut模式)動畫。效果和CubicEase、QuadraticEase以及QuarticEase相似，可是加速過程更明顯	無
SineEase	使用包含正弦計算的函數加速(使用EaseIn模式)或減速(使用EaseOut模式)動畫。加速很是緩和，而且相對於其餘各類緩動函數更接近線性插值	無
PowerEase	使用冪函數f(t)=t^p加速(使用EaseIn模式)或減速(使用EaseOut模式)動畫。根據爲指數p使用的值，可複製Cubic、QuadraticEase、QuarticEase以及QuinticEase	Power屬性用於設置公式中的指數。將該屬性設置爲2會複製QuadraticEase的效果，設置爲3會複製CubicEase的效果。設置爲4會複製QuarticEase的效果。設置爲5會複製QuinticEase效果，或選擇其餘不一樣值，默認值是2
ExponentialEase	使用指數函數f(t)=(e(at)-1)/(e(a)-1)加速(使用EaseIn模式)或減速(使用EaseOut模式)動畫	Exponent屬性用於設置指數(默認值是2)

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

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

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

4、建立自定義緩動函數

　　經過從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>