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>
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="0"
Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="Flower_Level">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
</DoubleAnimation>
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.50" To="1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
</DoubleAnimation>
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="Flower" Duration="00:00:00.5000000" To="5"
Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)">
</DoubleAnimation>
</Storyboard>
通過鼠標事件（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)
{
// TODO: Add event handler implementation here.
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">
<Image.Effect>
<DropShadowEffect x:Name="FlowerShadow"
BlurRadius="18"
ShadowDepth="27"
Opacity="0.6"
Direction="321"/>
</Image.Effect>
</Image>
推薦資源：
MSDN:http://msdn.microsoft.com/zh-cn/library/cc189090(VS.95).aspx
http://www.silverlight.net/learn/quickstarts/animations/
http://blog.csdn.net/ghj1976/archive/2009/12/22/5056916.aspx
《Function Silverlight 3 Animation》----本篇中使用的示例素材選自此書
Silverlight & Blend動畫設計系列七：模糊效果（BlurEffect）與陰影效果（DropShadowEffect）