CAShapeLayer Moving Frame Animation

Question

Using the main animation layers, I tried to implement the following function. Inside the containing superlayer there are two anchor layers and another layer that connects the two. The following image should make the situation clear. On the left, two orange anchors are marked “A” and “B”, and a green line connects them. The frames of the surrounding layer are shown with dashed lines. On the right, the level hierarchy is shown as I have implemented it now, where both anchors and the connection are a sublayer of the containing superlayer.

Now what I'm trying to do is allow the movement of the anchors and bind the connection. I am currently updating its frame and path properties using the -setFrame: connection-level method using the code below:

- (void)setFrame:(CGRect)frame {

 CGSize size = frame.size; CGPoint startPoint = CGPointZero; if (size.height < 0.0) startPoint.y -= size.height; CGPathRef oldPath = self.path; CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y); CGPathAddLineToPoint(path, NULL, startPoint.x + size.width, startPoint.y + size.height); CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; animation.duration = [CATransaction animationDuration]; animation.timingFunction = [CATransaction animationTimingFunction]; animation.fromValue = (id)oldPath; animation.toValue = (id)path; [self addAnimation:animation forKey:@"pathAnimation"]; self.path = path; CGPathRelease(path); [super setFrame:frame]; 

} Code>

Now this kind of work, but the problem is that the frame animation (or positional + border) does not start synchronously with the path animation, causing some unstable effects when the connection ends far off for a moment (and some other minor problems supposedly caused by the same same main problem).

I discussed this issue, but only for moderate success. At some point, I set the connection frame to be equal to the connection frame of the surrounding super layer, which had the desired effect (since now the frame does not need to animate anymore). However, I am worried about the performance of this solution in a multi-connection context, i.e. Do multiple opaque large overlapping layers seem bad?

Will anyone have a better, more elegant solution? Thanks!

Answer 1

Since you only actually stretch (scale) and rotate the connection level, have you considered applying transformations to it instead of manually modifying the frame?

You should be able to calculate the rotation angle and scale factor using some basic trigonometry based on the positions of the anchor layers.

Answer 2

Since you are animating a path, not a layer or path frame, you will get performance problems after approx. 50 simultaneous animations. You will achieve high performance only by manipulating layers of implicit animated properties, therefore its frame, and not its contents (for example, path), due to the acceleration of gpu.