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

原图片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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值