两个 CGPaths / 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

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

如果您不打算自己运行动画（即仅手动控制它），我建议您将动画的持续时间更改为 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
}

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