Tweening / Interpolating between two CGPaths / UIBeziers

Question

I have a CAShapeLayer which contains a CGPath. Using the built-in animation of iOS I can easily morph this path into another one using an animation:

    CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"];
    morph.fromValue = (id)myLayer.path;
    mayLayer.path = [self getNewPath];
    morph.toValue = (id)myLayer.path;
    morph.duration = 0.3;
    [myLayer addAnimation:morph forKey:nil];

That works perfectly.

However, I'd now like to morph gradually between these paths during a drag operation. In order to do this I need to be able to retrieve the interpolated path at any point during the drag. Is there a way to ask iOS for this?

In non-trivial cases, the built in morphing of paths becomes useless pretty quickly. See the problem and explanations described here: http://stackoverflow.com/a/17864445/438982 — ipmcc, Aug 22 '13 at 12:00

score 88 · Accepted Answer · answered Sep 08 '13 at 12:47

88

This is actually a lot simpler then you would first think and uses animations with "no" speed (paused). Now with the paused animation added to the layer you can change the time offset to jump to a specific time within the animation.

If you are not planning on running the animation by itself (i.e. only control it manually) I would suggest that you change the duration of the animation to 1. This means that you change the time offset from 0 to 1 when moving from 0% to 100%. If your duration was 0.3 (as in your example) then you would set the time offset to a value between 0 and 0.3 instead.

Implementation

As I said above, there is very little code involved in this little trick.

(Optional) Set the duration to 1.0
Set the speed of the layer (yes they conform to CAMediaTiming) or the animation to 0.0
During the drag gesture or slider (as in my example) set the timeOffset of the layer or animation (depending on what you did in step 2).

This is how I configured my animation + shape layer

CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"];
morph.duration  = 1.; // Step 1
morph.fromValue = (__bridge id)fromPath;
morph.toValue   = (__bridge id)toPath;
[self.shapeLayer addAnimation:morph forKey:@"morph shape back and forth"];

self.shapeLayer.speed = 0.0; // Step 2

And the slider action:

- (IBAction)sliderChanged:(UISlider *)sender {
    self.shapeLayer.timeOffset = sender.value; // Step 3
}

You can see the end result below. Happy coding!

enter image description here

answered Sep 08 '13 at 12:47

David Rönnqvist

56,267
18
167
205

Fantastic, thank you. I had no idea about the existence of the timeOffset. What would you do if you were planning on using the animation by itself? – tarmes Sep 08 '13 at 18:15
@tarmes That depends on the specifics of the interaction. You can still pause the animation and change the time offset (in that case from 0 to 0.3). You can resume the animation by setting the speed back to 1 again. If the animation is running when you want to interact with it then you can get the current value using `[layer convertTime:CACurrentMediaTime() fromLayer:nil]`. See [this answer](http://stackoverflow.com/a/3003922/608157) for more information. – David Rönnqvist Sep 08 '13 at 18:32
7

This great technique inspired me to do a button with a ► (play) or ❚❚ (pause) icon that nicely morphs between the two. See it in action: http://instagram.com/p/l6a8uDHDk7 And here's the source: http://gist.github.com/raphaelschaad/9734463 – Raphael Schaad Apr 17 '14 at 03:23
@DavidRönnqvist,I implement your answer on my code..But it is not working.. CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"]; morph.duration = 1.0; // Step 1 morph.fromValue = [NSValue valueWithCGPoint: CGPointMake([cell.imgView center].x - 5.0f, [cell.imgView center].y)]; morph.toValue = [NSValue valueWithCGPoint: CGPointMake([cell.imgView center].x + 5.0f, [cell.imgView center].y)]; // [cell.imgView.layer addAnimation:morph forKey:@"morph shape back and forth"]; – IKKA Dec 13 '14 at 10:15
@user This is really a new question. That said, you are animating the path but adding *points* as the to value and from value. – David Rönnqvist Dec 13 '14 at 10:20
@DavidRönnqvist,What is the points for "morph.fromValue" and "morph.toValue"?? – IKKA Dec 13 '14 at 10:24
1

On Swift, it only worked when I changed the layer's speed and timeOffset instead of the animation's – Giohji Apr 26 '19 at 19:48

Tweening / Interpolating between two CGPaths / UIBeziers

1 Answers1

Implementation

Linked