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

【问题标题】：How do i change the image in a "flip" animation in XAML?如何更改 XAML 中“翻转”动画中的图像？
【发布时间】：2018-10-26 20:56:18
【问题描述】：

所以我正在尝试为记忆游戏项目制作动画。我遇到问题的动画是翻转动画。我让图像翻转没有问题，但我想让它在 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?

【问题讨论】：

标签： c# wpf xaml animation

【解决方案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 不流畅，但你可以通过调整开始时间来接近

【讨论】：