Silverlight & Blend動畫設計系列六：動畫技巧（Animation Techniques）之對象與路徑轉化、波感特效
當我們在進行Silverlight & Blend進行動畫設計的過程中，可能需要設計出很多效果不一的圖形圖像出來作為動畫的基本組成元素。然而在設計過程中可能會出現許多的問題，比如當前繪制了一個橢圓，但是在動畫中僅僅只需要橢圓的一半或是更多更少的部分用作與動畫元素，這時候就需要對橢圓對象進行相應的處理才能滿足我們的需求，那到底該怎麽做才能實現最終想要的效果呢？本篇將介紹在Microsoft Expression Blend中進行動畫設計的一些常用的功能點和動畫設計技巧。
一、轉換對象為路徑
將一個對象元素轉化為路徑是非常有用的，通過路徑選擇工具可以將轉化後的路徑對象進行任意拉動變形，以達到理想的設計效果。可以通過Blend菜單中的對象-->路徑-->轉換為路徑以實現對象到路徑的轉換，也可以使用下圖所示的方法進行對象到路徑的轉換：
就以上面截取橢圓中的一部分為例，就需要將圓(Ellipse)轉化為路徑後才能才能通過路徑工具對路徑進行拖動變形，最終以實現想要的圖形效果。如下圖所示就是對橢圓進行變形處理後將其多余的部分剪切掉，實現了最終的圖形效果：
<Ellipse Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Fill="#FF87A50F"/>
在XAML編碼級則將會從Ellipse對象轉化為Path對象，如上圖最終的圖形效果Path對應的XAML編碼為：
<Path Fill="#FF87A50F" Stretch="Fill" Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Data="M240,87 C240,135.04877 186.27417,174 120,174 C53.72583,174 0,135.04877 0,87 C0,38.951225 53.72583,0 120,0 C186.27417,0 240,38.951225 240,87 z"/>
二、波感特效
波感效果也稱幽靈效果，如果為某個對象使用了波感效果，通過對象某種行為觸發了該效果則對象邊框將會出現像波浪一樣的效果，直到動畫執行完成後隱藏行為對象。如果從技術實現的角度來理解的話，也就是一個對象的的放大動畫行為，通過在放大過程中動態改變其透明度來實現。如果不清楚波感效果具體是什麽樣的效果的可以查看http://eyeonearth.cloudapp.net/這個站點，點擊裏面的菜單導航（my location,sms,about,help）中的任意一個就可以進行在線體驗。
比如下面的XAML定義，在界面上繪制了一個漸變填充的圓形：
<Ellipse Height="48" x:Name="RedBall" Width="48" Canvas.Left="355" Canvas.Top="274" MouseLeftButtonUp="RedBall_MouseUp"><Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.479999989271164,0.46000000834465">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="-0.07" Y="-0.21"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF"/>
<GradientStop Color="#FFFF0000" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
接下來對這個圓形對象進行波感效果設計，本文前面說過波感效果其實就是一個縮放動畫，對一個和基礎對象一樣的對象進行放大到一定程度後將其隱藏。這裏需要將上面設計好的圓復制一個作為動畫效果設計對象，如下圖：
縮放動畫效果可以通過ScaleTransform來實現，透明度則使用Opacity屬性進行設置，要實現波感效果主要就是通過動畫在一定的時間內動態的改變這兩項的屬性值，ScaleTransform的X,Y默認為1，Opacity默認也是1。
首先創建一個動畫容器時間線，然後移動時間軸到1秒的位置，選中復制後的圓形對象設置ScaleTransform的X,Y為3，Opacity的屬性值為0，以實現一個放大透明的動畫效果。當對象完全透明後就相當於隱藏了，其實也可將其Visibility屬性為Collapsed，將對象隱藏不呈現。如下圖：
主要就是設置了三個屬性值，這三個屬性值都在動畫過度中動態改變，通過Blend中進行設置後可以看到生成了如下XAML編碼：
<Storyboard x:Name="RedBall_Clicked" Completed="RedBall_Clicked_Completed"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="RedBall_Copy"
Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RedBall_Copy"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RedBall_Copy"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
通過查看前面的代碼片段可以看到，給圓形對象添加了事件處理：MouseLeftButtonUp="RedBall_MouseUp"，也就是點擊了圓對象後需要啟動動畫的執行：
private void RedBall_MouseUp(object sender, MouseButtonEventArgs e){
RedBall_Copy.Visibility = Visibility.Visible;
RedBall_Clicked.Begin();
}
同樣也給動畫添加了完成的事件處理：Completed="RedBall_Clicked_Completed"，當動畫執行完成後做什麽操作。需要做的就是將圓形對象的相關屬性設置為最初的屬性值，以便在進行第二次動畫的時候能夠正確無誤的實現其效果。
private void RedBall_Clicked_Completed(object sender, EventArgs e)
{
RedBall_Clicked.Stop();
RedBall_Copy.Opacity = 1;
RedBall_Copy.Visibility = Visibility.Collapsed;
}
OK，到這裏就完成了整個波感特效的設計制作，最終的運行效果如下圖所示，如果你對波感特效感興趣，建議你下載本文示例代碼運行，進一步的體驗波感特效。
Silverlight & Blend動畫設計系列六：動畫技巧（Animation Techniques）之對象與路徑轉化、波感特效