Question

我有一个按钮的控件模板，如下所示：

<ControlTemplate x:Key="CopyButton" TargetType="{x:Type Button}">
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text=">>>>"/>
</ControlTemplate>

我该如何设置动画，以便当鼠标悬停在按钮上时，＆gt;箭头“移动”。我的意思是说文本在重复中类似于"> ", ">> ", ">>> ", ">>>>", " >>>", " >>", " >"。

Answer 1

您可以使用字符串动画。然而，结果并不是我认为最专业的。

<Button 
        Name="myAnimatedButton" 
        Width="200"
        Content=">">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <StringAnimationUsingKeyFrames 
                            Storyboard.TargetName="myAnimatedButton" 
                            Storyboard.TargetProperty="(Button.Content)"
                            AutoReverse="True">
                            <DiscreteStringKeyFrame Value=">" KeyTime="0:0:0" />
                            <DiscreteStringKeyFrame Value=">>" KeyTime="0:0:1" />
                            <DiscreteStringKeyFrame Value=">>>" KeyTime="0:0:2" />
                            <DiscreteStringKeyFrame Value=">>>>" KeyTime="0:0:3" />
                            <DiscreteStringKeyFrame Value=" >>>" KeyTime="0:0:4" />
                            <DiscreteStringKeyFrame Value="  >>" KeyTime="0:0:5" />
                            <DiscreteStringKeyFrame Value="   >" KeyTime="0:0:6" />
                        </StringAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>

WPF按钮动画

1 个答案: