Question

I have noticed that when placing PNG images into a view using IB and/or animating those images to various positions around a view, the image can sometimes get a slight blur.

In most cases I can remedy the blur by adding .5 of a pixel to the images position.

[lbLiteButton.layer setPosition:CGPointMake(140.5,159.5)];

Sometimes I have to adjust both x and y like above. Sometimes I only have to adjust x or y.

I remember reading somewhere that this has to do with the size of the image and how core animation works and something to do with half pixels… but I cant find the article anywhere!?

The problem with the “.5 pixel” solution is that its different for every PNG image depending on size, so you can’t reuse custom animation because you have to customise it for each different image.

1. Is there a way to ensure that no matter where I place or animate my image, I won’t get any blurred positions?
2. Does anyone have any information on this?

Thank You!

Answer 1

The position property of a view’s layer is based on its anchorPoint property. By default, that is (0.5, 0.5), meaning that the anchor point of the layer is at its center. If your view (and its layer) are an odd number of pixels wide or high, setting an integral value for the position will cause the view’s origin to be non-integral, leading to the blurriness you see.

To work around this, you could figure out an integral version of your position by taking the desired center position of the view, subtracting half of the view’s width, rounding that value, then adding half of the view’s width, and repeating for the height. You could also set the anchorPoint for your view’s layer to (0,0) and position the view based on its origin.

There’s a chance that this might also be related to a misalignment of a superview. To diagnose this, you could use the Core Animation instrument in Instruments, and select the Color Misaligned Images option. It should color any views or layers that are non-pixel-aligned in your application.