MonoMac上的NSLayoutConstraint动画

Question

我正在MonoMac中工作，并试图在单击按钮时动态地为控件的宽度和高度约束设置动画。读完以下几页后，我假设我必须使用我的约束的Animator代理。然而，下面的代码似乎并没有完成工作。

NSLayoutConstraint.constant ignoring animation http://cocoa-mono.org/archives/235/using-animator-with-frameorigin/

代码：

// makes sure we animate from 0 to calculated width
double newWidth = ...
widthConstraint.Constant = 0;

var animation = new NSAnimation() { Duration = 0.5, AnimationCurve = NSAnimationCurve.EaseInOut };
widthConstraint.Animations = new NSDictionary("constant", animation);
((NSLayoutConstraint)widthConstraint.Animator).Constant = newWidth;

这样做的结果是控件的宽度为newWidth，但它不是动画形式的--它会立即更改。

Answer 1

原来我用的是错误的动画类型。下面的代码可以工作：

// makes sure we animate from 0 to calculated width
float newWidth, newHeight = ...
widthConstraint.Constant = 0;
heightConstraint.Constant = 30;

var widthAnimation = new CABasicAnimation();
widthAnimation .TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseInEaseOut);
widthAnimation .Duration = 0.25;

var heightAnimation = new CABasicAnimation();
widthAnimation .TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseInEaseOut);
widthAnimation .Duration = 0.25;

widthConstraint.Animations = new NSDictionary("constant", widthAnimation);
heightConstraint.Animations = new NSDictionary("constant", heightAnimation);

NSAnimationContext.BeginGrouping();
NSAnimationContext.CurrentContext.Duration = widthAnimation.Duration;
NSAnimationContext.CurrentContext.CompletionHandler = new NSAction(() => ((NSLayoutConstraint)heightConstraint.Animator).Constant = newHeight);
((NSLayoutConstraint)widthConstraint.Animator).Constant = newWidth;
NSAnimationContext.EndGrouping();

这将运行宽度动画，然后运行高度动画。

Answer 2

你必须实际‘运行’动画。如下所示：

float newWidth = 300;
NSAnimationContext.RunAnimation((ctx) => { 
    ctx.Duration = 0.5;
    ctx.TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseInEaseOut);
    ((NSLayoutConstraint)widthConstraint.Animator).Constant = newWidth;
}, () => { 
    Console.WriteLine("Animation Complete"); 
});