1. 程式人生 > >WPF中的動畫——(一)基本概念

WPF中的動畫——(一)基本概念

問題 code AD soft msdn 動畫 易維 sof lean

原文:WPF中的動畫——(一)基本概念

WPF的一個特點就是支持動畫,我們可以非常容易的實現漂亮大方的界面。首先,我們來復習一下動畫的基本概念。計算機中的動畫一般是定格動畫,也稱之為逐幀動畫,它通過每幀不同的圖像連續播放,從而欺騙眼和腦產生動畫效果。其原理在維基百科上有比較詳盡的解釋,這裏就不多介紹了。

也就是說,我們要產生動畫,只需要連續刷新界面即可。例如,我們要實現一個寬度變化的按鈕的動畫,可以用如下方式來實現:

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內將其高度從0變為320,重復播放。

這段代碼雖然實現了動畫效果,但它是通過計時器更新的傳統做法,在WinForm下也能實現。在WPF中,正統的實現動畫方式為:

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的動畫的實現方式有如下優點:

一、簡潔

這個是非常明顯的,WPF的動畫的代碼非常容易理解,Timer的版本則要難懂得多。當然,我們也可以通過封裝,使得用Timer也能用類似的API實現動畫。但動畫的API並不是僅僅這麽一點,要把整個動畫框架的API都封裝也沒有那麽容易。

二、和XAML無縫集成

這個就是WPF的獨有技術了,得益於XAML強大的表述能力,我們可以寫出非常強大且容易維護的動畫。(這裏就不舉例了,後續文章中再做介紹)這點WinFom的Timer版本是無法做到的。

三、流暢性

如果將這兩種實現方式一起跑起來比較一下就會發現,Timer實現的版本明顯要卡頓,並且並沒有精準的按照我們設計的那樣運動。具體原因為:

Timer精度的問題:由於是改UI控件的屬性(按鈕的寬度),因此必須在UI線程上進行,因此DispatcherTimer 操作與其他操作一樣需要放置到 Dispatcher 隊列中,它並不保證恰好在改時間間隔中。它並不適合動畫這種間隔很短的計時。

幀率的問題:逐幀動畫的流暢性一般取決於每秒更新的幀數,也就是常說的幀率。人眼睛上限是70幀,而我這裏代碼中的Timer的固定了為20幀,因此是能明顯感覺到卡頓的。而WPF的動畫則不然,從它的API中可以看到,它是沒有幀率的設置的。實際上,它是根據計算機的性能和當前進程的繁忙程度盡可能增大幀率的,因此WPF的動畫是遠大於20幀的,因此要流暢得多。

那麽,是否只要修改參數,加大Timer的版本的幀率,也可以實現同樣流暢的動畫呢? 試了一下,就算修改參數,也是無法達到WPF版本的流暢程度的。我認為原因主要有如下兩點,

  1. DispatcherTimer精度不夠,無法實現大幀率下準確刷新。
  2. 通過簡單的設置參數很難像WPF那樣幀率根據計算機的性能和當前進程的繁忙程度智能匹配幀率。幀率設置過低,動畫不流暢,設置過大,處理不過來仍然不流暢。並且UI線程的忙碌程度是會動態變化的,幀率也需要相應調整,這些都無法通過Timer來簡單的處理。

總之,通過Timer定時更新的方式並不適合用來實現動畫。因此還是有必要學習一下WPF的動畫框架的,後面我將陸續寫一系列文章進行一些簡單的介紹。如果要系統的學習,建議參看以下微軟的官方文檔: http://msdn.microsoft.com/zh-cn/library/ms752312(v=vs.110).aspx

WPF中的動畫——(一)基本概念