能否设置两个子视图同zIndex？基于WaveViewAnimation实现混合色水填充效果

问题说明 #

基于WaveViewAnimation项目开发形状水填充效果，需求如下：

• 点击不同按钮生成对应颜色的波浪填充目标形状
• 若第一种颜色波浪动画未结束时点击第二种颜色按钮，两种波浪重叠区域需呈现混合色（例：红+绿显示黄色）

当前使用代码：

waveRed = WaveAnimationView(frame: CGRect(origin: .zero, size: lapView.bounds.size), color: UIColor.red.withAlphaComponent(0.5))
lapView.addSubview(waveRed)

waveBlue = WaveAnimationView(frame: CGRect(origin: .zero, size: lapView.bounds.size), color: UIColor.green.withAlphaComponent(0.5))
lapView.addSubview(waveBlue)

waveRed.layer.zPosition = 1
waveBlue.layer.zPosition = 1
waveRed.startAnimation()
waveBlue.startAnimation()

当前效果未达成颜色混合需求，需解决方法。

解决方法 #

要实现色光叠加的混合效果，核心是给波浪视图的图层设置正确的合成滤镜，具体操作如下：

• 设置图层合成滤镜
  给两个波浪视图的layer.compositingFilter设置为"plusDarker"，这个滤镜可以实现色光混合效果（红+绿=黄），代码修改如下：

waveRed = WaveAnimationView(frame: CGRect(origin: .zero, size: lapView.bounds.size), color: UIColor.red.withAlphaComponent(0.5))
waveRed.layer.compositingFilter = "plusDarker"
lapView.addSubview(waveRed)

waveBlue = WaveAnimationView(frame: CGRect(origin: .zero, size: lapView.bounds.size), color: UIColor.green.withAlphaComponent(0.5))
waveBlue.layer.compositingFilter = "plusDarker"
lapView.addSubview(waveBlue)

waveRed.layer.zPosition = 1
waveBlue.layer.zPosition = 1
waveRed.startAnimation()
waveBlue.startAnimation()

• 优化颜色透明度（可选）
  如果不需要半透明效果，建议去掉withAlphaComponent(0.5)，使用完全不透明的颜色，混合出来的颜色会更准确：

waveRed = WaveAnimationView(frame: CGRect(origin: .zero, size: lapView.bounds.size), color: UIColor.red)
waveBlue = WaveAnimationView(frame: CGRect(origin: .zero, size: lapView.bounds.size), color: UIColor.green)

• 其他可选混合模式
  如果想要不同的混合效果，可以尝试其他滤镜值，比如：
  • "screen"：提亮混合区域，适合浅色叠加
  • "multiply"：加深混合区域，适合深色叠加

内容的提问来源于stack exchange，提问作者SriTeja Chilakamarri