位置:海鸟网 > IT > ASP.NET >

Nikhil Kothari 的动画框架 Glitz

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

  效果图(不知道这里直接引用图片是否有版权问题):

  

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

  这些动画行为分为两类: Effects(效果) 和 Transitions(过渡)。

  其中 Effects 是指定给一个元素的,可以执行一些移动、淡入淡出等操作。

  Effects 可以组合,利用 CompositeEffect.

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

  不管是 Effects 或 Transitio ns,都支持设定动画播放的方向:向前,向后,或者向前播放后自动反转。

  下面是几个语法的例子:

  两个屏幕的切换过渡效果(第一个从左侧消失,第二个从右侧进入):

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