|
在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> <StackPanelResources> <!将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操作如 start stop pause和恢复Storyboard > <Storyboard x:Name=myStoryboard> <DoubleAnimation StoryboardTargetName=MyAnimatedRectangle StoryboardTargetProperty=Opacity From= To= Duration=:: AutoReverse=True RepeatBehavior=Forever /> </Storyboard> </StackPanelResources> <!参数说明 StoryboardTargetName:附加属性操作到指定的对象上; StoryboardTargetProperty:要操作指定对象的属性; FromTo :上述属性值的起始范围; 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 GridRow= Loaded=Start_Animation> <TextBlock Foreground=White>使用层级方式绑定TargetProperty</TextBlock> <StackPanelResources> <Storyboard x:Name=colorStoryboard> <ColorAnimation BeginTime=:: StoryboardTargetName=myStackPanel StoryboardTargetProperty=(PanelBackground)(SolidColorBrushColor) From=Red To=Green Duration=:: /> </Storyboard> </StackPanelResources> </StackPanel> 下面XAML代码与上面所示的实现效果相同 <StackPanel Loaded=Start_Animation> <TextBlock Foreground=White>普通方式绑定TargetProperty</TextBlock> <StackPanelResources> <Storyboard x:Name=colorStoryboard> <ColorAnimation BeginTime=:: StoryboardTargetName=mySolidColorBrush StoryboardTargetProperty=Color From=AliceBlue To=Green Duration=:: FillBehavior=Stop/> </Storyboard> </StackPanelResources> <StackPanelBackground> <SolidColorBrush x:Name=mySolidColorBrush Color=AliceBlue /> </StackPanelBackground> </StackPanel> 接下来是PointAnimation: 当动画值的变化（FROM TO）类型是 Point型时使用 下面的XAML演示的是EllipseGeometry对象从point()移动到point()的动画 <PointAnimation StoryboardTargetProperty=Center StoryboardTargetName=MyAnimatedEllipseGeometry Duration=:: From= To= RepeatBehavior=Forever /> </Storyboard> </CanvasResources> <Path Fill=Blue> <PathData> <! Describes an ellipse > <EllipseGeometry x:Name=MyAnimatedEllipseGeometry Center= RadiusX= RadiusY= /> </PathData> </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_onejpg Height= Width= CanvasLeft= CanvasTop= Margin=></Image> <Image x:Name=image_two Source=resource/img_twojpg Height= Width= CanvasLeft= CanvasTop= Margin=></Image> <Image x:Name=img_three Source=resource/img_threejpg Height= Width= CanvasLeft= CanvasTop= Margin=></Image> <Image x:Name=img_four Source=resource/img_fourjpg Height= Width= CanvasLeft= CanvasTop= Margin=></Image> <Image x:Name=img_five Source=resource/img_fivejpg Height= Width= CanvasLeft= CanvasTop= Margin=></Image> </Grid> 然后在该xaml文件上击鼠标右键选择在 Expression Blend 中打开菜单项然后在打开的Blend 窗口中按下图中所指示的方式来创建一个Storyboard名为imageStoryboard 接着拖动当前帧到秒处执行record keyframe操作 然后对左侧的图片进行rotate transfer和scale transfer操作如下图 而其最终的值如下图所示 这里我们可以通过下图所示演示一下当前图片从秒到秒的运行情况 同理对其它图片进行相类似的操作后就可以将当前文件进行保存并单击F进行试运行了接着我们还要再切换回VS完成动画播放的工作在本DEMO中因为使用了鼠标移入移出方式来实现动画的播放任务所以我们要在相应的xamlcs文件中加入storyboard的Begin()方法绑定如下 private void LayoutRoot_MouseEnter(object sender MouseEventArgs e) { imageStoryboardBegin(); } 这样就可以运行该DEMO了 到这里我们只是实现了将图片从初始位置移动到指定位置而没有实现reverse操作即图片从分散展示状态再回到实始状态但实现这个功能也非常简单主要是用了一个小技巧 首先我们要对当前的storyboard执行复制操作如下图 然后在新生成的storyboard中修改其名称并对其进行reverse操作如下图 这样我们就得到了一个对展开的逆操作的storyboard然后我们在xamlcs中调用这个storyboard的Begin()方法即可如下 private void LayoutRoot_MouseLeave(object sender MouseEventArgs e) { imageStoryboard_ReverseBegin(); } 通过Blend工具我们非常轻松的实现了展示效果这远比在XAML中手写代码要来得简单正确 |
