windows-phone-7 - 图像动画 : Make Image move left and then back

Question

我有以下用于设置图像不透明度动画的方法，但我真正想做的是让图像前后移动，比如向右移动 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>

Answer 1

这是一张图片:

<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。你不会在真正的应用程序中这样做，因为当你在它移动时点击它时，点击项目以这种方式移动它会变得困惑。 (显然这在代码中很容易控制。)

这是另一个有趣的部分，相关的 Storyboard:

<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 像素(持续一秒)，然后再向后移动。
我添加了缓动函数以使其更有趣。