(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

概述  我们接着上节继续讲，上节我们把按钮的基本轮廓和颜色都已经完成了，这节我们将加入一些事件处理和动画效果，让我们的按钮更加绚丽； 相信大家一定都很喜欢看电影吧，每个电影都有剧本，演员按照剧本里的要求来表演，什么时候该做什么，什么时候该说什么都是有要求的。同样我们在制作动画的时候也是如此，有些不同我们把“剧本”叫做“Storyboard故事板”，每个故事板都对应一个“TimeLine”，我们把需要运  

我们接着上节继续讲，上节我们把按钮的基本轮廓和颜色都已经完成了，这节我们将加入一些事件处理和动画效果，让我们的按钮更加绚丽；

相信大家一定都很喜欢看电影吧，每个电影都有剧本，演员按照剧本里的要求来表演，什么时候该做什么，什么时候该说什么都是有要求的。同样我们在制作动画的时候也是如此，有些不同我们把“剧本”叫做“Storyboard故事板”，每个故事板都对应一个“Timeline”，我们把需要运动的对象在Timeline中设置，然后我们在后台代码中控制“storyboard”，让他开始、停止、暂停、继续。这样一个动画就形成了。

我们先来用“storyboard”制作一个动画效果，让一个矩形水平移动；

我们在主工作区先放置一个矩形，然后改变他的内部填充（渐变填充），再放置一个SL自带的按钮

 

我们来比喻下，那个矩形图形就是我们的演员，那个按钮“button”就是我们的导演，导演说“开始”那个演员就开始出场，呵呵，我们也能拍电影喽！！下面我们开始写剧本啦！

 

点击

我们new新的“storyboard”

 

点击ok，看看我们界面上多了什么：

 

<!--[if !vml]-->]-->

经过我们的努力“Timeline”终于出现了，还有那个小红点，表示现在正在录制中。。。相信用过flash的朋友对这个一定很熟悉；

我们先来创建一个起始关键帧：先点击“rectangle” 然后点击

看见那个小白点了吗？那就是我们起始关键帧；

 

我们再来创建结束关键帧，拖动黄色竖到1的位置，并在主工作区水平拖动矩形到另外一个位置，再来看我们的“Timeline”在1的下方多了一个关键帧

 

再来看我们的主工作区,多了一些点，这些就是轨迹，点的稀疏程度代码移动数度快慢，点越稀速度越快；

 

我们来改变以下他们的运动速度，来个减速运动，在终止点上单击右键，选择”EaseIn”---“75%”,表示减速运动

<!--[if !vml]-->

看见了吗？在结束点那变密集了。

我们点击下

运行，效果不错吧，开始水平运动了!

当大家点击终点帧的时候不知道大家注意到右侧“Property”属性栏了吗？多了一个曲线，这个是做什么的呢？是用来调节速度了，斜率越大加速度越大；

 

下面我们该安排我们的“导演”（按钮）了，

来到我们的工程面板,单击右键，来到“Edit in Visual Studio“,把我们的工程在Visual Studio2008中打开；然后我们在Blend中对按钮添加事件；

 

先选中按钮，再选中“Property“中的

 

用过vs的朋友一定很熟悉这个了，我们双击“Click“，blend将帮助我们自动跳转到vs2008中，他帮我们生成了一个函数button_Click

private voID button_Click(object sender, RoutedEventArgs e)         {         }

我们只需要this.Storyboard1.Begin();一句话就可以让Storyboard1开始运行；

private voID button_Click(object sender, RoutedEventArgs e)         {             this.Storyboard1.Begin();         }

我们Save下，然后按F5运行，然后点击button，看见了么？开始运动了！！

 

下面我们来改造上节课做的button；

首先，我们把“Rectangle“和”textblock“用一个canvas包裹起来，方法是：选中他们，然后单击右键选中”Group Into “ -->> “Canvas”，这样我们就把他们组合成一个整体；

1.      给Canvas增加”Mouse Enter”动画，增加一个故事板，起名为“MEnter”这是鼠标移入的效果， 我们给他设置起点和终点帧，我们可以在终点帧上改变字体大小和Rectangle的渐变效果

2.      同样我们用相同的方法给Canvas增加”Mouse Leave”动画，起名为“MLeave”这是鼠标离开时的效果，可以弄一个和MEnter”相反的动画

3.      增加鼠标左键点击时效果“Mouse leftbutton Down”起名为“MDown”

4.      增加鼠标左键放开时效果，可以是“Mouse leftbutton Down”相反动画，起名为“MUp”

然后我们用事件来驱动这些动画效果：

 

private voID Canvas_MouseEnter(object sender, MouseEventArgs e)         {             this.MEnter.Begin();         }         private voID Canvas_MouseLeave(object sender, MouseEventArgs e)         {             this.MLeave.Begin();         }         private voID Canvas_MouseleftbuttonDown(object sender, MousebuttonEventArgs e)         {             this.MDown.Begin();                     }         private voID Canvas_MouseleftbuttonUp(object sender, MousebuttonEventArgs e)         {             this.MUp.Begin();         }

这是我弄的一些效果：

按钮常态：

 

鼠标移入时：

 

鼠标移出时：

 

鼠标点击时：

 

鼠标方开时：

 

Xaml代码：

<Storyboard x:name="MEnter" autoReverse="False" RepeatBehavior="1x">             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="textBlock" Storyboard.TargetProperty="(TextBlock.FontSize)">                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="11"/>                 <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="13"/>             </DoubleAnimationUsingKeyFrames>             <colorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolIDcolorBrush.color)">                 <SplinecolorKeyFrame KeyTime="00:00:00" Value="#FFEFE3E3"/>                 <SplinecolorKeyFrame KeyTime="00:00:00.2000000" Value="#FF5DE374"/>             </colorAnimationUsingKeyFrames>             <colorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[0].(GradIEntStop.color)">                 <SplinecolorKeyFrame KeyTime="00:00:00" Value="#FF1E4E38"/>                 <SplinecolorKeyFrame KeyTime="00:00:00.2000000" Value="#FFD4396B"/>             </colorAnimationUsingKeyFrames>             <colorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[1].(GradIEntStop.color)">                 <SplinecolorKeyFrame KeyTime="00:00:00" Value="#FFDF662C"/>                 <SplinecolorKeyFrame KeyTime="00:00:00.2000000" Value="#FFE26B32"/>             </colorAnimationUsingKeyFrames>         </Storyboard>         <Storyboard autoReverse="False" RepeatBehavior="1x" x:name="MLeave">             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="textBlock" Storyboard.TargetProperty="(TextBlock.FontSize)">                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="13"/>                 <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="11"/>             </DoubleAnimationUsingKeyFrames>             <colorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolIDcolorBrush.color)">                 <SplinecolorKeyFrame KeyTime="00:00:00" Value="#FF5DE374"/>                 <SplinecolorKeyFrame KeyTime="00:00:00.2000000" Value="#FFEFE3E3"/>             </colorAnimationUsingKeyFrames>             <colorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[0].(GradIEntStop.color)">                 <SplinecolorKeyFrame KeyTime="00:00:00" Value="#FFD4396B"/>                 <SplinecolorKeyFrame KeyTime="00:00:00.2000000" Value="#FF1E4E38"/>             </colorAnimationUsingKeyFrames>             <colorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradIEntBrush.GradIEntStops)[1].(GradIEntStop.color)">                 <SplinecolorKeyFrame KeyTime="00:00:00" Value="#FFE26B32"/>                 <SplinecolorKeyFrame KeyTime="00:00:00.2000000" Value="#FFDF662C"/>             </colorAnimationUsingKeyFrames>         </Storyboard>         <Storyboard x:name="MDown">             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.stroke).(linearGradIEntBrush.StartPoint)">                 <SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.494,0"/>             </PointAnimationUsingKeyFrames>             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.stroke).(linearGradIEntBrush.EndPoint)">                 <SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.506,1"/>             </PointAnimationUsingKeyFrames>         </Storyboard>         <Storyboard x:name="MUp">             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.stroke).(linearGradIEntBrush.StartPoint)">                 <SplinePointKeyFrame KeyTime="00:00:00" Value="0.502,0"/>                 <SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.501999974250793,1"/>             </PointAnimationUsingKeyFrames>             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="rectangle" Storyboard.TargetProperty="(Shape.stroke).(linearGradIEntBrush.EndPoint)">                 <SplinePointKeyFrame KeyTime="00:00:00" Value="0.498,1"/>                 <SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.497999995946884,0"/>             </PointAnimationUsingKeyFrames>         </Storyboard>     </UserControl.Resources>     <GrID x:name="LayoutRoot">         <GrID.ColumnDeFinitions>             <ColumnDeFinition WIDth="0*"/>             <ColumnDeFinition WIDth="143"/>             <ColumnDeFinition WIDth="*"/>         </GrID.ColumnDeFinitions>         <GrID HorizontalAlignment="Stretch" GrID.Column="1" GrID.ColumnSpan="2">             <Canvas MouseEnter="Canvas_MouseEnter" MouseLeave="Canvas_MouseLeave" Cursor="Hand" MouseleftbuttonDown="Canvas_MouseleftbuttonDown" MouseleftbuttonUp="Canvas_MouseleftbuttonUp">                 <Rectangle RadiusY="14" RadiusX="14" strokeThickness="5" strokeDashCap="Triangle" strokeEndlineCap="Round" strokeDashOffset="0" strokeStartlineCap="Square" strokeDashArray="0 0" Height="44" WIDth="145" x:name="rectangle">                     <Rectangle.stroke>                         <linearGradIEntBrush EndPoint="0.498,0" StartPoint="0.502,1">                             <GradIEntStop color="#FF000000"/>                             <GradIEntStop color="#FFFFFFFF" Offset="1"/>                         </linearGradIEntBrush>                     </Rectangle.stroke>                     <Rectangle.Fill>                         <linearGradIEntBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">                             <GradIEntStop color="#FF1E4E38" Offset="0"/>                             <GradIEntStop color="#FFDF662C" Offset="0.979"/>                         </linearGradIEntBrush>                     </Rectangle.Fill>                 </Rectangle>                 <TextBlock textwrapPing="Wrap" Foreground="#FFEFE3E3" Height="14" WIDth="64" Canvas.left="48" Canvas.top="16" x:name="textBlock"><Run Text="Click Me"/><lineBreak/><Run Text=""/></TextBlock>             </Canvas>         </GrID> 总结

以上是内存溢出为你收集整理的(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””全部内容，希望文章能够帮你解决(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。