3

I have the following which works for animating the opacity of the image, but what I'd really like to do is have the image move back in forth say 100 pixels to the right then a 100 pixels to the left. But I haven't been able to achieve this effect.

<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>

4

1 回答 1

4

这是一张图片：

<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>

渲染转换的初始化是有趣的一点。触发器只是用来演示启动情节提要。您不会在真正的应用程序中执行此操作，因为当您在移动时点击项目以这种方式移动它会变得混乱。（显然这在代码中很容易控制。）

这是另一个有趣的部分，相关的故事板：

<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-21T20:04:21.743 回答