blocks|key|25339|text|我只是创建了一个简单的测试代码，可以动画红色视图，而不是使用按钮，我只是使用touchup，请看代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|25340|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:%7C[view1]%7C",+options:+[],+metrics:+nil,+views:+["view1":+view1]))
++++self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat:+"V:%7C[view2]%7C",+options:+[],+metrics:+nil,+views:+["view2":+view2]))
++++self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat:+"V:%7C[view3]%7C",+options:+[],+metrics:+nil,+views:+["view3":+view3]))
++++self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat:+"H:%7C[view1(==view2)][view2(==view1)][view3]%7C",+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)

++++}
}
}|code-block|syntax|javascript|25341|​|25342|📷|atomic|offset|length|25343|25344|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/bcf92e9098100e7908d75e5faaea10f0.gif|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

I just create a simple testing code which can animate the red view, instead of using button, I just used touchup, please have a look at the code:

<pre><code>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)

 }
}
}
</code></pre>

<a href="https://i.stack.imgur.com/eeOL6.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eeOL6.gif" alt="enter image description here"></a>

blocks|key|2692650|text|看一看Organize+Your+User+Interface+with+a+Stack+View示例代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2692651|我不喜欢视图控制器上的heightContraint和-viewDidLoad中的高度计算。下面的代码在动画之前计算大小，并且只在动画时添加斜面。|2692652|可打破的约束|2692653|首先，您需要将约束的优先级设置为低于1000+(必需的约束)的值，以确定动画的方向。下面是最下面的限制条件。|2692654|当我们为视图in和out添加动画时，我们将添加约束来执行此操作，并将优先级设置为1000+(必需的约束)。|style|BOLD|2692655|📷|atomic|2692656|2692657|代码|2692658|@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:%5E(NSAnimationContext+*context)+{
++++++++context.timingFunction+=+[CAMediaTimingFunction+functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
++++++++animationContraint.animator.constant+=+postAnimationHeight;
++++++++[self+layoutSubtreeIfNeeded];
++++}+completionHandler:%5E{
++++++++view.animator.hidden+=+(postAnimationHeight+==+0);
++++++++[view+removeConstraint:animationContraint];
++++}];
}
@end|code-block|syntax|javascript|2692659|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/documentation/appkit/views_and_controls/organize_your_user_interface_with_a_stack_view|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/8c80e8f392e3cdda8493fc34208e11f9.png|imageAlt|2|https://ask.qcloudimg.com/http-save/yehe-900000/04d69c6fb379f0780a0cdbff3a9ba1d0.png^0|3|1A|0|0|0|0|0|6|2|9|3|0|0|1|1|0|0|1|2|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1J|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1K|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1L|8|@$A|1M|B|1N|L|M]|$A|1O|B|1P|L|M]]|9|@]|C|$]]|$1|N|3|O|5|P|7|1Q|8|@]|9|@$A|1R|B|1S|1|1T]]|C|$]]|$1|Q|3|O|5|P|7|1U|8|@]|9|@$A|1V|B|1W|1|1X]]|C|$]]|$1|R|3|S|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|T|3|U|5|V|7|1Z|8|@]|9|@]|C|$W|X]]|$1|Y|3|-4|5|6|7|20|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|17|12|18|C|$19|1A|1B|-4]]|1C|$5|17|12|18|C|$19|1D|1B|-4]]]]

Have a look at <a href="https://developer.apple.com/documentation/appkit/views_and_controls/organize_your_user_interface_with_a_stack_view" rel="nofollow noreferrer">Organize Your User Interface with a Stack View</a> sample code.
I disliked the heightContraint on the view controller and the height calculation in the -viewDidLoad. The code below calculation the size before animating and only adds the contrain while animating.
<h3>Breakable Contraint</h3>
First you need to set the priority of the contraint to something lower than 1000 (required constraint) for the direction you want the animation. Here the bottom contraint.
While we animate the view in and out, we will add contraint to do so with a priority of 1000 (required constraint).
<img src="https://i.stack.imgur.com/vaXFv.png%20png" width="245">
<img src="https://i.stack.imgur.com/IN5wW.png" width="246">
<h3>Code</h3>
<pre><code>@interface NSStackView (LOAnimation)
- (void)lo_toggleArrangedSubview:(NSView *)view;
@end

@implementation NSStackView (LOAnimation)
- (void)lo_toggleArrangedSubview:(NSView *)view
{
 NSAssert([self detachesHiddenViews], @&quot;toggleArrangedSubview requires detachesHiddenViews YES&quot;);
 NSAssert([[self arrangedSubviews] containsObject:view], @&quot;view not an arrangedSubview&quot;);
 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
</code></pre>

I working with swift 4 for macOS and I would like to hide an stack view item with animation.

I tried this:

<pre><code>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)

 }

 }
}
</code></pre>

The result will be:

<a href="https://i.stack.imgur.com/9wqdg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9wqdg.gif" alt="enter image description here"></a>

It works!
But I am not happy with the animation style.
My wish is:

<ul>
<li>I press the button, the red view will be smaller to the right side</li>
<li>I press the button, the red view will be larger to the left side.</li>
</ul>

Like a sidebar or if you have an splitview controller and you will do <code>splitviewItem.animator().isCollapsed = true</code>

this animation of show/hide is perfect.
Is this wish possible?

UPDATE
<code>self.stack.arrangedSubviews.last!.animator().frame = NSZeroRect</code>

<a href="https://i.stack.imgur.com/7y4o1.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7y4o1.gif" alt="enter image description here"></a>

UPDATE 2

<code>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)</code>

<a href="https://i.stack.imgur.com/9RPCC.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9RPCC.gif" alt="enter image description here"></a>

Hide view item of NSStackView with animation

我正在使用macOS的swift 4，我想隐藏一个带有动画的堆栈视图项目。我试过这个：class ViewController: NSViewController {    @IBOutlet weak var box: NSBox!    @IBOutlet weak var stack: NSStackView! ...

问用动画隐藏NSStackView的视图项目
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用动画隐藏NSStackView的视图项目EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用动画隐藏NSStackView的视图项目
EN