如何在代码隐藏中动画转换

Question

我有一个自定义按钮。出于某种原因，我想在代码隐藏中应用转换。并且转换工作正常。但是当我尝试在变换上添加动画时，动画不会生效。我的代码如下。

    public partial class MyButton : Button
    {
        private TranslateTransform translate = new TranslateTransform() { X = 200, Y = 100 };

        public MyButton()
        {
            InitializeComponent();
            this.RenderTransform = new TransformGroup()
            {
                Children = 
                {
                    this.translate
                }
            };
        }

        protected override void OnClick()
        {
            base.OnClick();
            // Edit: I need to use Storyboard to synchronized animation1 and animation2.
            var sb = new Storyboard();
            var animation1 = new DoubleAnimation(200, -10, new Duration(new TimeSpan(0, 0, 0, 1, 0)));
            Storyboard.SetTarget(animation1, this.translate);
            Storyboard.SetTargetProperty(animation1, new PropertyPath("X"));
            sb.Children.Add(animation1);

            var animation2 = new DoubleAnimation(100, 0, new Duration(new TimeSpan(0, 0, 0, 1, 0)));
            Storyboard.SetTarget(animation2, this.translate);
            Storyboard.SetTargetProperty(animation2, new PropertyPath("Y"));
            sb.Children.Add(animation2);                
            sb.Begin(this);
        }
    }

谁能解释为什么以及如何为这个场景添加动画？

Answer 1

OP 说他毕竟需要一个故事板。问题似乎是有时 SetTarget() 不起作用。我不知道为什么不，我没有调查那个。我刚刚测试了 the workaround，发现它很好。

请注意，您必须在构造函数中执行 NameScope/RegisterName 操作。

public MyButton()
{
    InitializeComponent();

    this.RenderTransform = new TransformGroup()
    {
        Children =
        {
            this.translate
        }
    };

    NameScope.SetNameScope(this, new NameScope());
    RegisterName("translate", this.translate);
}

protected override void OnClick()
{
    base.OnClick();

    var sb = new Storyboard();
    var animation1 = new DoubleAnimation(200, -10, new Duration(new TimeSpan(0, 0, 0, 1, 0)));
    Storyboard.SetTargetName(animation1, "translate");
    Storyboard.SetTargetProperty(animation1, new PropertyPath(TranslateTransform.XProperty));
    sb.Children.Add(animation1);

    var animation2 = new DoubleAnimation(100, 0, new Duration(new TimeSpan(0, 0, 0, 1, 0)));
    Storyboard.SetTargetName(animation2, "translate");
    Storyboard.SetTargetProperty(animation2, new PropertyPath(TranslateTransform.YProperty));
    sb.Children.Add(animation2);

    sb.Begin(this);
}

简单的解决方案

您不需要创建两个具有相同参数的不同动画。事实证明你也不需要故事板；那是为了为一个事件或其他东西启动动画。我不知道你为什么不 google 这个。 Google 在 "wpf storyboard animation..." 的自动完成中有它。 It's here, anyway。

protected override void OnClick()
{
    base.OnClick();

    var animation1 = new DoubleAnimation(100, 0, 
                         new Duration(new TimeSpan(0, 0, 0, 1, 0)));

    translate.BeginAnimation(TranslateTransform.XProperty, animation1);
    translate.BeginAnimation(TranslateTransform.YProperty, animation1);
}

如何在代码隐藏中动画转换

How to Animate Transforms in code behind

wpf

wpf-controls

简单的解决方案