知识大全使用silverlight中的Storyboard实现动画效果

Posted 2022-07-17 操作

篇首语：上下观古今，起伏千万途。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全使用silverlight中的Storyboard实现动画效果相关的知识，希望对你有一定的参考价值。

使用silverlight中的Storyboard实现动画效果 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　在silverlight中可以使用StoryBoard（故事板）不实现类似于动画的效果本文就是借助该对象来实现一个相册显示的例子其运行效果如下图所示（鼠标放在中间图片上然后离开）

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

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

　　格式如下 <Storyboard > oneOrMoreChildTimelines </Storyboard>

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

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

　　DoubleAnimation 当动画值的变化（FROM TO ）类型是 Double型时使用

　　下面演示的就是矩形（MyAnimatedRectangle）的 Opacity （透明度）属性在一秒内从到的动画（参数说明见注释） <StackPanel> <StackPanel Resources> <! 将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操作如 start stop pause 和恢复Storyboard > <Storyboard x:Name= myStoryboard > <DoubleAnimation Storyboard TargetName= MyAnimatedRectangle Storyboard TargetProperty= Opacity From= To= Duration= : : AutoReverse= True RepeatBehavior= Forever /> </Storyboard> </StackPanel Resources> <! 参数说明 Storyboard TargetName:附加属性操作到指定的对象上; Storyboard TargetProperty:要操作指定对象的属性; From To :上述属性值的起始范围; Duration: 在多少时间内完成上述属性值的变化; AutoReverse:是否在vanishes 之后 fade back 到初始状态; RepeatBehavior:指示当前animation 不断反复 > <Rectangle MouseLeftButtonDown= Mouse_Clicked x:Name= MyAnimatedRectangle Width= Height= Fill= Blue /> </StackPanel>

　　ColorAnimation 当动画值的变化（FROM TO ）类型是 Color型时使用

　　下面演示的是myStackPanel背景色在秒内从红到绿的动画 <StackPanel x:Name= myStackPanel Background= Red Grid Row= Loaded= Start_Animation > <TextBlock Foreground= White >使用层级方式绑定TargetProperty </TextBlock> <StackPanel Resources> <Storyboard x:Name= colorStoryboard > <ColorAnimation BeginTime= : : Storyboard TargetName= myStackPanel Storyboard TargetProperty= (Panel Background) (SolidColorBrush Color) From= Red To= Green Duration= : : /> </Storyboard> </StackPanel Resources> </StackPanel>

　　下面XAML代码与上面所示的实现效果相同 <StackPanel Loaded= Start_Animation > <TextBlock Foreground= White >普通方式绑定TargetProperty </TextBlock> <StackPanel Resources> <Storyboard x:Name= colorStoryboard > <ColorAnimation BeginTime= : : Storyboard TargetName= mySolidColorBrush Storyboard TargetProperty= Color From= AliceBlue To= Green Duration= : : FillBehavior= Stop /> </Storyboard> </StackPanel Resources> <StackPanel Background> <SolidColorBrush x:Name= mySolidColorBrush Color= AliceBlue /> </StackPanel Background> </StackPanel>

　　接下来是PointAnimation: 当动画值的变化（FROM TO ）类型是 Point型时使用

　　下面的XAML演示的是EllipseGeometry对象从point( )移动到point( )的动画 <PointAnimation Storyboard TargetProperty= Center Storyboard TargetName= MyAnimatedEllipseGeometry Duration= : : From= To= RepeatBehavior= Forever /> </Storyboard> </Canvas Resources> <Path Fill= Blue > <Path Data> <! Describes an ellipse > <EllipseGeometry x:Name= MyAnimatedEllipseGeometry Center= RadiusX= RadiusY= /> </Path Data> </Path>

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

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

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

　　然后在xaml中加入如下代码段作为Image元素对相应图片的引用 <Grid x:Name= LayoutRoot Background= White MouseEnter= LayoutRoot_MouseEnter MouseLeave= LayoutRoot_MouseLeave > <Image x:Name= image_one Source= resource/img_one jpg Height= Width= Canvas Left= Canvas Top= Margin= ></Image> <Image x:Name= image_o Source= resource/img_o jpg Height= Width= Canvas Left= Canvas Top= Margin= ></Image> <Image x:Name= img_three Source= resource/img_three jpg Height= Width= Canvas Left= Canvas Top= Margin= ></Image> <Image x:Name= img_four Source= resource/img_four jpg Height= Width= Canvas Left= Canvas Top= Margin= ></Image> <Image x:Name= img_five Source= resource/img_five jpg Height= Width= Canvas Left= Canvas Top= Margin= ></Image> </Grid>

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

　　接着拖动当前帧到秒处执行 record keyframe 操作

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

　　而其最终的值如下图所示

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

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

　　这样就可以运行该DEMO了

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

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

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

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

cha138/Article/program/net/201311/12948

知识大全 使用silverlight中的Storyboard实现动画效果

知识大全使用silverlight中的Storyboard实现动画效果