Why does a PNG image sometimes get blurry depending on its position in a view

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.

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.