快捷導(dǎo)航

WPF實(shí)現(xiàn)動(dòng)畫效果（二）之From/To/By動(dòng)畫

更新時(shí)間：2022年06月23日 11:20:37 作者：天方

這篇文章介紹了WPF實(shí)現(xiàn)動(dòng)畫效果之From/To/By動(dòng)畫，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

WPF動(dòng)畫效果系列

WPF實(shí)現(xiàn)動(dòng)畫效果（一）之基本概念

WPF實(shí)現(xiàn)動(dòng)畫效果（二）之From/To/By 動(dòng)畫

WPF實(shí)現(xiàn)動(dòng)畫效果（三）之時(shí)間線（TimeLine）

WPF實(shí)現(xiàn)動(dòng)畫效果（四）之緩動(dòng)函數(shù)

WPF實(shí)現(xiàn)動(dòng)畫效果（五）之關(guān)鍵幀動(dòng)畫

WPF實(shí)現(xiàn)動(dòng)畫效果（六）之路徑動(dòng)畫

WPF實(shí)現(xiàn)動(dòng)畫效果（七）之演示圖板

正文

我們所實(shí)現(xiàn)的的動(dòng)畫中，很大一部分是讓一個(gè)屬性在起始值和結(jié)束值之間變化，例如，我在前文中實(shí)現(xiàn)的改變寬度的動(dòng)畫：

    var widthAnimation = new DoubleAnimation()
    {
        From = 0,
        To = 320,
        Duration = TimeSpan.FromSeconds(2),
        RepeatBehavior = RepeatBehavior.Forever,
    };

    button.BeginAnimation(WidthProperty, widthAnimation);

這個(gè)動(dòng)畫實(shí)現(xiàn)了寬度在0和320之間的變化，由于寬度是一個(gè)double型，因此這里用的是DoubleAnimation。對于一些其它常見的類型，如Byte、Color、Int32、Size、Point等，在System.Windows.Media.Animation下都有相應(yīng)的過渡動(dòng)畫實(shí)現(xiàn)，命名規(guī)則是"數(shù)據(jù)結(jié)構(gòu)類型+Animation"這里就不多介紹了。

這種過渡動(dòng)畫一般成為From/To/By 動(dòng)畫，是因?yàn)樗鼈兪峭ㄟ^From、To、By三個(gè)屬性來決定了目標(biāo)屬性的起始值和結(jié)束值。首先我們來看下這三個(gè)屬性代表的意義：

From：起始值，在動(dòng)畫開始的時(shí)候?qū)⒛繕?biāo)屬性設(shè)置為該值
To：結(jié)束值，動(dòng)畫結(jié)束是目標(biāo)屬性為改值
By：偏移值：動(dòng)畫結(jié)束的時(shí)候目標(biāo)屬性為"初始值+偏移值"

很明顯，To和By的效果是有可能沖突的。實(shí)際上，這三個(gè)屬性都是可選設(shè)置的，并且在設(shè)置了To和By的時(shí)候，是會(huì)忽略By屬性的。下面我再通過一些簡單的場景介紹一下這三個(gè)屬性如何組合使用。

由0 變?yōu)?320：From = 0， To = 320
由初始值變?yōu)?20：To = 320
由0變?yōu)槌跏贾担篎rom = 0
由0增大150：From = 0， By = 150
由初始值增大150：By = 150

看了這幾個(gè)用例后，相信大家已經(jīng)大致能明白這三個(gè)參數(shù)的使用方法。

為什么這么設(shè)計(jì)

初一看上去，這種From、To、By的三參數(shù)設(shè)計(jì)得過于復(fù)雜，完全可以用From和To兩個(gè)參數(shù)可以確定，需要用到By的地方通過運(yùn)算獲取。甚至From和To也可以強(qiáng)制要求賦值，這樣就不會(huì)出現(xiàn)From和To都不賦值的這種非法情況了。為什么要這么設(shè)計(jì)呢？我覺得有兩個(gè)原因：

這種比較靈活的方式可以方便將動(dòng)畫和具體的對象分離出來，可以方便復(fù)用和組合。
方便在XAML中使用。如果像我上述的那樣的做法，很多時(shí)候需要取對象的初始值，用XAML編寫復(fù)雜的動(dòng)畫時(shí)，這種操作并不是是很方便。

時(shí)間控制

這里只介紹了如何設(shè)置過渡動(dòng)畫的起始狀態(tài)和終止?fàn)顟B(tài)，動(dòng)畫還有一個(gè)比較重要部分是時(shí)間控制，如動(dòng)畫時(shí)間段的長度、開始時(shí)間、重復(fù)次數(shù)、進(jìn)度的快慢，結(jié)束通知等。這些都是在其基類TimeLine中控制的，下一章將單獨(dú)對其介紹。