动画中的CALayer剪辑子视图答案

【问题标题】：CALayer clip subviews in animation动画中的CALayer剪辑子视图
【发布时间】：2017-03-29 12:48:38
【问题描述】：

我想做动画，应该是这样的：在 mainViewLayer 上有一个图层，用透明的 fillColor 绘制了一滴水，我在它下面添加了另一个 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)

所以问题是我怎样才能让顶层剪辑蓝色矩形，让它看起来像动画是在水滴内完成的？

【问题讨论】：

标签： swift calayer cabasicanimation

【解决方案1】：

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

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

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

【讨论】：