WPF界面設計技巧（7）—模拟電梯升降的緩動動畫

如同Flash一樣，WPF的亮點之一也在于其擅于表現平滑的動畫效果，但以移動動畫來說，僅憑簡單的起始位置、目标位置，所産生的動畫仍會非常生硬，這種動畫忽略了移動開始時的加速過程與移動結束時的減速過程。

WPF在關鍵幀動畫中提供了樣條内插(Spline)型的關鍵幀，用以控制變化的速率曲線，但這東西實在有些複雜，且不夠形象化，我研究很久也沒明白如何實作“緩入——緩出”的效果，随後我從一本經典牛X卻鮮有人知的過時的FlashMX教程中提取了一個緩動函數，我們将用這個函數來較真實地模拟電梯的升降行為。

至于那本牛X的書，我以後會為大家介紹，我個人認為，那本書應當作為平面動畫程式設計的必修經典，而它卻被粗爛地印刷，并一直擺在書店裡不引人注目的位置。

進入正題：

首先在界面設計器中添加一個 Rectangle ，用以代表直升電梯，然後添加4個 RadioButton 代表幾個樓層的呼叫按鈕。

稍加美化，即為下圖所示：

RadioButton 的樣式直接用來當電梯按鈕，略顯生硬，我們用下面的代碼來美化一下它：

Code

現在就比較帥了：

接下來為所有 RadioButton 添加統一的事件處理函數：

至此界面部分的全部代碼如下，需要注意的是，所有元素都需要手動調整一下它們在Grid中的對齊方位，将其設為 Left 和 Top。要知道，設計器會在你拖動它們的時候為其胡亂改變對其方位，這會使你的元素沒有統一的定位标準，導緻幾乎沒法用代碼統一操控它們的位置。

在背景書寫事件處理函數代碼：

請不要驚訝我使用中文命名函數，假如你看過我自己寫的程式的源代碼，你就會對此保持沉默。

這就是傳說中的中文函數“開始升降”：

在這個函數中，我們建立了一個 Thickness 的關鍵幀動畫，Thickness 通常用來代表一個元素的上下左右4邊，比如 Border 四個邊的粗細就是用 Thickness 描述的，而這裡的Margin 屬性也是 Thickness 類型。

一些要點我寫在了圖裡，這裡就不累述了。

“緩動計算”，是的，又一個神奇的中文函數，你可以在下面完整的源碼中看看它是如何運算的，至少我是對它的内容毫無興趣。

現在編譯運作吧，随便點選一個樓層，你将會看到電梯平緩的起步，然後平緩的停靠在你所選的樓層上。

當然，即使是這樣具有緩動效果的電梯，乘客也是很難生還的，但至少會比生硬的上飛下墜要好很多啦。

<a href="http://files.cnblogs.com/SkyD/WPF_ANI_1.rar">源代碼下載下傳</a>

本文轉自斯克迪亞部落格園部落格，原文連結：http://www.cnblogs.com/SkyD/archive/2008/07/22/1248829.html，如需轉載請自行聯系原作者