通过多个图像过渡 uwp 按钮动画

Question

所以我想要一个按钮，它可以通过一系列图像进行转换，从而使按钮看起来像动画。

目前我创建了一个由三个按钮组成的网格单元格，它们始终只有一张动画图像堆叠在一起。

我想将其缩减为一个按钮：

<Button x:Name="MyButton" Tag="2204" Click="Room_Click" Height="60" Width="60">
    <Button.Resources>
        <Storyboard x:Key="MyButtonStoryBoard" BeginTime="0:0:0" RepeatBehavior="Forever">

        // animate here

            // what I tried but doesn't work
            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0"  RepeatBehavior="Forever"  Storyboard.TargetName="MyButtonStoryBoard" Storyboard.TargetProperty="Content">
                 <DiscreteObjectKeyFrame KeyTime="0:0:0" >
                      <DiscreteObjectKeyFrame.Value>
                          <BitmapImage UriSource="Assets/MapImages/innerRing.png" />
                      </DiscreteObjectKeyFrame.Value>
                 </DiscreteObjectKeyFrame>
                 <DiscreteObjectKeyFrame KeyTime="0:0:0.03" >
                      <DiscreteObjectKeyFrame.Value>
                           <BitmapImage UriSource="Assets/MapImages/middleRing.png" />
                      </DiscreteObjectKeyFrame.Value>
                 </DiscreteObjectKeyFrame>
                 <DiscreteObjectKeyFrame KeyTime="0:0:0.06" >
                      <DiscreteObjectKeyFrame.Value>
                         <BitmapImage UriSource="Assets/MapImages/outerRing.png" />
                      </DiscreteObjectKeyFrame.Value>
                 </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>

        </Storyboard>
    </Button.Resources>
</Button>

目标是制作 XAML 文件中的所有动画。我想知道如何在按钮上制作这种动画。例如考虑告诉按钮显示 GIF，这就是它应该的样子，但使用单独的图像而不是 gif 文件。

编辑：

这是我的第二次尝试。但是我无法更改背景值：

<Button x:Name="BlowMoldingButton" Tag="2204" Click="Room_Click" Height="60" Width="60" >
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
             <BeginStoryboard>
                  <Storyboard>

                     // this is not working
                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BlowMoldingButton" Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame Value="/Assets/MapImages/innerRing.png" KeyTime="0:0:1" />
                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

Answer 1

内容是内部，在你的例子中是按钮，背景是视图。

试试这个： Storyboard.TargetProperty="Background" 取而代之的是： Storyboard.TargetProperty="Content"

已编辑 尝试制作风格：

            <Button x:Name="BlowMoldingButton" Tag="2204" Click="Room_Click" Height="60" Width="60" Style="{StaticResource ButtonStyle}" />



            <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0"  RepeatBehavior="Forever"  Storyboard.TargetName="MyButtonStoryBoard" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" >
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <BitmapImage UriSource="Assets/MapImages/innerRing.png" />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.03" >
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <BitmapImage UriSource="Assets/MapImages/middleRing.png" />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.06" >
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <BitmapImage UriSource="Assets/MapImages/outerRing.png" />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 2

Background property is Brush, so in the Value of DiscreteObjectKeyFrame, we should provide a Brush not a String. And as you want to use images as background, the Brush should be ImageBrush的类型。

因此您可以像下面这样更改代码（出于测试目的，我更改了 Duration 和 KeyTime）：

<Button x:Name="BlowMoldingButton" Tag="2204"  Height="60" Width="60" >
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0:0:3" RepeatBehavior="Forever" Storyboard.TargetName="BlowMoldingButton" Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" >
                            <DiscreteObjectKeyFrame.Value>
                                <ImageBrush ImageSource="Assets/MapImages/innerRing.png" />
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:1" >
                            <DiscreteObjectKeyFrame.Value>
                                <ImageBrush ImageSource="Assets/MapImages/middleRing.png" />
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:2" >
                            <DiscreteObjectKeyFrame.Value>
                                <ImageBrush ImageSource="Assets/MapImages/outerRing.png" />
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

通过多个图像过渡 uwp 按钮动画

Transition uwp button animation through multiple images

windows

xaml

uwp

uwp-xaml