CAShapeLayer和UIImage

Question

我一直在努力了解有关使用CAShapeLayer使用路径设置动画的更多信息。 我想到的第一件事就是在它反弹之前将“压缩”的网球撞击边缘。

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

但结果是，不是图像被完全包裹在这条路径中，正如我希望的那样，当路径被动画化时，图像会随着路径被动画而被显示和覆盖。

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

我的想法是，例如，我下载了一个网球图像，将其包裹在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];