Blend 状态的更换 GotoStateBehavior VS. this.状态.Storyboard.Begin();

原创 2012年03月30日 13:29:10

需求:一个grid上,用row,column来分成不同的区域,在不同区域放置border,在点击border时触发状态,并改变其相应区域,达到变大变小渐变的过程。

 

一、GotoStateAction 触发动画

在border处理好之后,添加

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

 

并为border添加事件,可直接用过blend添加:

1:查找到对应行为

直接拖拽至所要触发事件的控件上,.xmal 代码如下:

<i:Interaction.Triggers>
   <i:EventTrigger EventName="MouseLeftButtonDown">
      <ei:GoToStateAction StateName="VisualState"/>
   </i:EventTrigger>
</i:Interaction.Triggers>

在blend中指定触发事件,及其触发的状态名:

 eventname: MouseLeftButtonDown; StateName: 要变换到的状态名称

2:新状态:

创建一个新的状态VisualState,打开FluidLayout 按钮。

添加过滤到*,时间订为1s,添加easingfunction。

  时间框旁边的即为EasingFunction,点击打开如下,添加:

在状态改变过程中,显示的效果。

改变border的column\row\rowspan\columnspan 数据,自动生成代码如下:

<VisualState x:Name="VisualState">
   <Storyboard>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="border">
	 <DiscreteObjectKeyFrame KeyTime="0">
	     <DiscreteObjectKeyFrame.Value>
		<System:Int32>2</System:Int32>
              </DiscreteObjectKeyFrame.Value>
	 </DiscreteObjectKeyFrame> 
</ObjectAnimationUsingKeyFrames>

 
二、storyboard.Begin() 触发状态

在blend中的创建状态,但是触发状态在后台写,给border加事件MouseLeftButtonDown,双击在后台自动生成,.cs文件下:

        private void border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.VisualState.Storyboard.Begin();
        }


区别:

storyboard 触发的状态改变,没有平滑的过程,而GoToStateAction,可以触发easingfunction的过程,平滑进入等效果。

Blend 状态的更换 GotoStateBehavior VS. this.状态.Storyboard.Begin();

需求:一个grid上,用row,column来分成不同的区域,在不同区域放置border,在点击border时触发状态,并改变其相应区域,达到变大变小渐变的过程。   一、GotoStateAct...

Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)

Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控...

storyboard创建的:设置tabbar的item选中状态的颜色和图片

写一个继承自UITabBarController的类。添加如下代码: - (void)viewDidLoad { [super viewDidLoad]; self.tabBar.t...

react demo12 (获取组件属性状态this.state)

表单监控,this.state实战练习 需求:定义一个组件,将用户在输入框内输入的内容进行实时显示 分析:组件与用户交换时,存在状态的变化,即输入框的值 react dome ...

3、React中的状态(this.state)

一、什么是state state表示react组件内部的一种状态,通过组件内的getInitialState函数,可以为组件的初始状态赋值,当组件的状态发生改变时,组件会重新渲染。官方对state的...

react demo13 (根据组件属性状态this.state实现表单实时监控)

表单监控,this.state实战练习 需求:定义一个组件,将用户在输入框内输入的内容进行实时显示 分析:组件与用户交换时,存在状态的变化,即输入框的值 react dome ...

Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard

上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程。 而Silverlight动画分类两种类型,From/T...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Blend 状态的更换 GotoStateBehavior VS. this.状态.Storyboard.Begin();
举报原因:
原因补充:

(最多只允许输入30个字)