在两个 CGPaths/UIBeziers 之间进行补间/插值 [英] Tweening / Interpolating between two CGPaths / UIBeziers

问题描述

我有一个包含 CGPath 的 CAShapeLayer.使用 iOS 的内置动画，我可以使用动画轻松地将此路径转换为另一个路径:

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];

效果很好.

但是，我现在想在拖动操作期间在这些路径之间逐渐变形.为了做到这一点，我需要能够在拖动过程中的任何一点检索插值路径.有没有办法向 iOS 询问这个问题?

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?

推荐答案

这实际上比您首先想到并使用无"速度(暂停)的动画简单得多.现在，将暂停的动画添加到图层后，您可以更改时间偏移以跳转到动画中的特定时间.

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.

如果您不打算自己运行动画(即仅手动控制它)，我建议您将动画的持续时间更改为 1.这意味着您在移动时将时间偏移从 0 更改为 10% 到 100%.如果您的持续时间为 0.3(如您的示例中所示)，那么您可以将时间偏移设置为 0 到 0.3 之间的值.

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.

正如我上面所说，这个小技巧涉及的代码很少.

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

1. (可选)将持续时间设置为 1.0
2. 将图层的speed(是的，它们符合CAMediaTiming)或动画设置为0.0
3. 在拖动手势或滑块(如我的示例中)期间设置图层或动画的 timeOffset(取决于您在第 2 步中所做的).

1. (Optional) Set the duration to 1.0
2. Set the speed of the layer (yes they conform to CAMediaTiming) or the animation to 0.0
3. 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

和滑块动作:

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

您可以在下面看到最终结果.快乐编码！

You can see the end result below. Happy coding!

这篇关于在两个 CGPaths/UIBeziers 之间进行补间/插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！