木野狐 (Neil Chen)

[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

posted on 2008-07-31 09:53 木野狐(Neil Chen) 阅读(1632) 评论(11)  编辑 收藏 网摘 所属分类: Silverlight

评论

#1楼 2008-07-31 11:26 hxm      

动作好快啊 其他MSDN 上也有不错的SILVERLGIT的博客   回复  引用  查看    

#2楼[楼主] 2008-07-31 11:28 木野狐(Neil Chen)      

@hxm
不妨推荐几个好的。
  回复  引用  查看    

#3楼 2008-07-31 11:49 hxm      

更升入下去看codplex上更是有很多极具价值的项目   回复  引用  查看    

#4楼[楼主] 2008-07-31 11:54 木野狐(Neil Chen)      

@hxm

Codeplex 上也有很多是 Silverlight beta 1 或更早的,停止更新了。
好项目确实不少。
  回复  引用  查看    

#5楼 2008-07-31 12:09 gakaki[未注册用户]

http://www.codeplex.com/HackingSilverlight/Release/ProjectReleases.aspx?ReleaseId=15754   回复  引用    

#6楼[楼主] 2008-07-31 12:28 木野狐(Neil Chen)      

@gakaki

thanks. 这个之前我也看到了,是个不错的项目。不过他的动画效果是基于控件的,而没有提取出来变成可复用的行为。
  回复  引用  查看    

#7楼 2008-07-31 15:11 真见      

nikhilk这个我也收集了准备推荐在下个系列中,貌似我收集的这个地址比你简单些:http://www.nikhilk.net/Entry.aspx?id=203" target="_new">http://www.nikhilk.net/Entry.aspx?id=203   回复  引用  查看    

#8楼[楼主] 2008-07-31 15:19 木野狐(Neil Chen)      

@真见



url 重写过了. 可能有好几个地址的。这个无所谓了。

  回复  引用  查看    

#9楼 2008-08-01 10:02 好笑[未注册用户]

这个应该是学习flex的吧,觉得还是flex来得简单清晰   回复  引用    

#10楼[楼主] 2008-08-01 10:28 木野狐(Neil Chen)      

@好笑
选择何种技术是你的权利。
不同技术有不同的使用者人群,对微软用户而言,Silverlight 编程模型更亲切。
  回复  引用  查看    

#11楼 2009-01-13 15:18 sdf[未注册用户]

fxglitz:Effects.ClickEffect 在blend里面怎么不支持呀   回复  引用    

发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1257034




历史上的今天:
2007-07-31 linux/django/httpd/mysql 相关命令备忘

相关文章:

相关链接: