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

【问题标题】：Transition uwp button animation through multiple images通过多个图像过渡 uwp 按钮动画
【发布时间】：2017-07-03 19:26:02
【问题描述】：

所以我想要一个按钮，它可以在一系列图像之间转换，从而使按钮看起来是动画的。

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

我想把它减少到一个按钮：

<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>

【问题讨论】：

为什么需要一个按钮？你点击它，图像就会改变？
@JustinXL 这是一个循环显示不同图像的动画按钮。按钮加载时会自动播放。
但是按钮有什么用呢？您也可以使用 Grid 来做到这一点。
对，但是我可以只指向一个故事板动画，而不是指定很多网格代码。
这对我来说没有任何意义。 Grid 比 Button 轻得多，也可以调用动画。您出于错误的原因使用按钮。您应该询问如何循环显示图像列表。在那里放一个按钮只会令人困惑。

标签： windows xaml uwp uwp-xaml

【解决方案1】：

Background 属性的类型是Brush，所以在DiscreteObjectKeyFrame 的Value 中，我们应该提供Brush 而不是String。由于您想使用图像作为背景，Brush 应该是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>

【讨论】：

我尝试了这个解决方案，但它似乎没有为我加载图像。
@jefhai 这对我来说效果很好。请检查您的资产并确保您在“Assets/MapImages”文件夹下拥有正确的图像，并且这些图像的“构建操作”已设置为“内容”。
@jefhai 你也可以使用ms-appx:///Assets/MapImages/innerRing.png 而不是Assets/MapImages/innerRing.png 来避免this 这样的问题。

【解决方案2】：

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

试试这个： Storyboard.TargetProperty="背景" 取而代之的是： Storyboard.TargetProperty="内容"

已编辑 尝试用样式制作：

            <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>

【讨论】：