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

Background属性的类型为Brush，因此在Value的{{1}}中，我们应提供DiscreteObjectKeyFrame而不是Brush 。由于您希望将图片用作背景，因此String应为ImageBrush。

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

KeyTime

Answer 2

内容是内部，在您的情况下是按钮，背景是视图。

试试这个： Storyboard.TargetProperty =＆＃34;背景＆＃34; 相反： Storyboard.TargetProperty =＆＃34;内容＆＃34;

<强> EDITED 尝试使用样式：

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

通过多个图像转换uwp按钮动画

2 个答案: