Search code examples
ioscore-animationcore-graphics

Using panning gesture to animate GCRect resize


I'm drawing a few circles, each filled with an image. When the user pans I'd like to scale/resize the circles. So I called drawRect again and again, redrawing every GCRect until the gesture was completed - of course the animation was very choppy. In my case a UIScrollView doesn't fit the needs, because I don't want to scroll, but to scale the circles while the user is panning.

Is there any way except using OpenGL ES to implement this functionality?


Solution

  • Do you really need custom drawing for this? You can easily clip an image to a circle without drawRect.

    Without -drawRect:

    Using Core Animation you can set the corner radius of a layer. If all you want is to show an image inside a circle then you can put the image in an image view with a square frame and set the corner radius of the image views layer to half the width of the frame.

    Now each time the user drags you can change the bounds and the corner radius of the image views layer. This will make it look like the circle becomes bigger/smaller.

    If you require custom drawing

    Maybe you are doing some custom shadows or blending that can only be done with Core Graphics. If so, you could apply a scale transform and stretch the image while the user is dragging their finger and only redraw once the finger lifts from the screen. That will be much, much cheaper and is also very easy to implement. Just create a scale transform (CGAffineTransformMakeScale(xScale, yScale);) and set it as the transform on the view with the circle (this will only work if each circle is its own view).

    Note: You can still use the same trick (scaling while dragging and then redrawing) if you use the corner radius approach if you require the extra performance.