A Tasty Pixel » Graphics

iPhone/Mac animation for custom classes: Property animation for more than just CALayer

I recently wrote a custom view — a 3D vintage-looking pull lever — that provided a continuous property to control the state. I wanted to animated this smoothly, a-la CABasicAnimation, but couldn’t find a built-in way to do so.

So, I wrote a class that provides similar functionality to CABasicAnimation, but works on any object. I thought I’d share it.

Features:

From/to value settings (currently only supports NSNumber and scalar numeric types, but easily extendable)
Duration, delay settings
Timing functions: Linear, ease out, ease in, and ease in/ease out
Animation chaining (specify another configured animation for chainedAnimation, and it’ll be fired once the first animation completes)
Delegate notification of animation completion
Uses a single timer for smooth lock-step animation
Uses CADisplayLink if available, to update in sync with screen updates

Use it like this:

- (void)startMyAnimation {
  TPPropertyAnimation *animation = [TPPropertyAnimation propertyAnimationWithKeyPath:@"state"];
  animation.toValue = [NSNumber numberWithFloat:1.0]; // fromValue is taken from current value if not specified
  animation.duration = 1.0;
  animation.timing = TPPropertyAnimationTimingEaseIn;
  [animation beginWithTarget:self];
}

Make sure you also include the QuartzCore framework, used to access CADisplayLink, if it’s available.

It’s BSD-licensed.

Grab it here:
TPPropertyAnimation.zip

Achieve smaller app downloads by replacing large PNGs with JPEG + mask

I’m using a transparent overlay on top of a fairly common interface element to make it look awesome. I originally did this with a transparent PNG, until I realised the PNG in question for the iPhone 4’s Retina display was truly massive, clocking in at 1 Mb.

Why we don’t have common image format with both transparency and lossy compression is beyond me, but there’s a relatively easy alternative: Using a JPEG and masking it with another JPEG.

Based on Rodney Aiglstorfer’s solution on how to mask an image, I derived a category on UIImage which would apply a mask to an image. The method required a little tweaking to work with JPEG images — the CGImageCreateWithMask function won’t work correctly on source images that don’t have an alpha channel, so one has to create one first, from the original. Jean Regisser figured out the solution which he presents in a comment on the above article, but it needs one more addition: A check on line 37 for kCGImageAlphaNoneSkipLast. Update: Oh, and one more – kCGImageAlphaNoneSkipFirst

So, the complete category for applying a mask to a JPEG image, to achieve the same result as using a PNG but with less download time for your users:

Making UIToolbar and UINavigationBar’s background totally transparent

I have an upcoming iPhone application, Cartographer, that is highly stylised and requires high customisation of the interface to achieve a convincing, beautiful vintage look. To make it work, I needed transparent toolbars and navigation bars for my UIViewController-based views.

The solution I came up with for this was to implement a category on UINavigationBar and UIToolbar, and overriding drawRect: with a method that does absolutely nothing. Then I can place my own textures behind the bar, and they’ll be seen, instead of the default bar background.

UIImage, resolution independence and the iPhone 4’s Retina display

iOS4 caters for the high-resolution Retina display that comes with the iPhone 4 by some rather clever abstraction, that moves away from the concept of ‘pixels’, and instead uses ‘points’, which are resolution-independent.

So, when you display an image that’s been prepared for the Retina display, it’s represented with a scale factor of 2, meaning that to your code, it appears to have the same dimensions, but in fact contains twice the information density.

iOS4’s UIImage makes it work by automatically looking for high-res images located alongside the prior ‘standard resolution’ ones — identified by a “@2x” suffix to the filename.

This works great with +[UIImage imageNamed:], but although the API documentation says that other image loading methods will automatically load the @2x versions, they actually don’t. Yeah. Apple are working on it.

Until they sort themselves out, I’m using a convenience method sitting inside a UIImage category. So, where I would previously use something like [UIImage imageWithContentsOfFile:], I now use [UIImage imageWithContentsOfResolutionIndependentFile:].

Links for February 25th through May 29th

Links for February 25th through May 29th:

Implementing iBooks page curling using a conical deformation algorithm Excellent summary of how to implement a convincing page turn animation in OpenGL
Multiplottr.com — Plot, save and share multiple locations on your own customized maps. Batch plot multiple addresses
gmaps.kaeding.name :: Plot multiple locations on Google Maps Enter addresses, one per line, to plot all entries on a map at once
Free iPhone App Marketing — Online and iPhone Marketing Includes a useful list of review sites, blogs, etc.

Sneak preview of my new web framework Michaelangelo

I’ve been working on a new web framework which provides image theming – a little like what Elegant Grunge does with its image frames, but much more sophisticated.

For example:

This is a PHP framework that uses the common GD library to manipulate images.

It’s main interface is a content filter – give it HTML, containing images, and it will return the same HTML modified so that the images are now the converted versions, according to their ‘class’ attributes, with appropriate width/height attributes, etc. This makes it super easy to work with.

It stands alone, but it is also going to be a WordPress plugin (as you can see on this site, it’s already operational), a Joomla plugin, and I’m considering establishing a web service too, so those who don’t have adequate software on their server can still use it.

It has a plugin-based architecture so anyone can add new ‘themes’ (props to my partner Katherine for that beautiful wooden frame, by the way). I’m going to also implement a simple XML-based plugin schema, and possibly an interface to it, so that it’s easy to do so. I’m planning a ‘community’ style directory site to host contributed styles.

The base frame rendering code is such that it is trivially easy to add a new ‘theme’. It extracts segments from a single frame image, and handles seamless tiling to make the frame the right dimensions, so you don’t even have to worry about overlapping regions.

I will release it soon, after adding a little more content – keep your eyes peeled.

For now, check out the Michaelangelo showcase, which gives an idea of the different styles, and contains an interactive sampler to play with styles (IE users should stop being IE users to view this).

Doing my bit to beautify the web.

Links for November 24th through December 9th

Links for November 24th through December 9th:

Creating libraries for the iPhone Discussion on creating static libraries for the iPhone
Photoshop Tutorials – Layered HDR Tone Mapping Learn how to tone map with Photoshop CS3 to create beautiful high dynamic range (HDR) photos. The final result is exceedingly better than Photoshop's local adaptation and similar to Photomatix's tone mapping.
Ajaxload – Ajax loading gif generator Generate loading animation images, given type, background and foreground.
Free Texture Tuesday | BittBox "Jay over at Bittbox has just announced that he will be giving away five high resolution textures (3,000 x 2,000 pixels) every Tuesday of the year, absolutely free!"
GeoNames Free service (including webservice) to search for place names, yielding co-ordinates and a feature class.