使用 System.Windows.Media.Animation 移动按钮动画

Posted 2023-02-22

【中文标题】使用 System.Windows.Media.Animation 移动按钮动画

【英文标题】：Shifting a Button Animation using System.Windows.Media.Animation

【发布时间】：2014-02-23 08:37:25

【问题描述】：

我的窗口中有一个Button，我如何使用 C# 中的代码来设置动画，使其向左移动 100 像素，一旦我点击它。

private void myButton_Click(object sender, System.Windows.RoutedEventArgs e)

    // TODO: Add event handler implementation here.
    DoubleAnimation _DoubleAnimation = new DoubleAnimation();
    _DoubleAnimation.From = 0;
    _DoubleAnimation.To = 100;
    _DoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));

    myButton.BeginAnimation(Button.RenderTransformOriginProperty, _DoubleAnimation);

【参考方案1】：

如果要改变大小，这种情况下Animation中必须是WidthProperty：

myButton.BeginAnimation(Button.WidthProperty, _DoubleAnimation);

为避免动画中的尖锐过渡，您必须明确设置Button的宽度：

<Button Name="myButton" 
        Width="30" 
        Content="Test"  
        Click="myButton_Click" />

并且在动画中只指定To 值：

private void myButton_Click(object sender, System.Windows.RoutedEventArgs e)

    DoubleAnimation _DoubleAnimation = new DoubleAnimation();
    _DoubleAnimation.To = 100;
    _DoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));

    myButton.BeginAnimation(Button.WidthProperty, _DoubleAnimation);

如果想在Animation中移动Button，可以使用ThicknessAnimation：

感谢@Rohit Vats的评论

private void myButton_Click(object sender, System.Windows.RoutedEventArgs e)

    ThicknessAnimation animation = new ThicknessAnimation(new Thickness(0), 
                                                          new Thickness(100, 0, 0, 0), 
                                                          new Duration(new TimeSpan(0, 0, 1)),
                                                          FillBehavior.HoldEnd);

    myButton.BeginAnimation(Button.MarginProperty, animation);
 

【讨论】：

嘿@Anatoily 我猜OP想要将按钮向左移动100像素而不使用按钮的宽度。至少我可以从这个问题中推断出什么。因此，我也发布了我的答案以移动按钮，但如果需要宽度，您的解决方案可以正常工作。为你+1。 :)

@Rohit Vats：是的，我不明白这个问题，抱歉。你的方案更适合OP。

【参考方案2】：

如果您想将按钮向左移动 100 像素，则必须将边距设置为最后一个值的 -100，这显然 无法实现通过 DoubleAnimation，因为它只能为双精度值设置动画，而 Margin 的类型是厚度。

您可以使用 Storyboard 来实现：

Storyboard myStoryboard = new Storyboard();
ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
animation.BeginTime = TimeSpan.FromSeconds(0);
Storyboard.SetTarget(animation, myButton);
Storyboard.SetTargetProperty(animation, new PropertyPath("Margin"));
double left = myButton.Margin.Left - 100;
DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame(new Thickness(left,
                                             0, 0, 0), TimeSpan.FromSeconds(1));
animation.KeyFrames.Add(keyFrame);
myStoryboard.Children.Add(animation);
myStoryboard.Begin();

---

对于平滑过渡，您可以做的是添加多个关键帧并以 0.1 秒的间隔播放它们。如果您需要更平滑的过渡，请将其分解为更小的间隔。

这就是你的做法：

Storyboard myStoryboard = new Storyboard();
ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
animation.BeginTime = TimeSpan.FromSeconds(0);
Storyboard.SetTarget(animation, myButton);
Storyboard.SetTargetProperty(animation, new PropertyPath("Margin"));
for (int count = 1; count < 21; count++)

   double left = myButton.Margin.Left - (5 * count);
   DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame(new
                   Thickness(left, 0, 0, 0), TimeSpan.FromSeconds(0.05 * count));
   animation.KeyFrames.Add(keyFrame);

myStoryboard.Children.Add(animation);
myStoryboard.Begin();

【讨论】：

嗨，当动画开始时，它只是在 1 秒后从一个点跳到预期的结束点。我想要一个平稳的过渡。

@RStyle - 请查看答案中的更新以实现平滑过渡。

很好，不能使用双动画，因为它在 xml 中看起来更简单，我认为我可以在 c# 中使用。

DoubleAnimation 不可能。但是，您可以使用 ThicknessAnimation 来做到这一点。

【参考方案3】：

这取决于您如何在页面上放置Button。如果您想按坐标布局元素（不推荐），您可以将按钮放在Canvas 上。然后你可以使用这样的代码：

<Canvas>
    <Button Canvas.Left="100" Canvas.Top="100" Name="btnOk" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Click="BtnOk_OnClick">Ok</Button>
</Canvas>

和代码隐藏：

var doubleAnimation = new DoubleAnimation();
double left = Canvas.GetLeft(btnOk);
doubleAnimation.From = left;
doubleAnimation.To = left - 100;
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
btnOk.BeginAnimation(Canvas.LeftProperty, doubleAnimation);