原图片78x37,每个泡的宽度是26
利用Image的触发事件EventTrigger来响应故事板
代码:
<Canvas Height="37" Width="78" Clip="M0,0 L26,0 L26,37 L0,37 z">
<Image x:Name="img" Source="images/popo.png" Stretch="None" RenderTransformOrigin="0.5,0.5" >
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="img"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" >
<DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="-26" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="-52" />
<DiscreteDoubleKeyFrame KeyTime="00:00:1.5" Value="-52"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Canvas>
注:Canvas中的Clip是剪切遮盖,这个故事板的作用是让图片在一定的时间里以X轴方向移动,运行项目就能看到效果
另一种方式是把故事板写在Resources里,然后通过事件激发故事板运行
<UserControl.Resources>
<Storyboard x:Name="popoImg" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="popo"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" >
<DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="-26" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="-52" />
<DiscreteDoubleKeyFrame KeyTime="00:00:1.5" Value="-52"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Canvas Height="37" Width="78" Clip="M0,0 L26,0 L26,37 L0,37 z" >
<Image x:Name="popo" Source="images/popo.png" Stretch="None" RenderTransformOrigin="0.5,0.5" >
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Canvas>
事件里写上popoImg.Begin();
参考:
故事板storyboard实现动画效果:http://www.cnblogs.com/crazypig/archive/2012/02/21/2361552.html
silverlight 动画详解:http://www.cnblogs.com/Gyoung/p/3632249.html