图像动画：让图像向左移动，然后向后移动

我有以下工作为图像的不透明度设置动画，但我真正想要做的是让图像向后移动，向右移动100像素然后向左100像素。但是我一直无法达到这个效果。图像动画：让图像向左移动，然后向后移动

<Image Source="MyImage.jpg" Width="2000" Height="800" x:Name="MyAnimatedImageGeometry"> 
<Image.Triggers> 
    <EventTrigger RoutedEvent="Image.Loaded"> 
     <BeginStoryboard> 
      <Storyboard Storyboard.TargetName="MyAnimatedImageGeometry" Storyboard.TargetProperty="Opacity"> 
       <DoubleAnimation To="0" AutoReverse="True" RepeatBehavior="Forever"/> 
      </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
</Image.Triggers>

来源

2012-05-21 Chris Craft

您是否尝试过为此使用Expression Blend？它会为你生成所有的故事板。 – Etch

这里有一个形象：

<Image x:Name="image" Source="/filename.png" RenderTransformOrigin="0.5,0.5" > 
    <Image.RenderTransform> 
     <CompositeTransform TranslateX="0"/> 
    </Image.RenderTransform> 
    <i:Interaction.Triggers> 
     <i:EventTrigger EventName="MouseLeftButtonDown"> 
      <eim:ControlStoryboardAction Storyboard="{StaticResource moveImage}"/> 
     </i:EventTrigger> 
    </i:Interaction.Triggers> 
</Image>

的rendor的初始化变换是有趣的一点。触发器就是为了演示启动故事板。你不会在真实应用程序中这样做，因为点击该项目以这种方式移动它，当它在移动时点击它会变得混乱。（显然，这将是容易的代码来控制。）

这里的其他有趣的一点，相关的故事板：

<Storyboard x:Name="moveImage" AutoReverse="True" RepeatBehavior="1x"> 
    <DoubleAnimation Duration="0:0:1" 
        To="-100" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" 
        Storyboard.TargetName="image" 
     <DoubleAnimation.EasingFunction> 
      <CubicEase EasingMode="EaseIn"/> 
     </DoubleAnimation.EasingFunction> 
    </DoubleAnimation> 
</Storyboard>

这100个像素移动图像向左（历时一秒钟）然后再回来。
我已经添加了一个缓动功能，使它更有趣。

来源

2012-05-21 20:04:21

太棒了！谢谢！ –

图像动画：让图像向左移动，然后向后移动

回答

相关问题