Question

因此，我正在尝试为记忆游戏项目制作动画。我遇到麻烦的动画是翻转动画。我可以使图像翻转没有问题，但是我想让它在scale.x从-1变为0之后更改图像。这就是我到目前为止的内容：

     <Window.Resources>
    <ControlTemplate TargetType="Button" x:Key="ImageButton">
        <Image Source="gurbe1.jpg"
               x:Name="image"
               Height="{TemplateBinding Height}"
               Width="{TemplateBinding Width}" />

    </ControlTemplate>
</Window.Resources>
<Grid>
    <Button Template="{StaticResource ImageButton}"
            Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5">
        <Button.RenderTransform>
                <ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
            </Button.RenderTransform>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="0" Duration="0:0:1"  Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
                        <DoubleAnimation To="1" BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>



</Grid>
</Window>

我已经看过这里并尝试了一些东西，但是我无法使它起作用：

xaml change image source

How can I do multiple animations in a single storyboard in C#/XAML?

Answer 1

对于同样有这个问题的人，就这么简单：

<Grid>
    <Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
        <Button.RenderTransform>
                <ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
            </Button.RenderTransform>
        <Button.Template>
            <ControlTemplate>
                <Image Source="gurbe1.jpg"/>
            </ControlTemplate>
        </Button.Template>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="0" Duration="0:0:1"  Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
    <Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
        <Button.RenderTransform>
            <ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
        </Button.RenderTransform>
        <Button.Template>
            <ControlTemplate>
                <Image Source="gurbe2.jpg"/>
            </ControlTemplate>
        </Button.Template>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>



</Grid>

这不是一个平稳的atm，但是您可以通过调整开始时间来达到目标

如何在XAML中的“翻转”动画中更改图像？

1 个答案: