CALayer剪辑动画中的子视图

Question

我想制作动画，应该是这样的： 在mainViewLayer上有一个图层，用透明fillColor绘制Drop of water，我在它下面添加另一个CAShapeLayer - 用蓝色，那里的图层有相同的边界。我希望动画它的y位置，模仿降低水位。

    fallingWaterLayer = CAShapeLayer()
    fallingWaterLayer.frame = x.bounds
    fallingWaterLayer.fillColor = UIColor.blue.cgColor
    let path = CGPath(rect:fallingWaterLayer.bounds, transform:nil)
    fallingWaterLayer.path = path
    x.layer.addSublayer(fallingWaterLayer)
    mainLayer = DropLayer(x.bounds, shouldFillLayer:false)
    x.layer.addSublayer(mainLayer!)

我的动画看起来像这样：

    let animation = CABasicAnimation(keyPath: "bounds.origin.y")
    animation.toValue = x.bounds.size.width * -1
    animation.duration = 5.8
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    animation.fillMode = kCAFillModeBoth
    animation.isRemovedOnCompletion = false
    fallingWaterLayer.add(animation, forKey: animation.keyPath)

所以问题是如何让顶层图片剪辑成为蓝色矩形，让它看起来像是在水滴内完成动画？

Answer 1

每个CALayer都有mask属性，可以是任意其他层，因此这似乎是一个很好的解决方案。

https://developer.apple.com/reference/quartzcore/calayer/1410861-mask

mask属性的工作方式是遮罩的任何透明像素都将被剪裁在目标图层中。因此，您需要创建第二个固体水滴层作为面具 - 您不能重复使用相同的水滴轮廓，否则水将被剪切到水滴的边界，而不是填补内部。