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.

ArtGallery 1
Inset image from Wikipedia


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.

ArtGallery 2
Inset image from Wikipedia


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.)
Design Element
CoreAnimation Sample Code: ArtGallery 1.0.1
Posted Dec 3, 2007 — 20 comments below




 

patrick — Dec 03, 07 5159

Great stuff, amazing what you can do now with just a few lines of code. If it would work on Tiger too I could actually have used it in 2008 ;-(

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

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.

Chris Ryland — Dec 03, 07 5161

Also, can you explain your strategy for the THImageBrowserView implementation w.r.t. new Obj-C 2.0 feature? Why do you synthesize all the accessors for the private members in that fashion? Is it just to avoid declaring all the members as properties in the .h file? Sorry if I'm being thick.

AndyK — Dec 03, 07 5162

Has anyone else seen the console output something akin to "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

Thanks for the examples Scott! It's been fun trying to changeup the project to do different effects.

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

Quite cool, I am really looking forward to implementing CA in my own apps.

Scott Stevenson — Dec 03, 07 5165 Scotty the Leopard

@patrick: Debug configuration doesn't work
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

> Has anyone else seen the console output something akin to

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

Hy,

I have a (stupid) question: how are we doing to execute the program?

Thanks.

Andre — Dec 04, 07 5171

This is an awesome demonstration of core animation and core image.

Bravo!

Scott Stevenson — Dec 04, 07 5172 Scotty the Leopard

I have a (stupid) question: how are we doing to execute the program?

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

From what I've gathered from reading about Core Animation, is that there are two ways to use it. The first way is to enable it on your custom views, and just do animation by changing view locations. The second way is to directly manipulate layers as in your example code.

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 Scotty the Leopard

@Tim R: I suppose that using the first method is a little easier, but not as customizable as the second. Am I correct in assuming this?

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 Scotty the Leopard

@yogi patel: Has anyone experienced problems running a debug compiled version of this? Release mode works fine, but the debug version throws a EXC_BAD_ACCESS

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: Tried that, but you didn't have garbage collection on for the release version anyway :) In fact, I don't see any differences between the two build configurations, but I'm a noob, so I could be missing something. Still have the crashyness on debug though.

Scott Stevenson — Aug 21, 08 6297 Scotty the Leopard

@Yogi: Tried that, but you didn't have garbage collection on for the release version anyway :)

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

From what I can tell, in the project settings, garbage collection is "unsupported"... ??? Tried changing the GCC version too and it didn't seem to change anything...

Scott Stevenson — Oct 02, 08 6421 Scotty the Leopard

@Percy: From what I can tell, in the project settings, garbage collection is "unsupported"

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

Hi Scott, good work! Thanks.

@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.




 

Comments Temporarily Disabled

I had to temporarily disable comments due to spam. I'll re-enable them soon.





Copyright © Scott Stevenson 2004-2015