[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