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 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个像素（在一秒钟的时间内），然后再向后移动我添加了一个缓动函数，使其更有趣。

图像动画：使图像向左移动然后向后移动

1 个答案: