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

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

如果您不打算单独运行动画(即仅手动控制它),我建议您将动画的持续时间更改为1.这意味着当从0%移动到0时,您将时间偏移从0更改为1 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
}

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