Core Animation action transition: how do it right - cocoa

I make a test project with one view inside of content view of main window. Window have two buttons: appear & disappear. I want animate view appearance when appear button pressed, and animate dissapearance when dissapear button pressed. And I want do this with layer actions.
In other words, I want to make animation every time view added or removed from superview. So, in code I just want to write [parent addSubview:view] or [view removeFromSuperview] and animation should work in that moments. So, Layer Actions seems fits my needs.
Here is app screenshot and source code (XCode 4.6):
Here is what I did to do that:
I create a view that will appear/dissapear and add layer action:
_coloredView = [[ColoredView alloc] initWithFrame:NSMakeRect(0, 0, 200, 200)];
_coloredView.bgColor = [NSColor yellowColor];
_coloredView.wantsLayer = YES;
// making appear transition from left
CATransition *appearTransition = [CATransition animation];
[appearTransition setDuration:2];
[appearTransition setType:kCATransitionPush];
[appearTransition setSubtype:kCATransitionFromLeft];
[_coloredView.layer addAnimation:appearTransition forKey:kCAOnOrderIn];
Then when appear button clicked, I call
[contentView addSubview:self.coloredView];
When disappear clicked, I call:
[self.coloredView removeFromSuperview];
And seems some part of things works. The yellow rectangle appears as it should first time. But, here is list of very strange things:
I should call addAnimation:forKey: every time when button clicked (after view was disappeared), since after first appearing animation will no longer work.
Disappear won't work at all (If I try add code after view initialization or before disappear button pressed)
When I try to add subview through animator, my transition not work - just default fade-in animation shown.
Seems that during movement from left to right some sort of fading works. It's visible when you set duration to bigger value.

Try #"subviews" instead of kCAOnOrderIn

Related

-[NSButton setImage:] only redraws the first time it's called

I'm working with a view-based NSTableView that uses a custom cell view with several controls in it. One of the controls is an image-only NSButton that either shows a checkmark image or no image at all. Additionally, when I mouse over one of these buttons that has no image, I would like a "faded" version of the checkmark image to be displayed while the mouse is inside the button.
I've gotten the code set up using NSTrackingArea to respond to -mouseEntered: and -mouseExited: events, calling -setImage: on the NSButton to show the faded checkmark while the mouse is inside the button, then set the image back to nil when the mouse exits.
As far as I can tell, all that code seems to be working as expected, but while the button will update and show the checkmark image the first time the mouse enters the view, then disappear when it exits, moving the mouse back over the button a second time does not cause the button to redraw for some reason, leaving it always blank after the first redraw no matter how many times the image gets set.
This is a summary of the relevant code:
- (void)refreshActiveButton
{
self.activeButton.image = self.activeImage;
}
- (void)mouseEntered:(NSEvent *)theEvent
{
NSLog(#"mouse entered %#", self.listItem.name);
self.mouseOverActiveButton = YES;
[self refreshActiveButton];
}
- (void)mouseExited:(NSEvent *)theEvent
{
NSLog(#"mouse exited %#", self.listItem.name);
self.mouseOverActiveButton = NO;
[self refreshActiveButton];
}
- (NSImage*)activeImage
{
NSLog(#"returning new active image");
if (self.listItem.isActive)
return [NSImage imageNamed:#"checkmark16"];
else if (self.mouseOverActiveButton)
return fadedCheckmark;
else
return nil;
}
The button is set up in a .xib file as a "Momentary Push In" (I've also tried "Momentary Change" - same behavior) with no title displayed and no border.
Running in the debugger, I've been able to confirm that:
The -mouseEntered: and -mouseExited: methods do continue to get called when moving the mouse over the button, even when the display doesn't update.
The correct image is being assigned to the button, and is returned back from the button instance after being set. (either the fadedCheckmark image when the mouse is inside, or nil when the mouse is outside)
I tried calling -setNeedsDisplay:YES on the button after assigning the image, as well as setting a layerContentRedrawPolicy of NSViewLayerContentsRedrawOnSetNeedsDisplay (the entire table view is layer-backed) with no change in behavior. Edit: also tried disabling layer backing altogether, with no change.
I feel like there must be something obvious staring me in the face that I'm missing, but if anyone can clue me in, I'd appreciate it.
The short answer: it's a bug! I've filed it with Apple as radar 20774731, and on Open Radar at http://openradar.appspot.com/radar?id=4957762287042560
The basic sequence is, if you set the button's image to something, then set it back to nil, all subsequent setImage: calls have no effect on the button, forever as far as I can tell. I did forget to mention in the original post that this is all on 10.10.3. I did find some interesting stuff when debugging though.
It appears that once you set an image on the NSButton, after an additional pass of the run loop, it gains an NSImageView as a subview, which is presumably doing the actual drawing of the image. Apple has said they are moving NSCell towards deprecation, so I guess this is the first step, with relieving NSButtonCell of the responsibility of actually drawing the image.
So, the first time you set the image, the image gets set correctly on both the NSButton and the NSImageView. When the image gets set back to nil, they both get their images set back to nil as well. However, when you set the image a second time, while the NSButton's own image property does return back the new image, the underlying NSImageView's image property remains nil. So that might explain why it's not drawing anything.
Ultimately what I ended up doing was using a plain NSImageView with a transparent NSButton right on top of it. I don't get the highlighting you get when you click on a button, but I can live with that.

Problems with Background: NSButton on NSView

I have a window with a custom view in it. This view get's an image drawn as a background in it. Let's assume for now that it's a structured grey background image.
- (void)drawRect:(NSRect)dirtyRect
{
[super drawRect:dirtyRect];
[self.titlebarBGImage drawInRect:dirtyRect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1];
}
In this custom view I added a square textured button and configured it in IB to have no border. In my AppDelegate I then give this button an image in the applicationDidFinishLaunching method:
// ...
// [[self.minimizeButton cell] setBackgroundColor:[NSColor clearColor]];
[self.minimizeButton setImage:minimizeImage];
// ...
Somehow the same background (titlebarBGImage) is also drawn as the buttons background, so it has a structured grey colored image, but scaled to fit the button size. This looks silly and is not what I want obviously. If I then uncomment the line with setBackgroundColor: the background is cleared, but the custom views background also doesn't shine through where the buttons image is transparent (the button image is a circle) so I get a rectangle where the windows background shines through (i.e. green in the example image), not the background of the view the button is in.
Here's an image to make it clear what happens:
From top to bottom:
What I want to achieve, i.e. views grey structured bg shines through buttons transparent area
What I get with upper code, i.e. without the uncommented line: The custom views background is drawn squeezed into the buttons background
what I get with the clearColor line, i.e. window color (green) shines through, not the bg of the view.
How can I get the top most result?
Edit: I pushed an example project to github so that you can see what I mean.
One way to solve this is using Core Animation Layers. I found out watching this tutorial. For that you got to your MainMenu.xib file, select the Button object and click on the layers tab in the Utilities (see screenshot (1)). Then activate Core Animation Layer for the top most View. With that all subelements also have Core Animation Layer activated (There might be performance issues with that if the project is bigger, so take care).
Next I subclassed the NSButton (calling it BPButtonView in my Github project which I updated now). Select the Button in the xib-file and change the Custom Class to BPButtonView, or whatever you called it.
The code for the new NSButton subclass looks like this:
#implementation BPButtonView
- (BOOL)wantsUpdateLayer {
return YES;
}
- (void)updateLayer {
if ( [self.cell isHighlighted] ) {
self.layer.contents = [NSImage imageNamed:#"buttonbg.png"];
} else {
self.layer.contents = [NSImage imageNamed:#"buttonbg.png"];
}
}
#end
I used the if-statement in the updateLayer method just to show, that depending of the buttons state (pressed vs. unpressed) you can provide a different picture. In the Video tutorial there's also a nice trick how to achieve a clean resize of a buttons picture.
And here's a screenshot of the resulting app. The red circle in the middle is the button and the green textured thing is the views background.

CALayer not leaving layer in proper state

In my Mac OS X app, I'm trying to animate an NSView using a CAAnimation applied to the layer-backed view's layer using this code:
I create a CAAnimation:
myAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
myAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
myAnimation.fromValue = [NSNumber numberWithFloat:1.0];
myAnimation.toValue = [NSNumber numberWithFloat:0.0];
myAnimation.duration = 3;
myAnimation.repeatCount = 1;
myAnimation.autoreverses = NO;
then I add it to the layer of my "myContentView" NSView:
[self.myContentView.layer removeAllAnimations];
[self.myContentView.layer addAnimation:myAnimation forKey:#"opacity"];
self.myContentView.layer.opacity = 0; //Set final value of opacity to this value
This actually works fine, except that every time I run the animation (triggered by a mouse click), I start by making the NSView's parent window visible and set it's alphaValue to 1, the myContentView shows for a fraction of a second at the last opacity value it was displaying when I called the above code and it hit removeAllAnimations.
It is like if the presentationLayer stays in cache and is redisplayed before the animation kicks in.
If I let the animation completely finish (by holding the mouse button down longer until it completely fades out), then the next time around, all is fine. It is only when it gets interrupted mid-way by removeAllAnimations that it seems to stick around.
I tried setting the opacity to 0 before every call to make the window visible, but that fails too. I have no idea why the layer is not set to an opacity of 0 even when I interrupt the animation.
Any suggestions? What am I not doing right?
Just to be clear, I'm not adding layers myself, just setting the NSView to be layer-backed.
My CAAnimation never calls anything on my controller if I set it as a delegate either... which is weird too. I must be doing something wrong for sure.
What is being drawn in the NSView is done programmatically in it's drawRect: method, using a bezier shape.
I found a working workaround. If I remove my view from the window's contentView just before displaying the said Window, and add it back just after, then, the ghost of the previous animation" seems to get flushed somehow and does not appear.

NSButtons leave artefacts when used as subviews of a custom toolbar view

I'm placing a few buttons in a simple rectangular NSview which acts as a custom toolbar. On first render the buttons/views come out as expected, but every time a button is pressed (and sometimes with no mouse interaction at all) artefacts start appearing.
Before
After
I can eliminate the artefacts by calling a [self.toolbarView setNeedsDisplay:YES] in all the action and focus methods but this seems like a hack, is there any clean way to deal with this?
It was a beginner's problem. In the drawRect method
- (void)drawRect:(NSRect)dirtyRect
I was using the param dirtyRect for drawing an outline of my view, assuming it was the view's bounds, where in fact it was only the area around the buttons that became dirty when they were pressed. The 'artefacts' were actually my outline being drawn in the wrong place.
By correctly using the bounds of the view
NSRect drawingRect = [self bounds];
the 'artefacts' no longer appeared.
You just try to set focus ring for a buttons to 'none' in IB.

Selectable area for NSButton

So I am basically trying to make a list of selectable text items (just a list of text, no button bezels, backgrounds, etc.). I suppose that I could make this happen with an NSTableview, but trying to make the table view completely transparent and still functional was giving me some issues. Anwyays, I am trying to do it with NSButtons that I create programatically and add to my view in a list, without any background or bezel. However, when I set the properties to make the button transparent and without bezel, the clickable area of the button is relegated to the text of the title of the button alone. Clicking anywhere else that the button should be (around the title) no longer works. Here is the code I am using. I want to be able to click anywhere in the rect in which I create the button in order to cause a click. FYI I have tried NSSwitchButton without the checkbox image and it is the same thing. Thanks for your help!
for(NSString *theTask in theTasks){
NSButton *theCheckBox = [[[NSButton alloc] initWithFrame:NSMakeRect(xCoordinate + 25, yCoordinate + ([tasksWindow frame].size.height/2) - 60, [tasksWindow frame].size.width - 40, 25)] autorelease];
[theCheckBox setButtonType:NSToggleButton];
[theCheckBox setAction:#selector(taskChecked:)];
[[theCheckBox cell] setBackgroundColor:[NSColor clearColor]];
[[theCheckBox cell] setBordered:NO];
NSAttributedString *theTitle = [[[NSAttributedString alloc] initWithString:[NSString stringWithFormat:#"%#", theTask] attributes:[NSDictionary dictionaryWithObject:[NSColor whiteColor] forKey:NSForegroundColorAttributeName]] autorelease];
[theCheckBox setAttributedTitle:theTitle];
[[tasksWindow contentView] addSubview:theCheckBox];
yCoordinate -= 20;
}
UPDATE: I've been able to confirm that setting the background color to clear is what seems to cause the button to stop responding to clicks within its full boundaries (not the removal of the border).
So to answer my own question, it was because I was overlaying the transparent buttons atop a transparent NSWindow (which refuses mouse events). I simply had to set the window NOT to ignore mouse events and the behavior went away.

Resources