On iOS, if there are two circles, both of which are UIView objects, then their center or frame can animate using UIView animation.
But the difficulty is, the container UITreeView containing these two circles, draw a line connecting the centers of the circles, using drawRect. In drawRect, I could use CG or UIKit to draw the line, and I chose to use UIBezierPath‘s moveToPoint and addLineToPoint to draw the line, which should actually just be CG calls underneath, but easier to use.
But when one circle animates to the other position, the line won’t animate with it, so the animation can look kind of weird. Is there a way to make it animate?
I tried animating in the TreeView class instead of inside the UINodeView class (the circle), but that won’t help. In fact, if I draw the circle using a random color in its drawRect method, when the circle moves slowly in the animation, the color won’t change rapidly, suggesting that its drawRect isn’t called. It probably is just CALayer that hold a cached image being animated.
So is there a way to make the line animate as well?
The other methods I can think of is:
1) Use a hack to use a UIView to hold the line also, so its frame can animate, but what if the circle moves so that the line needs to be drawn inside the UIView from (0, 0) to (200, 200), but now the line needs to slant the other way, drawing from (200, 0) to (0, 200), so in this case, it probably won’t work. (But if I use some kind of transform to flip the image at the same time, it probably will work, but it seems complicated to consider when the transform should be used)
2) use CADisplayLink to do the animation, and just let it call [treeView setNeedsDisplay]; and in this case, the drawRect will be called for sure. (it can be an overkill, and since the whole background of the TreeView will be first erased, there might be a little flashing on the screen going on)
Or is there a simpler or better way?
You could assign your path to a CAShapeLayer (such as wrapping it in a UIView subclass that returns CAShapeLayer as its +layerClass). The path is assigned to the CGPath -path property (and note that UIBezierPath provides a CGPath property).
Then you have a line in a view that you can animate (such as a group animation using UIView +beginAnimations
.