Question

我使用swift 4 for macOS，我想用动画隐藏堆栈视图项。

我试过了：

class ViewController: NSViewController {

    @IBOutlet weak var box: NSBox!
    @IBOutlet weak var stack: NSStackView!
    var x = 0



    @IBAction func action(_ sender: Any) {
        if x == 0 {

            NSAnimationContext.runAnimationGroup({context in
                context.duration = 0.25
                context.allowsImplicitAnimation = true

                self.stack.arrangedSubviews.last!.isHidden = true
                self.view.layoutSubtreeIfNeeded()
                x = 1
            }, completionHandler: nil)

        } else {

            NSAnimationContext.runAnimationGroup({context in
                context.duration = 0.25
                context.allowsImplicitAnimation = true

                self.stack.arrangedSubviews.last!.isHidden = false
                self.view.layoutSubtreeIfNeeded()
                x = 0
            }, completionHandler: nil)

        }

    }
}

结果将是：

有效！但我对动画风格不满意。我的愿望是：

我按下按钮，红色视图会向右侧缩小
我按下按钮，左侧的红色视图会更大。

与侧边栏一样，或者如果您有一个splitview控制器，您将执行splitviewItem.animator().isCollapsed = true

这个show / hide动画很完美。这个愿望可能吗？

更新 self.stack.arrangedSubviews.last!.animator().frame = NSZeroRect

更新2

self.stack.arrangedSubviews.last!.animator().frame = NSRect(x: self.stack.arrangedSubviews.last!.frame.origin.x, y: self.stack.arrangedSubviews.last!.frame.origin.y, width: 0, height: self.stack.arrangedSubviews.last!.frame.size.height)

Answer 1

我只是创建一个简单的测试代码，可以为红色视图设置动画，而不是使用按钮，我只是使用了touchup，请看一下代码：

class ViewController: NSViewController {

let view1 = NSView()
let view2 = NSView()
let view3 = NSView()
var x = 0

var constraint: NSLayoutConstraint!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    view1.wantsLayer = true
    view2.wantsLayer = true
    view3.wantsLayer = true

    view1.layer?.backgroundColor = NSColor.orange.cgColor
    view2.layer?.backgroundColor = NSColor.green.cgColor
    view3.layer?.backgroundColor = NSColor.red.cgColor

    view1.translatesAutoresizingMaskIntoConstraints = false
    view2.translatesAutoresizingMaskIntoConstraints = false
    view3.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(view1)
    self.view.addSubview(view2)
    self.view.addSubview(view3)

    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[view1]|", options: [], metrics: nil, views: ["view1": view1]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[view2]|", options: [], metrics: nil, views: ["view2": view2]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[view3]|", options: [], metrics: nil, views: ["view3": view3]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[view1(==view2)][view2(==view1)][view3]|", options: [], metrics: nil, views: ["view1": view1, "view2": view2, "view3": view3]))

    constraint = NSLayoutConstraint(item: view3, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100)
    self.view.addConstraint(constraint)
}

override var representedObject: Any? {
    didSet {
    // Update the view, if already loaded.
    }
}

override func mouseUp(with event: NSEvent) {
    if x == 0 {

        NSAnimationContext.runAnimationGroup({context in
            context.duration = 0.25
            context.allowsImplicitAnimation = true

            constraint.constant = 0
            self.view.layoutSubtreeIfNeeded()
            x = 1
        }, completionHandler: nil)

    } else {

        NSAnimationContext.runAnimationGroup({context in
            context.duration = 0.25
            context.allowsImplicitAnimation = true

            constraint.constant = 100
            self.view.layoutSubtreeIfNeeded()
            x = 0
        }, completionHandler: nil)

    }
}
}

Answer 2

看看Organize Your User Interface with a Stack View示例代码。

我不喜欢视图控制器上的 heightContraint 和 -viewDidLoad 中的高度计算。下面的代码在动画前计算尺寸，并且仅在动画时添加禁忌素。

易碎约束

首先，您需要将约束的优先级设置为小于1000 （必需的约束），以实现所需的动画方向。这里是底部约束。

在为视图 in 和 out 设置视图动画时，我们将添加约束以的优先级设置为 1000（必需）约束）。

代码

@interface NSStackView (LOAnimation)
- (void)lo_toggleArrangedSubview:(NSView *)view;
@end

@implementation NSStackView (LOAnimation)
- (void)lo_toggleArrangedSubview:(NSView *)view
{
    NSAssert([self detachesHiddenViews], @"toggleArrangedSubview requires detachesHiddenViews YES");
    NSAssert([[self arrangedSubviews] containsObject:view], @"view not an arrangedSubview");
    CGFloat postAnimationHeight = 0;
    NSLayoutConstraint *animationContraint = nil;
    if (view.hidden) {
        view.hidden = NO; // NSStackView will re-add view to its subviews
        [self layoutSubtreeIfNeeded]; // calucalte view size
        postAnimationHeight = view.bounds.size.height;
        animationContraint = [view.heightAnchor constraintEqualToConstant:0];
        animationContraint.active = YES;
    } else {
        [self layoutSubtreeIfNeeded];  // calucalte view size
        animationContraint = [view.heightAnchor constraintEqualToConstant:view.bounds.size.height];
        animationContraint.active = YES;
    }
    [self layoutSubtreeIfNeeded]; // layout with animationContraint in place
    [NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) {
        context.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        animationContraint.animator.constant = postAnimationHeight;
        [self layoutSubtreeIfNeeded];
    } completionHandler:^{
        view.animator.hidden = (postAnimationHeight == 0);
        [view removeConstraint:animationContraint];
    }];
}
@end

使用动画隐藏NSStackView的视图项

2 个答案:

易碎约束

代码