[Silverlight] 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）

(责任编辑：admin)