silverlight   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

  模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果。   一、模糊效果(BlurEffect)   Silverlight中的每个对象都是支持添加模糊和阴影效果的, 在Blend工具中通过“外观”面板可以直接可视

  模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果

 

一、模糊效果(BlurEffect)

  Silverlight中的每个对象都是支持添加模糊和阴影效果的, 在Blend工具中通过“外观”面板可以直接可视化的进行设计完成模糊和阴影效果添加,以及效果参数的调整。如下图为模糊效果的设计界面:

        

Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)

 

  点击”新建“将会弹出模糊和阴影效果选择对话框,下图为模糊和阴影效果选择对话框:

        

Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)

 

  就拿相册开发中的一个典型实例来分析吧,比如相片认缩小为一定的比例并添加了模糊的效果呈现在相片列表中的,当鼠标指向照片的时候将照片进行放大显示(放大图片可通过缩放动画实现,详细可查阅:《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();
}

 

      

Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)

 

二、阴影效果(DropShadowEffect)

  Silverlight中应用阴影效果和模糊效果一样的简单,通添加模糊效果一样的方式实现对元素添加阴影效果处理,需要关注的就是设置阴影效果的相关属性

    BlurRadius:模糊半径
    Color:填充颜色
    Direction:方向
    Opacity:透明度
    ShadowDepth:阴影深度

  通过以上几个属性选项的设置就可以完成阴影效果的设计,由于其设计过程非常简单,详细如下图所示:

              

Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)

 

  对应生成的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)全部内容,希望文章能够帮你解决Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。