Как я могу изменить изображение в "перевернуть" анимацию в XAML?

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 изменить источник изображения

Как я могу сделать несколько анимаций вотдельная раскадровка на 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>

Это не гладкий атм, но вы можете подойти довольно близко, настроив время начала