CoreAnimation Sample Code: ArtGallery 1.0.1
There have been improvements since the first version of ArtGallery. Most notably, there's an example of using a Core Image transition in CoreAnimation, as well as some sound effects.Clicking on an image causes a Mario64-esque ripple as the item transitions to black-and-white. There is also keyboard navigation now and the on-screen arrow controls have been changed to resemble HUD controls.
The complete change list:
- Changed navigation arrow appearance to dark HUD style
- Added support methods to NSImage-Extras category:
- (NSImage*)imageByFillingVisibleAlphaWithColor:(NSColor*)fillColor;
- (NSImage*)imageByConvertingToBlackAndWhite;
- Added sound effects
- Added slow-motion for visual effects, activated with the shift key
- Added keyboard-based navigation
- Added ripple effect for switching between normal and alternate images
- Changed contentBorderThickness for main window
Download: ArtGallery Xcode Project (156k)
Enjoy.
(I experimented with using CAScrollLayer as suggested by Alexander Rauchfuss, but haven't been able to get the transition animations to display correctly in that setting yet.)
CoreAnimation Sample Code: ArtGallery 1.0.1
Posted Dec 3, 2007 — 20 comments below
Posted Dec 3, 2007 — 20 comments below
patrick — Dec 03, 07 5159
Two small niggles:
- Debug configuration doesn't work.
- Ripple effect center is not 'under' the mouse pointer, but slightly above it.
To get the most out of this new Cocoa technology, programmers increasingly need to have a sense of style too. A rare combination, but you seem to be one of the happy few :-)
Chris Ryland — Dec 03, 07 5160
Chris Ryland — Dec 03, 07 5161
AndyK — Dec 03, 07 5162
"ArtGallery(1092,0xb0103000) malloc: free_garbage: garbage ptr = 0x10a3f50, has non-zero refcount = 1 "
at launch? Am I missing something simple?Todd M — Dec 03, 07 5163
Been meaning to say hi - met you at 111 Minna with Tyler during WWDC, if that rings a bell.
Keep up the great work.
-t.
Alexander Rauchfuss — Dec 03, 07 5164
Scott Stevenson — Dec 03, 07 5165
I forgot to turn gargbage collection on for that configuration.
Ripple effect center is not 'under' the mouse pointer, but slightly above it
Good eye. I'll take a look at it.
@Chris Ryland: There's some funny glitch after a color/B&W transition where the animation stops but then the picture snaps into its final resting appearance
I know. Not sure what to do about it.
Why do you synthesize all the accessors for the private members in that fashion?
I think you're asking why I declared some properties privately? It's the same reason you'd declare regular methods to be private -- because they're implementation details not to be shared with clients of the class. Using properties just reduces the amount of code I have to write and keeps things simpler in general.
@AndyK: Has anyone else seen the console output something akin to
Yes. It's some sort of message from the runtime about garbage collection. I haven't looked at it closely yet.
Joachim Bengtsson — Dec 04, 07 5167
Messages like those are the reason I was wary of using the GC yet in a comment I posted here on theobroma previously... It shows up now and then in my apps as well, and it really worries me, although I haven't so far crashed because of anything I can correlate to the GC since the GM of Leopard came out.
BloW — Dec 04, 07 5170
I have a (stupid) question: how are we doing to execute the program?
Thanks.
Andre — Dec 04, 07 5171
Bravo!
Scott Stevenson — Dec 04, 07 5172
You need to open the project in Xcode then press Command-R to build and run it. It only works on Leopard.
Tim R — Dec 10, 07 5188
I suppose that using the first method is a little easier, but not as customizable as the second. Am I correct in assuming this?
I'm creating the sliding puzzle game (15) as a learning experience, and I'm not sure which method to use.
Scott Stevenson — Dec 11, 07 5191
That's probably basically true, but the layer-centric approach is also much more scalable. Unless you're very new to Cocoa, I would develop the puzzle game using layers. I think it will leave you with a bet better understanding of the framework.
Just to be clear, using layers directly is not quite as easy as NSView, but still very approachable and Cocoa like. They're Objective-C classes, have properties, support KVC, and so on. They don't automatically handle mouse and keyboard events, and the layers only accept CGImageRefs for image content right now -- but you can draw into layers directly.
yogi patel — Aug 19, 08 6260
Has anyone experienced problems running a debug compiled version of this? Release mode works fine, but the debug version throws a EXC_BAD_ACCESS in THImageBrowserContentLater at setShouldDisplayMonochromeImage. This only occurs when clicking on an image, the left/right browsing works fine. Weird.
Scott Stevenson — Aug 20, 08 6265
I may have forgotten to enable garbage collection for the debug profile. Try turning that on and see what happens.
Yogi — Aug 21, 08 6296
Scott Stevenson — Aug 21, 08 6297
I did enable garbage collection, but sometimes the setting gets lost when Xcode opens it. It might be some sort of bug between different versions.
Still have the crashyness on debug though
Double-check that garbage collection is on for debug. If it still crashes, email me the stack trace (the list of function calls leading up to the crash).
Percy — Sep 30, 08 6417
Scott Stevenson — Oct 02, 08 6421
In this case, "unsupported" just means it's turned off. I did enable it when I was working on the project, but it might be that it wasn't turned on for the default configuration. In any case, you can just turn it on. No need to change the gcc version or anything.
Petr Mifek — Dec 02, 08 6548
@Chris Ryland: There's some funny glitch after a color/B&W transition where the animation stops but then the picture snaps into its final resting appearance
The glitch is there because of the used inputShadingImage (the file Ripple.tiff in the archive) - the animation is masked with the value of the mask defined in right the centre of that image just before it stops. So had the Ripple.tiff full transparency in the middle of itself, the glitch would disappear.
The shading image is mapped on the ripple's circular waves from the center out to the corners and back in a circular manner and eventually stops with the value in the center of that shading image.