动画中的 CALayer 剪辑子视图
CALayer clip subviews in animation
我想制作动画,应该是这样的:
在 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)
所以问题是我怎样才能使顶层剪辑成为蓝色矩形,使其看起来像是在水滴内完成的动画?
每个 CALayer
都有一个 mask
属性,它可以是任意其他层,所以这似乎是一个很好的解决方案。
https://developer.apple.com/reference/quartzcore/calayer/1410861-mask
遮罩 属性 的工作方式是遮罩的任何透明像素都将在目标图层中被剪裁。因此,您需要创建第二个固体水滴层用作遮罩 - 您不能重复使用相同的水滴轮廓,否则水将被剪裁到水滴的边界,而不是填充里面。
我想制作动画,应该是这样的: 在 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)
所以问题是我怎样才能使顶层剪辑成为蓝色矩形,使其看起来像是在水滴内完成的动画?
每个 CALayer
都有一个 mask
属性,它可以是任意其他层,所以这似乎是一个很好的解决方案。
https://developer.apple.com/reference/quartzcore/calayer/1410861-mask
遮罩 属性 的工作方式是遮罩的任何透明像素都将在目标图层中被剪裁。因此,您需要创建第二个固体水滴层用作遮罩 - 您不能重复使用相同的水滴轮廓,否则水将被剪裁到水滴的边界,而不是填充里面。