Blog

Tag Archives: Graphics

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

By Michael Tyson | Published: August 13, 2010

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

Also tagged , , , , , | Comments closed
Permalink

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

By Michael Tyson | Published: August 7, 2010

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:

Read More »

Also tagged , , , | Comments closed
Permalink

Making UIToolbar and UINavigationBar’s background totally transparent

By Michael Tyson | Published: July 19, 2010

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. Read More »

Also tagged , , | Comments closed
Permalink

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

By Michael Tyson | Published: June 26, 2010

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

Read More »

Also tagged , | Comments closed
Permalink

Links for February 25th through May 29th

By Michael Tyson | Published: May 29, 2010

Links for February 25th through May 29th:

Also tagged , , , , , , | Comments closed
Permalink

Sneak preview of my new web framework Michaelangelo

By Michael Tyson | Published: March 28, 2009

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: boathouse.jpg

A dynamic caption

thailand.jpg

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.

IMG_1773.jpg

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.

Also tagged , , , | Comments closed
Permalink

Links for November 24th through December 9th

By Michael Tyson | Published: December 9, 2008

Links for November 24th through December 9th:

Also tagged , , , , , , | Comments closed
Permalink