"경로"CABasicAnimation와 애니메이션 - 나는 체크에 "X"에서 '모프'를 애니메이션을 적용 할 체크 표시

Question

에 'x'를 돌려 : 그래서이 :

(이로 변신한다 애니메이션) :

내가 개별적으로 그 경로를 생성 (아래 코드 참조)하지만 난 CABasicAnimation로 애니메이션을 할 때 내가 대신 처음에 십자가의이 얻을 :

그리고 나서 이것은 체크 표시로 바뀝니다. 왜? 어떻게 해결할 수 있습니까? 아니면 CABasicAnimation과 함께 작동하지 않습니까?

// just the blue background 
    let shapeLayer = CAShapeLayer() 
    shapeLayer.frame = CGRect(x: 0, y: 0, width: bounds.height, height: bounds.height) 
    shapeLayer.backgroundColor = UIColor.blue.cgColor 
    layer.addSublayer(shapeLayer) 


    // first path (the "x") 
    let padding: CGFloat = 10 
    let crossPath = UIBezierPath() 
    crossPath.move(to: CGPoint(x: padding, y: padding)) 
    crossPath.addLine(to: CGPoint(x: bounds.height - padding, y: bounds.height - padding)) 
    crossPath.move(to: CGPoint(x: bounds.height - padding, y: padding)) 
    crossPath.addLine(to: CGPoint(x: padding, y: bounds.height - padding)) 

    // Create the shape layer that will draw the path 
    let signLayer = CAShapeLayer() 
    signLayer.frame = bounds 
    signLayer.path = crossPath.cgPath // setting the path from above 
    signLayer.strokeColor = UIColor.white.cgColor 
    signLayer.fillColor = UIColor.clear.cgColor 
    signLayer.lineWidth = 4 

    // add it to your view's layer and you're done! 
    layer.addSublayer(signLayer) 

    let anim: CABasicAnimation = CABasicAnimation(keyPath: "path") 
    anim.duration = 10.0 // just a test value to see the animation more clearly 

    // the checkmark 
    let checkmarkPath = UIBezierPath() 
    checkmarkPath.move(to: CGPoint(x: bounds.height - padding, y: padding)) 
    checkmarkPath.addLine(to: CGPoint(x: 2 * padding, y: bounds.height - padding)) 
    checkmarkPath.addLine(to: CGPoint(x: padding, y: bounds.height/2)) 

    anim.fromValue = crossPath.cgPath 
    anim.toValue = checkmarkPath.cgPath 

    signLayer.path = checkmarkPath.cgPath 
    signLayer.add(anim, forKey: "path") 

Answer 1

올바르게 애니메이션을 적용하려면 동일한 수의 점으로 두 경로 사이를 움직여야합니다. 귀하의 crossPath는 4 점이며 checkmarkPath는 3입니다.