【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 = https://www.cnblogs.com/Peter-Luo/p/(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>

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

標籤：WPF

上一篇：【WPF學習】第五十章 故事板

下一篇：【WPF學習】第五十二章 影片性能