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

问题描述

我有一个包含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这样的？

解决方案

这实际上是一个更简单，那么你会首先想和使用动画无速度（已暂停）。现在将已暂停的动画添加到图层中，您可以更改时间偏移以跳转到动画内的特定时间。

如果您不打算运行动画我想建议您将动画的持续时间更改为1.这意味着，当从0％移动到100％时，将时间偏移从0更改为1。如果您的持续时间为0.3（如在示例中），那么您可以将时间偏移设置为介于0和0.3之间的值。

实现

如上所述，这个小技巧中涉及的代码非常少。

1. 持续时间为1.0


2. 设置图层的速度（是的，它们符合 CAMediaTiming ）或动画为0.0


3. 在拖动手势或滑块（如我的示例）中，设置 timeOffset 图层或动画（取决于您在步骤2中执行的操作）。

这是我如何配置动画+ shape图层

  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 
} 
  

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

p>

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?

解决方案

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.

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

And the slider action:

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

You can see the end result below. Happy coding!

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