CAShapeLayer 和 UIImage

Question

我一直在尝试学习如何使用CAShapeLayer并使用路径进行动画效果。我首先想到的是，在网球反弹之前，它会对边缘产生"压缩"效果。

但是，我并没有使用图层的fillPath，而是尝试将图像设置为该图层。所以我创建了另一个CALayer，将其内容属性分配给一个图像，并动画化形状图层的路径。

但结果是，图像并没有完全包含在这个路径内，正如我所希望的那样，在路径被动画化时，图像是被逐渐揭示和覆盖的。

我希望能够使这个图像完全包裹在路径中，并且当形状图层上的路径被动画化时，无论形状如何，图像仍然被包裹在此路径中。图像畸变在这里不是问题。

我的想法是，例如，下载一个网球图像，在倒置的类似水滴状路径中包裹它（见图片：），并从一个较小的倒置的水滴形状动画到一个较大的倒置的水滴形状，最终显示一个圆形（网球图像）。

是否可以使用CAShapeLayer实现这一点？你能在这里给我一个示例吗？谢谢。

//Setting up layer
- (void)setupLayer
{
    self.caShapeLayer = [CAShapeLayer layer];<
    self.caLayer = (CALayer*) self.layer;

    self.caLayer.contents = (id)([UIImage imageNamed:"@yellowTennisBall.png"] CGImage]);
    self.caLayer.mask = self.caShapeLayer;
}  

//Animate the path of CAShapeLayer
- (void)bounce
{ 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.duration = 1.7;
    animation.repeatCount = HUGE_VAL;
    animation.timingFunction = [CAMediaTimingFunction  functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.fromValue = (__bridge id)[self defaultPath];
    animation.toValue = (__bridge id)[self compressedPath];
    animation.autoreverses = YES;
    [self.caShapeLayer addAnimation:animation forKey:@"animatePath"];
}

针对上述所述的效果和在路径内包装UIImage，我尝试编写代码都没有得到任何进展...

- Unheilig

---

将路径图层设置为图像图层的“maskLayer”应该可以实现您想要的效果。（您可能需要使用额外的路径图层来实现描边效果）。 - omz

使用核心动画并不容易实现。将图像变形为任意路径是一件相当复杂的事情，而且没有公共API可以帮助你完成。 - omz

Answer 1

CAShapeLayer非常适合用于遮罩，但您的需求不仅止于此。您需要对图像进行形变，这并不简单，并且可能无法通过CAShapeLayers实现。

有一些选项可供选择： 第一种（较难）：通过代码（ -（void）drawRect：（CGRect）rect ）绘制您的标记，以与黑点对应。然后通过简单的CoreAnimation动画来使其发生变化。 第二种（较易）：创建图像序列，并按如下方式开始动画：

NSArray * imageArray  = [[NSArray alloc] initWithObjects:
                         [UIImage imageNamed:@"1.png"],
                         [UIImage imageNamed:@"2.png"],
                         [UIImage imageNamed:@"3.png"],
                         [UIImage imageNamed:@"4.png"],
                         [UIImage imageNamed:@"5.png"],
                         [UIImage imageNamed:@"6.png"],
                         [UIImage imageNamed:@"7.png"],
                         [UIImage imageNamed:@"8.png"],
                         [UIImage imageNamed:@"9.png"],
                         [UIImage imageNamed:@"10.png"],
                         [UIImage imageNamed:@"11.png"],
                         [UIImage imageNamed:@"12.png"],
                         nil];
UIImageView * theImageViewToAnimate = [[UIImageView alloc] initWithFrame:
                         CGRectMake(100, 125, 150, 130)];
theImageViewToAnimate.animationImages = imageArray;
theImageViewToAnimate.animationDuration = 1.1;
theImageViewToAnimate.animationRepeatCount=1;

[theImageViewToAnimate startAnimating];

- lukaswelte

---

绘图在这里是一项艰巨的工作。您需要在代码中指定硬边界，如果矩形与边界相交，则根据其进行绘制。因此，这更像是一种虚假的物理模拟。我宁愿使用图像数组或直接使用物理引擎。 - lukaswelte