如何为CAlayer添加动画，逐步展示图像？

Question

出于某些原因，我尝试避免使用CAScrollLayer来实现这一效果。我想要实现的效果是逐步从底部到顶部显示CALayer的内容（之前加载的png图片）。所以我考虑了以下方法：

    layer.anchorPoint = CGPointMake(.5, 1);
    CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"bounds.size.height"];
    a.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    a.fillMode = kCAFillModeBoth;
    a.removedOnCompletion = NO;
    a.duration = 1;
    a.fromValue = [NSNumber numberWithFloat:0.];
    a.toValue = [NSNumber numberWithFloat:layer.bounds.size.height];
    [layer addAnimation:a forKey:nil];

这样做的问题在于，您可以看出图层的内容是与边界一起缩放的。我想让边界改变，但内容始终保持原始大小，从而有效地将边界剪切图像，随着我增加bounds.height，图像就会“显现”出来。

有何建议或者我可能遗漏了什么？

- SaldaVonSchwartz

Answer 1

好的，我明白了如何让它工作，但是我基本上还需要更新图层的框架，以反映出锚点的变化：

  [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
  layer.contentsGravity = kCAGravityTop;
  layer.masksToBounds = YES;
  layer.anchorPoint = CGPointMake(.5, 1);
  CGRect newFrame = layer.frame;
  newFrame.origin.y += newFrame.size.height / 2;
  layer.frame = newFrame;
  [CATransaction setValue:(id)kCFBooleanFalse forKey:kCATransactionDisableActions];

  a.toValue = [NSNumber numberWithFloat:layer.bounds.size.height];
  [layer addAnimation:a forKey:nil];

- SaldaVonSchwartz

Answer 2

"Dad"有正确的答案。

您想创建一个CAShapeLayer，并将其安装为图层的蒙版。

您创建了一个仅为矩形的CGPath，并将该路径安装到形状图层中。路径的内容确定了蒙版图层中显示的区域。如果路径是位于图层中心的三角形，则只有三角形会出现。

然后，您创建一个动画来动画化路径。

要从底部揭示您的图像，您需要设置一个在图层底部的0高度矩形路径，然后创建一个CAAnimation，其中toValue是具有完整要揭示的图层高度的相同矩形。系统会生成一个扫描式揭示图像的动画。

您可以使用这种技术实现各种酷炫的效果，如门板、百叶窗、"虹膜擦拭"等。

- Duncan C

---

感谢您提供详细的描述。 - Nikolay Spassov

Answer 3

如果您改变剪切蒙版(或使用蒙版图层)，会怎样呢？

- Dad

Answer 4

你可以将另一张图片放在目标图片上方，像舞台幕布一样向上移动。

- Chris Livdahl

---

我知道，但由于效率在多个层面上（可能会有很多这种效果同时发生，我需要单独处理CALayer），所以我决定不走这条路。现在我正在尝试使用contentRect，并且我已经几乎做到了。唯一的问题是，在内容矩形动画时，我也在图层内部绘制了一种笔画轨迹。 - SaldaVonSchwartz

contentRect的文档说明：“如果请求单元矩形外的像素，则内容图像的边缘像素将向外扩展”，所以我想这就是我得到描边效果的原因。 - SaldaVonSchwartz