Silverlight利用故事板设计闪烁的动画

原图片78x37，每个泡的宽度是26
利用Image的触发事件EventTrigger来响应故事板

代码：

<Canvas Height="37" Width="78" Clip="M0,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,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