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

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:

// Header
 
@interface UIImage (TPAdditions)
- (UIImage*)imageByMaskingUsingImage:(UIImage *)maskImage;
@end
 
 
// Implementation
 
CGImageRef CopyImageAndAddAlphaChannel(CGImageRef sourceImage) {
    CGImageRef retVal = NULL;
 
    size_t width = CGImageGetWidth(sourceImage);
    size_t height = CGImageGetHeight(sourceImage);
 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
 
    CGContextRef offscreenContext = CGBitmapContextCreate(NULL, width, height, 
                                                          8, 0, colorSpace, kCGImageAlphaPremultipliedFirst);
 
    if (offscreenContext != NULL) {
        CGContextDrawImage(offscreenContext, CGRectMake(0, 0, width, height), sourceImage);
 
        retVal = CGBitmapContextCreateImage(offscreenContext);
        CGContextRelease(offscreenContext);
    }
 
    CGColorSpaceRelease(colorSpace);
 
    return retVal;
}
 
 
@implementation UIImage (TPAdditions)
 
 
- (UIImage*)imageByMaskingUsingImage:(UIImage *)maskImage {
 
    CGImageRef maskRef = maskImage.CGImage; 
    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);
 
    CGImageRef source = [self CGImage];
 
    NSInteger alphaInfo = CGImageGetAlphaInfo(source);
    if ( alphaInfo == kCGImageAlphaNone || alphaInfo == kCGImageAlphaNoneSkipLast || alphaInfo == kCGImageAlphaNoneSkipFirst ) {
        source = CopyImageAndAddAlphaChannel(source);
    }
 
    CGImageRef masked = CGImageCreateWithMask(source, mask);
    CGImageRelease(mask);
 
    if ( source != [self CGImage] ) {
        CGImageRelease(source);
    }
 
    UIImage *result;
    if ( [UIImage respondsToSelector:@selector(imageWithCGImage:scale:orientation:)] ) {
        result = [UIImage imageWithCGImage:masked scale:self.scale orientation:self.imageOrientation];
    } else {
        result = [UIImage imageWithCGImage:masked];
    }
 
    CGImageRelease(masked);
 
    return result;
}
 
@end

Note that the image mask should be another JPEG (or PNG, if you really like), without transparency, and greyscale, where black represents full opacity, and white represents full transparency.

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.

@interface UINavigationBar (TransparentAdditions)
@end
@implementation UINavigationBar (TransparentAdditions)
- (void)drawRect:(CGRect)rect {
    // Do nothing!
}
@end

For UIToolBar, if you’re using it within a UINavigationController, you’ll want to also override drawLayer:inContext:, as this appears to be used instead of drawRect: when used within a navigation controller, for some weird reason.

Note that this method will affect all bars in your app. If you only want some bars to be transparent, you’ll need to do a little objc-hocus-pocus. Thanks to Mike Ash for this solution on method replacement (read that article for the whys and hows). This technique replaces the default methods as before, but keeps track of the defaults. If you now set the tintColor of the bar to [UIColor clearColor], the bar will have a transparent background. Otherwise, it’ll just look the same as usual.

For UIToolbar (same principle for UINavigationBar):

#import <objc/runtime.h>
 
// Keep track of default implementation
static void (*_origDrawRect)(id, SEL, CGRect);
static void (*_origDrawLayerInContext)(id, SEL, CALayer*, CGContextRef);
 
// Override for drawRect:
static void OverrideDrawRect(UIToolbar *self, SEL _cmd, CGRect r) {
    if ( [[self tintColor] isEqual:[UIColor clearColor]] ) {
        // Do nothing
    } else {
        // Call default method
        _origDrawRect(self, _cmd, r);
    }
}
 
// Override for drawLayer:inContext:
static void OverrideDrawLayerInContext(UIToolbar *self, SEL _cmd, CALayer *layer, CGContextRef context) {
    if ( [[self tintColor] isEqual:[UIColor clearColor]] ) {
        // Do nothing
    } else {
        // Call default method
        _origDrawLayerInContext(self, _cmd, layer, context);
    }
}
 
 
@implementation UIToolbar (TransparentAdditions)
 
+ (void)load {
    // Replace methods, keeping originals
    Method origMethod = class_getInstanceMethod(self, @selector(drawRect:));
    _origDrawRect = (void *)method_getImplementation(origMethod);
 
    if(!class_addMethod(self, @selector(drawRect:), (IMP)OverrideDrawRect, method_getTypeEncoding(origMethod)))
        method_setImplementation(origMethod, (IMP)OverrideDrawRect);
 
    origMethod = class_getInstanceMethod(self, @selector(drawLayer:inContext:));
    _origDrawLayerInContext = (void *)method_getImplementation(origMethod);
 
    if(!class_addMethod(self, @selector(drawLayer:inContext:), (IMP)OverrideDrawLayerInContext, method_getTypeEncoding(origMethod)))
        method_setImplementation(origMethod, (IMP)OverrideDrawLayerInContext);
}
 
@end

You can now add background texture to the bars in a number of ways. These are two I’ve used:

• By adding a CALayer to [bar layer] — but note that UINavigationBar will try to add elements at index 0, underneath your background. To make this work, I provided a subclassed CALayer (and overrode UINavigationBar’s +layer method) which only lets you insert layers at index 0, via a custom method, and override insertLayer:atIndex: method, setting index to 1 if it’s 0. UIToolbar doesn’t require this.
• Or, by adding a CALayer to your view layer. Note that the view’s bounds do not cover the UINavigationBar; I had to offset the layer by the height of the bar in question (navigationBarLayer.frame = CGRectMake(0, -self.navigationController.navigationBar.frame.size.height, [barImage size].width, [barImage size].height);, for example), and set self.view.clipsToBounds = NO to allow the layer to be seen.

Of course, you can also draw the texture in drawRect:, instead. It’s entirely up to you. The advantage in using a CALayer is that it can overlap the view boundary, for effects like drop shadows.

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:].

Here’s the category:

@interface UIImage (TPAdditions)
- (id)initWithContentsOfResolutionIndependentFile:(NSString *)path;
+ (UIImage*)imageWithContentsOfResolutionIndependentFile:(NSString *)path;
@end
 
 
@implementation UIImage (TPAdditions)
 
- (id)initWithContentsOfResolutionIndependentFile:(NSString *)path {
    if ( [[[UIDevice currentDevice] systemVersion] intValue] >= 4 && [[UIScreen mainScreen] scale] == 2.0 ) {
        NSString *path2x = [[path stringByDeletingLastPathComponent] 
                            stringByAppendingPathComponent:[NSString stringWithFormat:@"%@@2x.%@", 
                                                            [[path lastPathComponent] stringByDeletingPathExtension], 
                                                            [path pathExtension]]];
 
        if ( [[NSFileManager defaultManager] fileExistsAtPath:path2x] ) {
            return [self initWithCGImage:[[UIImage imageWithData:[NSData dataWithContentsOfFile:path2x]] CGImage] scale:2.0 orientation:UIImageOrientationUp];
        }
    }
 
    return [self initWithData:[NSData dataWithContentsOfFile:path]];
}
 
+ (UIImage*)imageWithContentsOfResolutionIndependentFile:(NSString *)path {
    return [[[UIImage alloc] initWithContentsOfResolutionIndependentFile:path] autorelease];
}
 
@end

This checks to see whether the iOS4 features are present, so this code should work on devices running prior OS versions as well.

What iOS4′s imageWithContentsOfFile does do is recognise if an image is the ’2x’ version, and sets the scale accordingly, so it displays correctly.

Update: I just discovered that -[UIDevice scale] actually exists prior to iOS 4. Apple recommend using tests like respondsToSelector to determine OS features, rather than version checks, but in this case, it gives the wrong result that can result in some pretty hard to find bugs. I’ve updated the above class to check the iOS version instead.

I’ve also avoided using initWithContentsOfFile entirely: As Tea mentioned in a comment below, we probably shouldn’t be trusting this method any more, as it does not behave as advertised.

Update 2: I’ve been unable to replicate the problem, but a few commenters below noted issues with the 2x image being displayed at double-size. I’ve now updated the above to explicitly set the scale to 2.0 for the 2x image, which should fix the problem.

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

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.

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