merge two CAShaplayer with transparent in Swift5?

Question

We have created two CAShapeLayer and we have animated them by CABasicAnimation changing position like fromValue to toValue so far code works as excepted.

Two layers meeting at some points while animating, its moving one over another seems overlapping. We need to achieve like below image but we have got different output.

Desired output:

Output at Loading view::

Result we got after animating layers:

Code Below:

class MovingAnimationVC: UIViewController {

    let layerSize = CGSize(width: 100, height: 100)
    
    private var layerWidth : CGFloat = 100
    private var layerHeight : CGFloat = 100
    
    var circleA : CAShapeLayer! = nil
    var circleB : CAShapeLayer! = nil
    
    lazy var aPosition = CGPoint(x: -layerWidth/2 + 30, y: 100)
    lazy var bPosition = CGPoint(x: (self.view.frame.width - layerWidth / 2) - 30 , y: 400)
    
   
    override func viewDidLoad() {
        super.viewDidLoad()

        if circleA == nil{
            circleA = CAShapeLayer()
            let pa = UIBezierPath(ovalIn: CGRect(origin: aPosition, size: layerSize))
            circleA.path = pa.cgPath
            circleA.fillColor = UIColor.orange.cgColor
            view.layer.addSublayer(circleA)
        }
        if circleB == nil{
            circleB = CAShapeLayer()
            let pa = UIBezierPath(ovalIn: CGRect(origin: bPosition, size: layerSize))
            circleB.path = pa.cgPath
            circleB.fillColor = UIColor.orange.cgColor
            view.layer.addSublayer(circleB)
        }
    }
    override func viewDidAppear(_ animated: Bool) {
        animateCircleA()
        animateCircleB()
    }
    fileprivate func animateCircleA(){
        lazy var startPointA = CGPoint(x: -layerWidth/2 + 30, y: 0)
        lazy var endPointA = CGPoint(x: (self.view.frame.width - layerWidth / 2), y: 300)
        
       
        let animate = CABasicAnimation(keyPath: "position")
        animate.timingFunction = CAMediaTimingFunction(name: .linear)
        animate.fromValue = NSValue(cgPoint: startPointA)
        animate.toValue = NSValue(cgPoint: endPointA)
        animate.repeatCount = 2
        animate.duration = 5.0
        circleA.add(animate, forKey: "position")
    }
    fileprivate func animateCircleB(){
        
        lazy var startPointB = CGPoint(x: 0, y: 0)
        lazy var endPointB = CGPoint(x:-(self.view.frame.width - layerWidth / 2) - 30, y: -(self.view.frame.width - layerWidth / 2) + 30)
        
        let animate = CABasicAnimation(keyPath: "position")
        animate.timingFunction = CAMediaTimingFunction(name: .linear)
        animate.fromValue = NSValue(cgPoint: startPointB)
        animate.toValue = NSValue(cgPoint: endPointB)
        animate.repeatCount = 2
        animate.duration = 5.0
        circleB.add(animate, forKey: "position")
    }

}

Kindly suggest me right way to get started.

How to make both layer transparent while crossing each other?

its not overlapping if we set alpha or opacity but we need alpha 1 at viewload. — karthikeyan, Aug 05 '22 at 06:52
yes if its helps, direct support not there as you said there is no easy way to do this — karthikeyan, Aug 05 '22 at 08:19
Actually I found a better way, so please ignore what I said before :) — Sweeper, Aug 05 '22 at 09:44

score 2 · Accepted Answer · answered Aug 05 '22 at 09:43

The easiest way is to just set the alphas of the layers, but if you don't want the layers to be transparent, then that means you want a different blend mode for the layers.

According to this question, to change the blend mode of a layer, you can set CALayer.compositingFilter. From your desired output, it seems like the screen blend mode is appropriate:

circleA.compositingFilter = "screenBlendMode"
circleA.compositingFilter = "screenBlendMode"

Note that you should add your layers to a view with a transparent background, otherwise the background color of the view is also blended with the circles' colours. This view can be added as a subview of whatever view you were originally going to put the circles in, filling its entire bounds.

someView.backgroundColor = .clear
someView.layer.addSublayer(circleA)
someView.layer.addSublayer(circleB)

merge two CAShaplayer with transparent in Swift5?

1 Answers1