Create an animation like that of an NSPopOver

Question

I'm working at a custom Window object that is displayed as child in a parent Window.
For this object I'd like to create an animation like that of an NSPopover.

My first idea is to create a Screenshot of the child Window, than animate it using Core Animation and finally showing the real Window.

Before begging the implementation I would like to know if exists a better method and what you think about my solution.

Answer 1

It's not trivial. Here's how I do it:

@interface ZoomWindow : NSWindow
{
    CGFloat animationTimeMultiplier;
}

@property (nonatomic, readwrite, assign) CGFloat animationTimeMultiplier;

@end

@implementation ZoomWindow

@synthesize animationTimeMultiplier;

- (NSTimeInterval)animationResizeTime: (NSRect)newWindowFrame
{
    float multiplier = animationTimeMultiplier;

    if (([[NSApp currentEvent] modifierFlags] & NSShiftKeyMask) != 0) {
        multiplier *= 10;
    }

    return [super animationResizeTime: newWindowFrame] * multiplier;
}

@end

@implementation NSWindow (PecuniaAdditions)

- (ZoomWindow*)createZoomWindowWithRect: (NSRect)rect
{
    // Code mostly from http://www.noodlesoft.com/blog/2007/06/30/animation-in-the-time-of-tiger-part-1/
    // Copyright 2007 Noodlesoft, L.L.C.. All rights reserved.
    // The code is provided under the MIT license.

    // The code has been extended to support layer-backed views. However, only the top view is
    // considered here. The code might not produce the desired output if only a subview has its layer
    // set. So better set it on the top view (which should cover most cases).

    NSImageView *imageView;
    NSImage *image;
    NSRect frame;
    BOOL isOneShot;

    frame = [self frame];

    isOneShot = [self isOneShot];
    if (isOneShot) {
        [self setOneShot: NO];
    }

    BOOL hasLayer = [[self contentView] wantsLayer];
    if ([self windowNumber] <= 0) // <= 0 if hidden
    {
        // We need to temporarily switch off the backing layer of the content view or we get
        // context errors on the second or following runs of this code.
        [[self contentView] setWantsLayer: NO];

        // Force window device. Kinda crufty but I don't see a visible flash
        // when doing this. May be a timing thing wrt the vertical refresh.
        [self orderBack: self];
        [self orderOut: self];

        [[self contentView] setWantsLayer: hasLayer];
    }

    // Capture the window into an off-screen bitmap.
    image = [[NSImage alloc] initWithSize: frame.size];
    [[self contentView] lockFocus];
    NSBitmapImageRep* rep = [[NSBitmapImageRep alloc] initWithFocusedViewRect: NSMakeRect(0.0, 0.0, frame.size.width, frame.size.height)];
    [[self contentView] unlockFocus];
    [image addRepresentation: rep];

    // If the content view is layer-backed the above initWithFocusedViewRect call won't get the content
    // of the view (seems it doesn't work for CALayers). So we need a second call that captures the
    // CALayer content and copies it over the captured image (compositing so the window frame and its content).
    if (hasLayer)
    {
        NSRect contentFrame = [[self contentView] bounds];
        int bitmapBytesPerRow = 4 * contentFrame.size.width;

        CGColorSpaceRef colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
        CGContextRef context = CGBitmapContextCreate (NULL,
                                                      contentFrame.size.width,
                                                      contentFrame.size.height,
                                                      8,
                                                      bitmapBytesPerRow,
                                                      colorSpace,
                                                      kCGImageAlphaPremultipliedLast);
        CGColorSpaceRelease(colorSpace);

        [[[self contentView] layer] renderInContext: context];
        CGImageRef img = CGBitmapContextCreateImage(context);
        CFRelease(context);
        NSImage *subImage = [[NSImage alloc] initWithCGImage: img size: contentFrame.size];
        CFRelease(img);
        [image lockFocus];
        [subImage drawAtPoint: NSMakePoint(0, 0)
                     fromRect: NSMakeRect(0, 0, contentFrame.size.width, contentFrame.size.height)
                    operation: NSCompositeCopy
                     fraction: 1];
        [image unlockFocus];
    }

    ZoomWindow *zoomWindow = [[ZoomWindow alloc] initWithContentRect: rect
                                                           styleMask: NSBorderlessWindowMask
                                                             backing: NSBackingStoreBuffered
                                                               defer: NO];
    zoomWindow.animationTimeMultiplier = 0.3;
    [zoomWindow setBackgroundColor: [NSColor colorWithDeviceWhite: 0.0 alpha: 0.0]];
    [zoomWindow setHasShadow: [self hasShadow]];
    [zoomWindow setLevel: [self level]];
    [zoomWindow setOpaque: NO];
    [zoomWindow setReleasedWhenClosed: NO];
    [zoomWindow useOptimizedDrawing: YES];

    imageView = [[NSImageView alloc] initWithFrame: [zoomWindow contentRectForFrameRect: frame]];
    [imageView setImage: image];
    [imageView setImageFrameStyle: NSImageFrameNone];
    [imageView setImageScaling: NSScaleToFit];
    [imageView setAutoresizingMask: NSViewWidthSizable | NSViewHeightSizable];

    [zoomWindow setContentView: imageView];

    [self setOneShot: isOneShot];

    return zoomWindow;
}

- (void)fadeIn
{
    [self setAlphaValue: 0.f];
    [self orderFront: nil];

    [NSAnimationContext beginGrouping];
    [[NSAnimationContext currentContext] setDuration: 0.3];
    [[self animator] setAlphaValue: 1.f];
    [NSAnimationContext endGrouping];
}

- (void)zoomInWithOvershot: (NSRect)overshotFrame withFade: (BOOL)fade makeKey: (BOOL)makeKey
{
    [self setAlphaValue: 0];

    NSRect frame = [self frame];
    ZoomWindow *zoomWindow = [self createZoomWindowWithRect: frame];
    zoomWindow.alphaValue = 0;

    [zoomWindow orderFront: self];

    NSDictionary *windowResize = @{NSViewAnimationTargetKey: zoomWindow,
                                  NSViewAnimationEndFrameKey: [NSValue valueWithRect: overshotFrame],
                                  NSViewAnimationEffectKey: NSViewAnimationFadeInEffect};

    NSArray *animations = @[windowResize];
    NSViewAnimation *animation = [[NSViewAnimation alloc] initWithViewAnimations: animations];

    [animation setAnimationBlockingMode: NSAnimationBlocking];
    [animation setAnimationCurve: NSAnimationEaseIn];
    [animation setDuration: 0.2];
    [animation startAnimation];

    zoomWindow.animationTimeMultiplier = 0.5;
    [zoomWindow setFrame: frame display: YES animate: YES];

    [self setAlphaValue: 1];

    if (makeKey) {
        [self makeKeyAndOrderFront: self];
    } else {
        [self orderFront: self];
    }
    [zoomWindow close];
}

This is implemented in an NSWindow category. So you can call:

- (void)zoomInWithOvershot: (NSRect)overshotFrame withFade: (BOOL)fade makeKey: (BOOL)makeKey

on any NSWindow.

I should add that I haven't been able to get both animations to run at the same time (fade and size), but the effect is quite similar to how NSPopover does it. Maybe someone else can fix the animation issue.

Needless to say this code works on 10.6 too where you don't have NSPopover (that's why I have written it in the first place).