• 【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)。

    表 緩動函數

     名    稱    說     明    屬    性
    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應用程序。

    四、創建自定義緩動函數

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

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

     

    posted @ 2020-03-01 18:34  Peter.Luo  閱讀(...)  評論(...編輯  收藏
    贵州快三平台贵州快三主页贵州快三网站贵州快三官网贵州快三娱乐贵州快三开户贵州快三注册贵州快三是真的吗贵州快三登入贵州快三快三贵州快三时时彩贵州快三手机app下载贵州快三开奖 申扎县 | 陆丰市 | 吉木乃县 | 贞丰县 | 上饶县 | 芒康县 | 耿马 | 大港区 | 吉安市 | 松滋市 | 南岸区 | 定边县 | 阿瓦提县 | 银川市 | 焉耆 | 茌平县 | 滨海县 | 武夷山市 | 丰镇市 | 仪征市 | 芷江 | 建阳市 | 芮城县 | 永胜县 | 古丈县 | 阿拉善右旗 | 子长县 | 苏州市 | 黎平县 | 多伦县 | 宾阳县 | 南和县 | 桂阳县 | 镇安县 | 宣武区 | 绩溪县 | 辉县市 | 益阳市 | 广东省 | 衡山县 | 诸城市 | 江门市 | 临沂市 | 南靖县 | 山阴县 | SHOW | 蒙山县 | 淮北市 | 大名县 | 石泉县 | 广德县 | 石林 | 宁安市 | 白玉县 | 临江市 | 惠州市 | 古浪县 | 营口市 | 舞阳县 | 海南省 | 彰化县 | 晋城 | 翁牛特旗 | 牡丹江市 | 富锦市 | 长岛县 | 兴化市 | 普陀区 | 牙克石市 | 格尔木市 | 纳雍县 | 邵阳市 | 双城市 | 精河县 | 安化县 | 蛟河市 | 尼勒克县 | 平和县 | 报价 | 广饶县 | 阿拉尔市 | 金华市 | 佛冈县 | 台湾省 | 扎赉特旗 | 商丘市 | 扶绥县 | 庆城县 | 新闻 | 青海省 | 北辰区 | 尚义县 | 门源 | 景德镇市 | 石城县 | 邓州市 | 漳浦县 | 大名县 | 会泽县 | 淅川县 | 长治县 | 嵩明县 | 安阳县 | 花莲县 | 河南省 | 维西 | 桐庐县 | 泸西县 | 鞍山市 | 全椒县 | 芒康县 | 香河县 | 乐陵市 | 张家界市 | 梓潼县 | 丹凤县 | 盈江县 | 志丹县 | 洛隆县 | 桐梓县 | 象州县 | 邹城市 | 鹤壁市 | 黑河市 | 托里县 | 会理县 | 三台县 | 永春县 | 台南市 | 分宜县 | 玛纳斯县 | 博爱县 | 彰化县 | 仪征市 | 芦山县 | 怀仁县 | 夏津县 | 攀枝花市 | 凤山市 | 五台县 | 辽宁省 | 江西省 | 会昌县 | 兴山县 | 弋阳县 | 湘乡市 | 潢川县 | 临邑县 | 临江市 | 读书 | 黎平县 | 扶沟县 | 嘉荫县 | 军事 | 诸城市 | 鹤岗市 | 呈贡县 | 密山市 | 札达县 | 南汇区 | 兴业县 | 彰化县 | 青田县 | 长寿区 | 密云县 | 梨树县 | 宜兴市 | 沂水县 | 开封市 | 黄冈市 | 湖南省 | 吉安市 | 德兴市 | 云霄县 | 汾阳市 | 班玛县 | 石门县 | 伊春市 | 静海县 | 浦县 | 五原县 | 马关县 | 宁安市 | 彝良县 | 固镇县 | 易门县 | 丹东市 | 宜丰县 | 龙陵县 | 基隆市 | 巴林左旗 | 西平县 | 盐亭县 | 纳雍县 | 丽江市 | 香格里拉县 | 永登县 | 万荣县 | 肃宁县 | 延安市 | 赫章县 | 伊川县 | 隆尧县 | 云南省 | 阿拉善盟 | 临高县 | 大城县 |