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

?

一、模糊效果（BlurEffect）

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

　　　　　　　　

?

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

　　　　　　　　

?

　　就拿相冊開發(fā)中的一個典型實例來分析吧，比如相片默認(rèn)縮小為一定的比例并添加了模糊的效果呈現(xiàn)在相片列表中的，當(dāng)鼠標(biāo)指向照片的時候?qū)⒄掌M(jìn)行放大顯示（放大圖片可通過縮放動畫實現(xiàn)，詳細(xì)可查閱：《Silverlight & Blend動畫設(shè)計系列三：縮放動畫（ScaleTransform） 》），并動態(tài)改變其模糊效果值為0以達(dá)到可清晰的查看照片效果。如下XAML對圖片的相關(guān)定義：

<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>

?

　　可以通過兩個動畫來處理，一個完成將圖片縮放比例進(jìn)行放大(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>

?

　　通過鼠標(biāo)事件（MouseEnter,MouseLeave）動態(tài)的觸發(fā)上面定義的兩個動畫的執(zhí)行就可以達(dá)到預(yù)期的目的，如下代碼：

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

　　　　BlurRadius：模糊半徑
　　　　Color：填充顏色
　　　　Direction：方向
　　　　Opacity：透明度
　　　　ShadowDepth：陰影深度

　　通過以上幾個屬性選項的設(shè)置就可以完成陰影效果的設(shè)計，由于其設(shè)計過程非常簡單，詳細(xì)如下圖所示：

??????????????

?

　　對應(yīng)生成的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》----本篇中使用的示例素材選自此書

?

?

?

版權(quán)說明

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

? 作??????者：Beniao

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

總結(jié)

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

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