Core Animation for Kiosk Apps

A local non-profit youth football league had a fundraiser this weekend, called Marathon Flag Football. The event set a new world record for the longest continually-played flag football game — over 24 hours. I wrote the game clock, and it turns out Core Animation is fantastic for this.

The display was a 720p plasma HDTV, so I just wrote the app to run fullscreen in 1280x720 on the secondary monitor. The great thing about writing a standalone app like this is that you can just pretty much go crazy — no menus, help system, etc.

Because this is a plasma screen, I set up a screensaver to switch on once in a while to prevent burn in. But why just swap images out when you can do it the fun way?



Basically, the app creates about 40 "mosaic" layers on launch, but they're initially offscreen. When the screensaver timer fires, I move them to their place in the grid by adjusting the position attribute, but also make them spin a bit in 3D space using a CATransform3D. Those two animations combined give the impression of paper rising up to the top of the screen, then floating back down.

First, to make any of this work at all, you have to add a perspective transform to the parent layer that contains the individual mosaic tiles. This is what "turns on" 3D space for them. It's important to set this as the sublayerTransform property on the parent — not just transform — because you want the child layers to be rotated, not the parent itself.

// activate depth

CGFloat zDistance = 2000.0;

CATransform3D sublayerTransform = CATransform3DIdentity;

sublayerTransform.m34 = 1.0 / -zDistance;   

mosiacConainerLayer.sublayerTransform = sublayerTransform;

The zDistance changes how much the child layer moves in or out of the Z plane (into the monitor) when you change the zPosition property of a layer. We don't do that here, though, so the actual value of the zDistance variable above doesn't matter much in this case. It just has to be something reasonable.

After the sublayerTransform is applied to the parent, we set a new value for the transform property (not sublayerTransform) of each child layer whenever we want to rotate them. This triggers an implicit animation — meaning the animation happens automatically when you change the transform property:

CGFloat rotation = 128.0;

CGFloat x = 54.0;

CGFloat y = 48.0;

CGFloat z = 0.0;

CATransform3D transform;

transform = CATransform3DMakeRotation((rotation * M_PI/180), x, y, z);

childLayer.transform = transform;

To return them to their original 3D orientation, I just set the transform to the CATransform3DIdentity constant. And to get them back to their location in 2D space, I use CALayer's generic key-value coding support to embed the original coordinates in the layer itself without subclassing:

[mosiacTileLayer setValue:[NSNumber numberWithFloat:xPosition]

                   forKey:@"originalY"];                   

...



// xPosition is already defined elsewhere



oneLayer.transform = CATransform3DIdentity;

CGFloat xPosition; 

CGFloat yPosition = [[oneLayer valueForKey:@"originalY"] floatValue];

oneLayer.position = CGPointMake (yPosition, xPosition);

And yes, even a single-use kiosk app needs an icon.



By the way, this event was what this site design was created for.

Comments Temporarily Disabled

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