WPF按钮动画

Question

我有一个按钮的控制模板，长这样:

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

我该如何制作动画，使得当鼠标悬停在按钮上时，“>”箭头会“移动”。我的意思是文本类似于"> ", ">> ", ">>> ", ">>>>", " >>>", " >>", " >"以此类推。

- David Ward

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>

- Wallstreet Programmer

---

谢谢，这正是我想要的。 我已经注意到了并且现在会更加努力地思考如何更好地实现它……如果你有任何建议的话…… :) - David Ward

使用Path创建一个箭头，并通过双重动画增加其左边距来使其移动。为了更加华丽，可以使用箭头图像和带有移动箭头的动态gif图像，并在鼠标悬停时使用该动态gif图像。 - Wallstreet Programmer

除了动画gif部分外，同意。除了96 DPI以外，WPF动画看起来比动画gif更好，并且在96 DPI处看起来同样好。WPF动画也比动画gif更容易创建和更灵活。 - Ray Burns