ios - CAShapeLayer 和 UIImage

Question

我一直在努力学习更多关于使用 CAShapeLayer 动画的方法。我想到的第一件事是在弹起之前在边缘上产生“压缩”网球的效果。

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

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

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

我的想法是，例如，我下载了一张网球图像，将其包裹在 CAShapeLayer 中，并以倒置的泪珠状路径包裹(参见图片:)并从较小的倒置泪珠形状制作成较大的倒置泪珠形状并最终显示一个圆圈(网球图像)。

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

添加代码:

嗨，这就是我到目前为止所得到的(感谢@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 很适合 mask ，但您的需求不仅仅是 mask 。您需要对图像进行变形，这并不简单，而且 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];