[Silverlight] Nikhil Kothari 的动画框架 Glitz（摘要）

原文地址: http://www.nikhilk.net/Silverlight-Effects-Transitions.aspx

Nikhil Kothari 在 blog 中介绍了一个叫做 Glitz 的动画框架，之所以需要这个框架，是因为 Silverlight 中已有的 Storyboard / Visual state manager 太原始，无法简单的提供一些常用的动画效果。

效果图（不知道这里直接引用图片是否有版权问题）：





该框架的实现方法和之前的 AutoComplete/ViewModel 等一样，仍然是采用了 Behavior 模式，通过 Attached Property 附加给目标元素。因为本质上动画也是一种可附加的行为。

这些动画行为分为两类： Effects（效果） 和 Transitions（过渡）。

其中 Effects 是指定给一个元素的，可以执行一些移动、淡入淡出等操作。
Effects 可以组合，利用 CompositeEffect.

而 Transitions 用于指定给一个 Panel 中的两个元素，使其出现切换效果。

不管是 Effects 或 Transitions，都支持设定动画播放的方向：向前，向后，或者向前播放后自动反转。

下面是几个语法的例子：

两个屏幕的切换过渡效果（第一个从左侧消失，第二个从右侧进入）：

< fxui:Button  Content ="Load"
  fxui:ButtonEvents.Click ="$model.LookupWeather(zipCodeTextBox.Text)" >
   < fxglitz:Effects.ClickEffect >
     < fxglitz:SlideTransition  Mode ="Left"  TargetName ="layoutGrid"  Duration ="00:00:1.25"
      Reversible ="False"  Easing ="ElasticInOut"   />
   </ fxglitz:Effects.ClickEffect >
</ fxui:Button >

鼠标悬停/离开的效果（动态改变目标的填充颜色）：

< Border  Background ="#20000000" >
   < fxglitz:Effects.HoverEffect >
     < fxglitz:ColorFillEffect  FillColor ="#80000000"  Duration ="00:00:0.5"  Easing ="QuadraticInOut"   />
   </ fxglitz:Effects.HoverEffect >
  
</ Border >

图片点击后高亮显示为黄色背景：

< Grid >
   < Grid.RowDefinitions > </ Grid.RowDefinitions >
   < fxglitz:Effects.ClickEffect >
     < fxglitz:HighlightEffect  TargetName ="highlightImage"  HighlightColor ="Yellow"  Duration ="00:00:01"   />
   </ fxglitz:Effects.ClickEffect >
   < Border  x:Name ="highlightImage" >
     < Image  Source ="/Silverlight.png"   />
   </ Border >
   < TextBlock  Grid.Row ="1" > Highlight </ TextBlock >
</ Grid >

翻转切换两幅图片：

< Grid >
   < Grid.RowDefinitions > </ Grid.RowDefinitions >
   < fxglitz:Effects.ClickEffect >
     < fxglitz:FlipTransition  TargetName ="flipContainer"  Duration ="00:00:1"  Easing ="QuadraticInOut"   />
   </ fxglitz:Effects.ClickEffect >
   < Grid  x:Name ="flipContainer" >
     < Image  Source ="/MS.net.png"   />
     < Image  Source ="/Silverlight.png"   />
   </ Grid >
   < TextBlock  Style =" {StaticResource staticText} "  Grid.Row ="1" > Flip </ TextBlock >
</ Grid >

（目前这个 Behavior 框架的一个小小缺憾是不能在 Expression Blend 中正常显示。我一般是切换到 Blend 时将相关代码注释掉，尽量先用 Blend 一次性布局好了再加 Behavior）

下载地址： http://www.nikhilk.net/Content/Posts/SilverlightEffects/SilverlightFX.zip

几个效果的演示地址：
http://www.nikhilk.net/Content/Posts/SilverlightEffects/WeatherSample.htm
http://www.nikhilk.net/Content/Posts/SilverlightEffects/EffectsSample.htm