ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 使用silverlight中的Storyboard实现动画效果

使用silverlight中的Storyboard实现动画效果

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-05-11 16:51:14 0 删除 编辑
   在silverlight中,可以使用StoryBoard(故事板)不实现类似于动画的效果,本文就是借助该对象来实现一个相册显示的例子,其运行效果如下图所示(鼠标放在中间图片上,然后离开):

        在正文开始之后,先介绍一下Storyboard, 其定义如下:               Controls animations with a timeline, and provides object and property targeting
        information for its child animations. 


        因为它用时间线(timeline)来控制,并提供了要绑定的对象和目标属性信息。其在XAML中的

        格式如下:          
            oneOrMoreChildTimelines
         


        其中的oneOrMoreChildTimelines可以是如下任一或多个对象元素:          Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation,
        DoubleAnimationUsingKeyFrames, PointAnimation, PointAnimationUsingKeyFrames 


        下面就其中几个主要的元素作如下演示说明,首先请看“DoubleAnimation”:

        DoubleAnimation:当动画值的变化(FROM ...TO...)类型是 Double型时使用。

        下面演示的就是矩形(MyAnimatedRectangle)的“Opacity”(透明度)属性在一秒内从1到0的动画(参数说明见注释)。          
               
              <!--将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操作,如
        start, stop, pause,和恢复Storyboard. -->
                   
                                                 Storyboard.TargetName="MyAnimatedRectangle"
                    Storyboard.TargetProperty="Opacity"
                    From="1.0"
                    To="0.0"
                    Duration="0:0:1"
                    AutoReverse="True"
                    RepeatBehavior="Forever" />
                   
               

               <!--参数说明:
                   Storyboard.TargetName:附加属性操作到指定的对象上;
                   Storyboard.TargetProperty:要操作指定对象的属性;
                   From..To :上述属性值的起始范围;
                   Duration: 在多少时间内完成上述属性值的变化;
                   AutoReverse:是否在vanishes 之后 fade back 到初始状态;
                   RepeatBehavior.:指示当前animation 不断反复
               -->
                          x:Name="MyAnimatedRectangle"
           Width="100" Height="100" Fill="Blue" />
        
 


        ColorAnimation:当动画值的变化(FROM ...TO...)类型是 Color型时使用。

        下面演示的是myStackPanel背景色在4秒内从红到绿的动画。                          Loaded="Start_Animation">
            使用层级方式绑定TargetProperty:
            
                
                                    Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                From="Red" To="Green" Duration="0:0:4" />
                
            

         


        下面XAML代码与上面所示的实现效果相同:          
             普通方式绑定TargetProperty:
             
                 
                                 Storyboard.TargetProperty="Color" From="AliceBlue" To="Green" Duration="0:0:4" FillBehavior="Stop"/>
                 
             

             
                 
             

         


        接下来是PointAnimation:  当动画值的变化(FROM ...TO...)类型是 Point型时使用。

        下面的XAML演示的是EllipseGeometry对象从point(20,200)移动到point(400,100)的动画。                    Storyboard.TargetName="MyAnimatedEllipseGeometry"
          Duration="0:0:5"
          From="20,200"
          To="400,100"
          RepeatBehavior="Forever" />
               
           
        
               
                   <!-- Describes an ellipse. -->
                             Center="20,20" RadiusX="15" RadiusY="15" />
               

         

 好了,有了上面的介绍之后,我们下面着手开发这个DEMO。

        首先我们建立一个silverlight application,并将其命名为:Animation_Sample。

        然后我们要去找几张相册用的图片,将其放在项目中的resource文件夹下,并将其设置为资源,如下图所示:



        然后在xaml中加入如下代码段作为Image元素对相应图片的引用:  

                    MouseLeave="LayoutRoot_MouseLeave">
                             Canvas.Top="30" Margin="12,0,0,0">
                             Canvas.Top="30" Margin="12,0,0,0">
                             Canvas.Top="30" Margin="12,0,0,0">
                             Canvas.Top="30" Margin="12,0,0,0">
                            Canvas.Top="30" Margin="12,0,0,0">
         


        然后在该xaml文件上击鼠标右键,选择"在 Expression Blend 中打开"菜单项,然后在打开的Blend 窗口中按下图中所指示的方式来创建一个Storyboard,名为:image1Storyboard .



        接着拖动当前帧到2秒处,执行“record keyframe”操作:



        然后对左侧的图片进行"rotate transfer"和"scale transfer"操作,如下图:



而其最终的值如下图所示:



        这里我们可以通过下图所示演示一下当前图片从0秒到2秒的运行情况:



        同理对其它图片进行相类似的操作后,就可以将当前文件进行保存,并单击F5进行试运行了。接着,我们还要再切换回VS完成动画播放的工作。在本DEMO中,因为使用了鼠标移入移出方式来实现动画的播放任务。所以我们要在相应的xaml.cs文件中加入storyboard的"Begin()"方法绑定如下:          private void LayoutRoot_MouseEnter(object sender, MouseEventArgs e)
        {
            image1Storyboard.Begin();
        } 


        这样就可以运行该DEMO了。

        到这里,我们只是实现了将图片从初始位置移动到指定位置。而没有实现reverse操作,即图片从分散展示状态再回到实始状态。但实现这个功能也非常简单,主要是用了一个小技巧:

        1.首先我们要对当前的storyboard执行复制操作,如下图:



        2. 然后在新生成的storyboard中修改其名称,并对其进行reverse操作,如下图:



        这样我们就得到了一个对展开的“逆操作”的storyboard.然后我们在xaml.cs中调用这个storyboard的Begin()方法即可,如下:          private void LayoutRoot_MouseLeave(object sender, MouseEventArgs e)
        {
            image1Storyboard_Reverse.Begin();
        } 


        通过Blend工具,我们非常轻松的实现了展示效果,这远比在XAML中手写代码要来得“简单正确”。

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-594745/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5327046