两个CGPath / UIBeziers之间的补间/插值

Question

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

    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询问这个？

Answer 1

这实际上要简单得多，然后你会首先想到并使用“no”速度（暂停）的动画。现在，将暂停的动画添加到图层，您可以更改时间偏移以跳转到动画中的特定时间。

如果您不打算单独运行动画（即仅手动控制它），我建议您将动画的持续时间更改为1.这意味着您在移动时将时间偏移从0更改为1 0％至100％。如果您的持续时间为0.3（如您的示例所示），那么您可以将时间偏移设置为0到0.3之间的值。

实施

正如我上面所说，这个小技巧中涉及的代码非常少。

1. （可选）将持续时间设置为1.0
2. 设置图层的speed（是的，它们符合CAMediaTiming）或动画设置为0.0
3. 在拖动手势或滑块（如我的示例中）中设置图层或动画的timeOffset（取决于您在步骤2中执行的操作）。

这是我配置动画+形状图层的方式

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
}

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