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?

CodePudding user response：

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

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)