Smooth window scaling?

howdy. I’m wondering how to do scaling of a window from one size to another smoothly. similar to when you’re in Finder on OSX and press the spacebar to preview a selected file. how that window scales up nice and smooth. Every time I’ve tried to rescale a window/component via some kind of timer, the results are super jerky and not smooth at all.

Your best bet (which Apple uses in a huge number of instances, including the genie effect, fullscreen transition, and the Finder preview) is to snapshot the component at its destination dimensions, then overlay it on the current component and animate without updating the live component in the background. This way, you’re only doing simple 2D image transforms instead of animating the entire contents of a live component, which is an extremely heavyweight operation.

If you want to see these transitions in action in macOS, hold shift when doing some sort of window animating action to make it play in slow motion. (Fun fact: Steve Jobs did this when demoing the new Quartz animations in OS X!)


any ideas how to do the snapshot process itself, while hiding the existing gui until it’s resized to the new size?

Try doing something along the lines of Component::setVisible(false), Component::setSize(width, height), Component::createComponentSnapshot, -show snapshot in place of component here, animate-, Component::setVisible(true).

I can’t say off the top of my head exactly how you’d cleanly do the “show image and animate” part (I’d imagine it would involve an Image component and a ComponentAnimator) but hopefully that can get you started.

1 Like

FYI the ComponentAnimator already has an option to use a snapshot of the component - see the ‘useProxyComponent’ flag

1 Like