原文:
Silverlight & Blend動畫設計系列七：模糊效果（BlurEffect）與陰影效果（DropShadowEffect）模糊效果（BlurEffect）與陰影效果（DropShadowEffect）是兩個非常實用和常用的兩個特效，比如在開發相冊中，可以對照片的縮略圖添加模糊效果，在放大照片的過程中動态改變照片的大小和模糊的透明度來達到一個放大透明的效果。
一、模糊效果（BlurEffect）
Silverlight中的每個對象都是支援添加模糊和陰影效果的， 在Blend工具中通過“外觀”面闆可以直接可視化的進行設計完成模糊和陰影效果的添加，以及效果參數的調整。如下圖為模糊效果的設計界面：
點選”建立“将會彈出模糊和陰影效果選擇對話框，下圖為模糊和陰影效果選擇對話框：
就拿相冊開發中的一個典型執行個體來分析吧，比如相片預設縮小為一定的比例并添加了模糊的效果呈現在相片清單中的，當滑鼠指向照片的時候将照片進行放大顯示（放大圖檔可通過縮放動畫實作，詳細可查閱：《
Silverlight & Blend動畫設計系列三：縮放動畫（ScaleTransform）》），并動态改變其模糊效果值為0以達到可清晰的檢視照片效果。如下XAML對圖檔的相關定義：
<Image Height="240" x:Name="Flower" Width="320" Source="yellowFlower.jpg" Opacity="1"
Canvas.Left="240" Canvas.Top="180" RenderTransformOrigin="0.5,0.5"
MouseEnter="Flower_MouseEnter" MouseLeave="Flower_MouseLeave" OpacityMask="{x:Null}">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
<Image.Effect>
<BlurEffect/> <!--為該圖檔添加了模糊效果-->
</Image.Effect>
</Image>
可以通過兩個動畫來處理，一個完成将圖檔縮放比例進行放大(ScaleX，ScaleY：1-->2)同時改變其模糊值為0(Radius：5-->0)，另一個動畫則相反。
<Storyboard x:Name="Flower_Enter">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="2"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
</DoubleAnimation>
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="2"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="0"
Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)">
</Storyboard>
<Storyboard x:Name="Flower_Level">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="1"
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="1"
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.5000000" To="5"
通過滑鼠事件（MouseEnter,MouseLeave）動态的觸發上面定義的兩個動畫的執行就可以達到預期的目的，如下代碼：
private void Flower_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
// TODO: Add event handler implementation here.
this.Flower_Enter.Begin();
}
private void Flower_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
this.Flower_Level.Begin();
二、陰影效果（DropShadowEffect）
Silverlight中應用陰影效果和模糊效果一樣的簡單，通添加模糊效果一樣的方式實作對元素添加陰影效果處理，需要關注的就是設定陰影效果的相關屬性。
BlurRadius：模糊半徑
Color：填充顔色
Direction：方向
Opacity：透明度
ShadowDepth：陰影深度
通過以上幾個屬性選項的設定就可以完成陰影效果的設計，由于其設計過程非常簡單，詳細如下圖所示：
對應生成的XAML代碼如下：
<Image Height="240" x:Name="Flower" Width="320" Canvas.Left="240" Canvas.Top="180"
Source="yellowFlower.jpg" Stretch="Fill" Cursor="Hand">
<DropShadowEffect x:Name="FlowerShadow"
BlurRadius="18"
ShadowDepth="27"
Opacity="0.6"
Direction="321"/>
推薦資源：
MSDN:
http://msdn.microsoft.com/zh-cn/library/cc189090(VS.95).aspxhttp://www.silverlight.net/learn/quickstarts/animations/ http://blog.csdn.net/ghj1976/archive/2009/12/22/5056916.aspx
《Function Silverlight 3 Animation》----本篇中使用的示例素材選自此書
版權說明
本文屬原創文章，歡迎轉載且注明文章出處，其版權歸作者和部落格園共有。
作 者：Beniao
文章出處：
http://beniao.cnblogs.com/或
http://www.cnblogs.com/