Скрыть элемент просмотра стека с помощью анимации

Question

Я работаю со Swift 4 для 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

эта анимация шоу / скрытия идеальна. Возможно ли это желание?

ОБНОВИТЬ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

Взгляните на Организуйте свой пользовательский интерфейс с помощью примера кода Stack View.

Мне не понравился heightContraint в контроллере представления и вычисление высоты в -viewDidLoad . Код ниже вычисляет размер перед анимацией и добавляет ограничение только во время анимации.

Разрушаемое ограничение

Сначала вам нужно установить приоритет ограничения ниже 1000 (обязательное ограничение) для направления, в котором вы хотите анимировать. Здесь нижний предел.

Пока мы анимируем представление , мы добавим для этого ограничение с приоритетом 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