CAShapeLayer 和 UIImage

Question

我一直在尝试了解更多关于使用CAShapeLayer 使用路径对其进行动画处理的信息。 我想到的第一件事是在弹开之前对边缘产生“压缩”网球的效果。

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

但结果是，图像并没有完全包裹在这条路径中，正如我希望的那样，它会随着路径的动画而增长和缩小，而是在路径动画的同时显示和覆盖图像。

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

我的想法是，例如，有一个我下载的网球图像，将其包裹在 CAShapeLayer 中，以倒置的泪珠状路径（见图：）并从较小的动画倒置的泪珠形状变成更大的倒置泪珠，最终显示为圆形（网球图像）。

是否可以使用CAShapeLayer 来实现这一点？你能在这里给我一个样品吗？提前致谢。

添加代码：

嗨，这是我目前得到的（感谢@lnafziger）

//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 包装在路径中，我在编码方面一无所获……

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];