模糊效果（BlurEffect）與陰影效果（DropShadowEffect）是兩個非常實用和常用的兩個特效，比如在開發(fā)相冊中，可以對照片的縮略圖添加模糊效果，在放大照片的過程中動態(tài)改變照片的大小和模糊的透明度來達到一個放大透明的效果。

?

一、模糊效果（BlurEffect）

　　Silverlight中的每個對象都是支持添加模糊和陰影效果的，?在Blend工具中通過“外觀”面板可以直接可視化的進行設計完成模糊和陰影效果的添加，以及效果參數(shù)的調整。如下圖為模糊效果的設計界面：

　　　　　　　　

?

　　點擊”新建“將會彈出模糊和陰影效果選擇對話框，下圖為模糊和陰影效果選擇對話框：

　　　　　　　　

?

　　就拿相冊開發(fā)中的一個典型實例來分析吧，比如相片默認縮小為一定的比例并添加了模糊的效果呈現(xiàn)在相片列表中的，當鼠標指向照片的時候將照片進行放大顯示（放大圖片可通過縮放動畫實現(xiàn)，詳細可查閱：《Silverlight & Blend動畫設計系列三：縮放動畫（ScaleTransform） 》），并動態(tài)改變其模糊效果值為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）動態(tài)的觸發(fā)上面定義的兩個動畫的執(zhí)行就可以達到預期的目的，如下代碼：

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中應用陰影效果和模糊效果一樣的簡單，通添加模糊效果一樣的方式實現(xiàn)對元素添加陰影效果處理，需要關注的就是設置陰影效果的相關屬性。

　　　　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》----本篇中使用的示例素材選自此書

?

?

?

版權說明

? 本文屬原創(chuàng)文章，歡迎轉載且注明文章出處，其版權歸作者和博客園共有。??

? 作??????者：Beniao

?文章出處：http://beniao.cnblogs.com/? 或? http://www.cnblogs.com/

總結

以上是生活随笔為你收集整理的Silverlight Blend动画设计系列七：模糊效果（BlurEffect）与阴影效果（DropShadowEffect）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。