圖像動畫：讓圖像向左移動，然後向後移動

我有以下工作爲圖像的不透明度設置動畫，但我真正想要做的是讓圖像向後移動，向右移動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

太棒了！謝謝！ –

圖像動畫：讓圖像向左移動，然後向後移動

回答

相關問題