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)畫效果（七）之演示圖板

正文

WPF的一個(gè)特點(diǎn)就是支持動(dòng)畫，我們可以非常容易的實(shí)現(xiàn)漂亮大方的界面。首先，我們來(lái)復(fù)習(xí)一下動(dòng)畫的基本概念。計(jì)算機(jī)中的動(dòng)畫一般是定格動(dòng)畫，也稱之為逐幀動(dòng)畫，它通過(guò)每幀不同的圖像連續(xù)播放，從而欺騙眼和腦產(chǎn)生動(dòng)畫效果。其原理在維基百科上有比較詳盡的解釋，這里就不多介紹了。

也就是說(shuō)，我們要產(chǎn)生動(dòng)畫，只需要連續(xù)刷新界面即可。例如，我們要實(shí)現(xiàn)一個(gè)寬度變化的按鈕的動(dòng)畫，可以用如下方式來(lái)實(shí)現(xiàn)：

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        var timer = new System.Windows.Threading.DispatcherTimer();
        timer.Tick += new EventHandler(OnTimedEvent);
        timer.Interval = TimeSpan.FromSeconds(1.0 / 20);
        timer.Start();
    }

    int index = 0;
    private void OnTimedEvent(object sender, EventArgs e)
    {
        index++;
        if (index > 40)
            index = 0;

        button.Width = 8 * (index++);
    }

這段代碼不難理解，就是每隔1/20秒更新一次按鈕的寬度，在2s內(nèi)將其高度從0變?yōu)?20，重復(fù)播放。

這段代碼雖然實(shí)現(xiàn)了動(dòng)畫效果，但它是通過(guò)計(jì)時(shí)器更新的傳統(tǒng)做法，在WinForm下也能實(shí)現(xiàn)。在WPF中，正統(tǒng)的實(shí)現(xiàn)動(dòng)畫方式為：

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        var widthAnimation = new DoubleAnimation()
        {
            From = 0,
            To = 320,
            Duration = TimeSpan.FromSeconds(2),
            RepeatBehavior = RepeatBehavior.Forever,
        };

        button.BeginAnimation(WidthProperty, widthAnimation);
    }

相比較而言，WPF的動(dòng)畫的實(shí)現(xiàn)方式有如下優(yōu)點(diǎn)：

一、簡(jiǎn)潔

這個(gè)是非常明顯的，WPF的動(dòng)畫的代碼非常容易理解，Timer的版本則要難懂得多。當(dāng)然，我們也可以通過(guò)封裝，使得用Timer也能用類似的API實(shí)現(xiàn)動(dòng)畫。但動(dòng)畫的API并不是僅僅這么一點(diǎn)，要把整個(gè)動(dòng)畫框架的API都封裝也沒(méi)有那么容易。

二、和XAML無(wú)縫集成

這個(gè)就是WPF的獨(dú)有技術(shù)了，得益于XAML強(qiáng)大的表述能力，我們可以寫出非常強(qiáng)大且容易維護(hù)的動(dòng)畫。（這里就不舉例了，后續(xù)文章中再做介紹）這點(diǎn)WinFom的Timer版本是無(wú)法做到的。

三、流暢性

如果將這兩種實(shí)現(xiàn)方式一起跑起來(lái)比較一下就會(huì)發(fā)現(xiàn)，Timer實(shí)現(xiàn)的版本明顯要卡頓，并且并沒(méi)有精準(zhǔn)的按照我們?cè)O(shè)計(jì)的那樣運(yùn)動(dòng)。具體原因?yàn)椋?/p>

Timer精度的問(wèn)題：由于是改UI控件的屬性（按鈕的寬度），因此必須在UI線程上進(jìn)行，因此DispatcherTimer 操作與其他操作一樣需要放置到 Dispatcher 隊(duì)列中，它并不保證恰好在改時(shí)間間隔中。它并不適合動(dòng)畫這種間隔很短的計(jì)時(shí)。

幀率的問(wèn)題：逐幀動(dòng)畫的流暢性一般取決于每秒更新的幀數(shù)，也就是常說(shuō)的幀率。人眼睛上限是70幀，而我這里代碼中的Timer的固定了為20幀，因此是能明顯感覺(jué)到卡頓的。而WPF的動(dòng)畫則不然，從它的API中可以看到，它是沒(méi)有幀率的設(shè)置的。實(shí)際上，它是根據(jù)計(jì)算機(jī)的性能和當(dāng)前進(jìn)程的繁忙程度盡可能增大幀率的，因此WPF的動(dòng)畫是遠(yuǎn)大于20幀的，因此要流暢得多。

那么，是否只要修改參數(shù)，加大Timer的版本的幀率，也可以實(shí)現(xiàn)同樣流暢的動(dòng)畫呢？ 試了一下，就算修改參數(shù)，也是無(wú)法達(dá)到WPF版本的流暢程度的。我認(rèn)為原因主要有如下兩點(diǎn)，

• DispatcherTimer精度不夠，無(wú)法實(shí)現(xiàn)大幀率下準(zhǔn)確刷新。
• 通過(guò)簡(jiǎn)單的設(shè)置參數(shù)很難像WPF那樣幀率根據(jù)計(jì)算機(jī)的性能和當(dāng)前進(jìn)程的繁忙程度智能匹配幀率。幀率設(shè)置過(guò)低，動(dòng)畫不流暢，設(shè)置過(guò)大，處理不過(guò)來(lái)仍然不流暢。并且UI線程的忙碌程度是會(huì)動(dòng)態(tài)變化的，幀率也需要相應(yīng)調(diào)整，這些都無(wú)法通過(guò)Timer來(lái)簡(jiǎn)單的處理。

總之，通過(guò)Timer定時(shí)更新的方式并不適合用來(lái)實(shí)現(xiàn)動(dòng)畫。因此還是有必要學(xué)習(xí)一下WPF的動(dòng)畫框架的，后面我將陸續(xù)寫一系列文章進(jìn)行一些簡(jiǎn)單的介紹。如果要系統(tǒng)的學(xué)習(xí)，建議參看以下微軟的官方文檔： http://msdn.microsoft.com/zh-cn/library/ms752312(v=vs.110).aspx

到此這篇關(guān)于WPF實(shí)現(xiàn)動(dòng)畫效果之基本概念的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論