silverlight   发布时间:2022-05-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用silverlight中的Storyboard实现动画效果大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

在silverlight中,可以使用StoryBoard(故事板)不实现类似于动画的效果,本文就是借助该 对象来实现一个相册显示的例子,其运行效果如下图所示(鼠标放在中间图片上,然后离开):        在正文开始之后,先介绍一下Storyboard, 其定义如下:      Controls animations with a timeline, and provides object and
在silverlight中,可以使用StoryBoard(故事板)不实现类似于动画的效果,本文就是借助该
对象来实现一个相册显示的例子,其运行效果如下图所示(鼠标放在中间@L_197_4@上,然后离开):
 
     在正文开始之后,先介绍一下Storyboard,其定义如下:
     Controls animations with a timeline,and provides object and property targeTing
information for its child animations.

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

< Storyboard   

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

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

   
    下面就其中几个主要的元素作如下演示说明,首先请看“DoubleAnimation”:
   
    DoubleAnimation:当动画值的变化(FROM ...TO...)类型是 Double型时使用。
   
    下面演示的就是矩形(MyAnimatedRectangle)的“Opacity”(透明度)属性在一秒内从1到0
的动画(参数说明见注释)。
   
StackPanel
       
StackPanel.resources
      
<!-- 将Storyboard 放入resources中是为了更方便的在代码中引用 Storyboard 以及进行互操作,如
start, stop, pause,和恢复Storyboard. 
-->
           
Storyboard  x:Name ="myStoryboard"
               
DoubleAnimation
                  
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 不断反复
       


       
Rectangle  @H_642_43@mou@R_489_10288@ftButtonDown ="Mouse_Clicked"
   x:Name

   Width
="100"  Height  Fill ="Blue"
>

    ColorAnimation:当动画值的变化(FROM ...TO...)类型是 Color型时使用。
   
    下面演示的是myStackPanel背景色在4秒内从红到绿的动画。

StackPanel  ="myStackPanel"  BACkground ="Red"  Grid.Row ="0"
        Loaded
="Start_Animation"
    
TextBlock  Foreground ="White" 使用层级方式绑定TargetProperty: TextBlock
        
="colorStoryboard"
            
ColorAnimation  BeginTime ="00:00:00"  Storyboard.TargetName
        Storyboard.TargetProperty
="(Panel.BACkground).(SolidColorBrush.Color)"
        From
 To ="Green"  Duration ="0:0:4" >

       
    下面XAML代码与上面所示的实现效果相同:
   
Loaded
     
普通方式绑定TargetProperty:
         
="colorStoryboard2"
             
="mySolidColorBrush"
    Storyboard.TargetProperty
="Color"  From ="AliceBlue"  FillBehavior ="Stop" StackPanel.BACkground SolidColorBrush   Color  

 
    接下来是PointAnimation:  当动画值的变化(FROM ...TO...)类型是 Point型时使用。
   
    下面的XAML演示的是EllipseGeometry对象从point(20,200)移动到point(400,100)的动画。
   
PointAnimation  Storyboard.TargetProperty ="Center"
  Storyboard.TargetName
="MyAnimatedEllipseGeometry"
  Duration
="0:0:5"
  From
="20,200"
  To
="400,100"
  repeatBehavior

   
Canvas.resources Path  Fill ="Blue" Path.Data  Describes an ellipse.  EllipseGeometry 
  Center
 radiusX ="15"  radiusY Path >

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

     首先我们建立一个silverlight application,并将其命名为:Animation_Sample
   
     然后我们要去找几张相册用的@L_197_4@,将其放在项目中resource文件夹下,并将其设置为资源,
如下图所示:
               

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



    然后在xaml中加入如下代码段作为Image元素对相应@L_197_4@的引用:
   
Grid  ="LayoutRoot" ="White"  MouseEnter ="LayoutRoot_MouseEnter"
    Mou@R_489_10288@ave
="LayoutRoot_Mou@R_489_10288@ave"   
    
Image  ="image_one"  source ="resource/img_one.jpg" ="40"  Width ="400"  Canvas.Left ="30"
         Canvas.Top
 Margin ="12,0" ></ Image ="image_two" ="resource/img_two.jpg" ="img_three" ="resource/img_three.jpg" ="img_four" ="resource/img_four.jpg" ="img_five" ="resource/img_five.jpg"
        Canvas.Top
Grid >


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

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



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

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




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

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




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

     

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


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

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


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

private void  LayoutRoot_MouseEnter( object  sender, MouseEventArgs E)
{
    image1Storyboard.begin();
}

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

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

    

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


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

    

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


 
 
     这样我们就得到了一个对展开的“逆操作”的storyboard.然后我们在xaml.cs中调用这个storyboard的
Begin()方法即可,如下:

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

 LayoutRoot_Mou@R_489_10288@ave( E)

@H_954_673@

@H_855_675@

@H_197_682@

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

{

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

    image1Storyboard_Reverse.begin();

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

}


     通过Blend工具,我们非常轻松的实现了展示效果,这远比在XAML中手写代码要来得“简单正确”。
 
     好了,今天的内容就到这里了。
 
     源码下载链接,请点击这里:)


大佬总结

以上是大佬教程为你收集整理的使用silverlight中的Storyboard实现动画效果全部内容,希望文章能够帮你解决使用silverlight中的Storyboard实现动画效果所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。