WPF 按鈕動畫效果製作

概要：本文將通過WPF按鈕與Flash按鈕的製作流程的對比講解如何用Xaml實現按鈕動畫，同時你也還能學習Expression Blend。本文假設你正在製作一套點飲料的系統，現在你要做的就是製作出一個點咖啡按鈕，使用者點了之後就會給使用者下咖啡訂單。當然這樣的按鈕要越直觀越好，要讓使用者一看就明白這是用來點咖啡的按鈕，這就是對這個按鈕的要求。

本文使用的開發環境：Expression Blend 2 sp1, Expression Design

閱讀本文前建議先閱讀《WPF揭秘》中的以下章節，學習一些基礎概念：

Xaml，《WPF揭秘》第2章
樣式，《WPF揭秘》10.1
控制項範本，《WPF揭秘》10.2
觸發器，《WPF揭秘》10.1.2
動畫和Storyboard，《WPF揭秘》第13章
主要畫面格，《WPF揭秘》13.3
 

本文

任何一個學過Flash的人首先學習的內容一般都是按鈕的製作，在Flash中按鈕有四種狀態，即Up（未點擊）, Over（滑鼠移至上方）, Down（滑鼠按下）, Hit（滑鼠點擊）。

如果要為某種狀態添加動畫，則需要用一個內嵌的MovieClip來實現，當然本文並不是講解Flash的教程，就不多做介紹了。

很多WPF的初學者覺得Flash似乎比微軟的東西好用，因為Flash有ButtonClip，很直觀很方便。其實呢，從軟體開發角度講，WPF的事件模型更科學，因為程式中所有的動畫、視覺效果都是由事件觸發的，在WPF中如果要實作類別似Flash中的Up, Down, Over, Hit四種狀態也並非難事，你其實很容易找到對應的屬性和事件，下面我列出一張表，大家看了就很容易明白了：

Flash

WPF

Up MouseLeftButtonUp (Event)
Down MouseLeftButtonDown (Event)
Over IsMouseOver (Property)
Hit IsPressed (Property)
是不是發覺WPF的事件和屬性更有針對性，也表達得更清楚些呢？當然我們必須承認Flash有一點做得很好——它把Button所對應的最常用的四種狀態放在了一個單獨的編輯檢視（即ButtonClip編輯器）中，這樣初學者很容易上手，也許Expression Blend以後的版本可以借鑒一下。

做任何一樣東西，我們必須瞭解最終我們到底要做什麼，所以先來看看：

你是不是有點等不及啦，那我們就開始動手吧！

畫圖

仔細分析下你會發現其實整個按鈕中最關鍵的還是那個冒著熱氣的杯子，所以呢，我們先要把杯子畫出來，用什麼畫呢？自然是用Expression Design。

裡面畫了幾個杯子的草稿，搞設計的朋友都知道這其實就是在做Graphics，怎麼畫不是這篇文章的重點，大家自己揣摩吧。要注意一點，每次畫完一個杯子一定要把幾個Path放在一個Group中，這樣才能保證匯出的時候一個Canvas中就是一個杯子的圖形，匯出的Xaml與下面的代碼類似：
--------------

XAML code

<Viewbox x:Name="Group" Width="30.8005" Height="32.0573" Canvas.Left="35.6441" Canvas.Top="40.7749">    <Canvas Width="30.8005" Height="32.0573">        <Path x:Name="Path" Width="3.01129" Height="16.1666" Canvas.Left="6.25348" Canvas.Top="2.18024" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 7.92015,3.18024C 7.56208,5.32863 8.36821,8.0273 8.25348,10.0135C 8.08681,12.899 7.25348,14.8798 7.25348,17.3469"/>        <Path x:Name="Path_0" Width="3.01129" Height="16.1666" Canvas.Left="10.7747" Canvas.Top="2.27339" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 12.4414,3.27339C 12.0833,5.42178 12.8895,8.12045 12.7747,10.1067C 12.6081,12.9921 11.7747,14.973 11.7747,17.44"/>        <Path x:Name="Path_1" Width="3.01129" Height="16.1667" Canvas.Left="14.8581" Canvas.Top="2.14838" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 16.5247,3.14838C 16.1667,5.29678 16.9728,7.99545 16.8581,9.9817C 16.6914,12.8671 15.8581,14.848 15.8581,17.315"/>        <Path x:Name="Path_2" Width="10.6739" Height="7.81753" Canvas.Left="19.7414" Canvas.Top="19.929" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FFFFFFFF" Data="F1 M 22.9393,21.1666C 25.1893,21.1529 29.1164,20.8922 29.3039,20.9334C 29.8005,21.0424 28.6164,23.7316 26.1476,25.1718C 23.7262,26.5844 23.3768,26.8041 20.7414,26.7355"/>        <Path x:Name="Path_3" Width="24.1439" Height="12.9312" Canvas.Left="0.12096" Canvas.Top="18.8018" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FFFFFFFF" Data="F1 M 1.12678,20.5627C 1.48111,19.7491 22.9913,19.4325 23.2518,20.4012C 23.4669,21.2014 21.0644,30.4402 12.6734,30.7251C 2.88443,31.0573 1,20.8539 1.12678,20.5627 Z "/>    </Canvas></Viewbox>

--------------
如上所示，上面5個杯子會被匯出成5個Viewbox，裡面各有一個Canvas，不過你在Expression Blend中使用時會發現，其實我們只需要Canvas就行了，Viewbox是不用的。

匯出Xaml

好了東西畫完了，下面我們講怎麼把這些圖形匯出成Xaml，並放入Expression Blend中。

在File菜單中你會看到Export功能表項目，點擊它，你會看到下面的對話方塊：

這裡請注意，Format一定要選Xaml WPF Canvas，這樣才能夠保證匯出的Xaml Canvas能夠與WPF程式相容，其他選項都無所謂。

建立WPF應用程式

接下來我們開始使用Expression Blend建立一個簡單的應用程式，當然這個程式的主要目的就是協助我們查看這個按鈕的最終效果。

點Expression Blend的File->New Project菜單，彈出下面的對話方塊：

只要選擇WPF Application就可以了，其他所有選項都可以使用預設項。

緊接著從左邊的工具列中拖出一個Button，放進預設的視窗（Window1.xaml）中（隨便放哪都成），尺寸大小全看個人喜好，我這裡就不給參考值了。

修改控制項範本

右鍵點擊這個按鈕，點Edit Control Parts (Template) => Edit a Copy，進入控制項範本編輯器，類似於Flash的MovieClip編輯器。

這時會彈出一個對話方塊，詢問Button樣式的存放位置，建議選This document後面的Window:Window，當然如果你要做應用程式，把樣式放到Application中也不失為一個不錯的選擇，這樣便於全域管理樣式。

接下來我們要做的步驟很關鍵，大家別開小差哦！

首先我們把Button的控制項範本中的Chrome控制項替換為Grid，最簡單的辦法就是把Grid從工具箱中拖進編輯地區。然後在Grid中加入一個ContentPresenter和Rectangle。

[思考題] 為什麼要多加一個Rectangle？（提示，可以對比一下Flash中ButtonClip的製作，原理是一樣的）

接下來我們就要用上剛才匯出的Xaml了，切換到XAML視圖，把第一個Canvas的代碼拷貝到當前的Grid下面，回到設計檢視，你應該會看到Grid現在有3個1級子節點，分別是rectangle、[ContentPresenter]和canvas，如下所示：

其中我們把rectange的Fill設定為漸層色，代碼如下：

XAML code

<Rectangle Stroke="#FF000000" HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="rectangle">    <Rectangle.Fill>        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">            <GradientStop Color="#FFF8F8F8" Offset="0"/>            <GradientStop Color="#FFD9D9D9" Offset="0.853"/>            <GradientStop Color="#FF5F5E5E" Offset="1"/>        </LinearGradientBrush>    </Rectangle.Fill></Rectangle>

當然你可以不用在XAML代碼中設定，直接在調色器中設定就行了。

中的紅色框所示，依次點擊Properties選項卡=>Fill=>漸層按鈕，然後在漸層色編輯器中配置該漸層色。

好了，第一步完成了，此時我們已經能夠看到按鈕的最終效果了，是不是就結束了？當然沒有，我們還要加動畫，當滑鼠移至上方在按鈕上時讓咖啡冒氣，這樣這個咖啡按鈕才會更逼真。 

製作動畫效果

按F6切換到動畫模式。

在Triggers框中點 +Property （添加屬性觸發程序），然後把預設的 IsCancel改成IsMouseOver，把=後面的值改成True（如果改不了，可以到XAML視圖中修改），如下所示：

你會注意到IsMouseOver左側有一個紅色的按鈕，這表示正在錄製動作。接下來在Objects and Timeline框中點+按鈕，建立一個Storyboard，然後就可以開始錄製動畫了。Flash中做動畫預設是有幀的，所有的動畫都是基於Timeline中的幀去實現的，要改變動畫狀態則可以用主要畫面格，微軟也借鑒了這方面的經驗，WPF中也有主要畫面格的概念。要添加主要畫面格，可以點時間左邊的 按鈕，所有主要畫面格添加完畢後的效果如下所示：

在添加這些主要畫面格的時候要注意一點，由於我們的動畫不需要連續的改變，是獨立的，所以我們必須告訴WPF我們的用意，而對每個主要畫面格設定Hold In就可以解決這個問題，只需要右擊某個主要畫面格就可以看到該選項。至於煙怎麼擺動全憑個人喜好，不過我總覺得我自己做的煙似乎機械化了點，呵呵，畢竟不是搞美工出生的。

大家都知道，在Flash中所有的主要畫面格預設是不會做連續值漸層的，除非你使用補間動畫（Motion Tween）， 右圖便是一個使用Flash補間動畫的例子。
讓按鈕動起來

做完了Storyboard之後，有些人肯定很興奮，迫不及待地把程式跑了起來，結果卻很失望，滑鼠移動到按鈕上一點動靜都沒有，其實原因很簡單——Storyboard沒有與相應的觸發器建立聯絡。回到剛才的Triggers框，點IsMouseOver=true，在出現的actions when activating和actions when deactivating中分別添加Storyboard Begin和Storyboard Stop動作。

好了，現在你可以運行程式了，滑鼠放上去便能看到煙的效果。

下載完整程式碼請點這裡：CoffeButtonSample.zip

[課後作業]：舉一反三，製作一個挖金礦遊戲中的Play按鈕。

要求：

1. 按鈕要有質感，繪製時要加入一定的反光面

2. 滑鼠沒有移上去的時候，會每隔一定時間發出一道金光，這道光從左向右移動，如中間一張圖所示

3. 滑鼠移上去時轉為最亮。

有任何問題或者寫得不清楚的地方，歡迎大家指正。同時也感謝你閱讀這篇文章。