CATransform3DMakeScale이 예상대로 레이어 너비를 변환하지 않습니다.

Question

너비가 1에서 전체보기 너비까지 3 단위로 증가하여 너비가 CALayer이되도록 변환 애니메이션을 얻으려고합니다. 필자의 이해가 정확하다면 각 변형이 원본 레이어 크기에 적용됩니다. 너비가 1이고 변환을 스케일링하는 경우 self.view.frame.size.width 애니메이션 레이어가 전체보기 너비를 차지할 것으로 예상되지만 그 대신에 절반 정도 멈추는 것이 좋습니다. 왜 그런가요?

let progressBar1 = CALayer() 
var transform1 = CATransform3DMakeScale(1, 1, 1) 
var transform2 = CATransform3DMakeScale(1, 1, 1) 
var transform3 = CATransform3DMakeScale(1, 1, 1) 

override func viewDidLoad() { 
    super.viewDidLoad() 
    setupAnimationTransforms() 
} 

override func viewDidAppear(_ animated: Bool) { 

    buildBar() 

} 

func setupAnimationTransforms(){ 

    transform1 = CATransform3DMakeScale(20, 1, 1) 
    transform2 = CATransform3DMakeScale(40, 1, 1) 
    transform3 = CATransform3DMakeScale(self.view.frame.size.width, 1, 1) 

} 


func buildBar(){   

    progressBar1.bounds = CGRect(x: 0, y: 0, width: 1, height: 5) 
    progressBar1.position = CGPoint(x: 0, y: self.view.frame.size.height) 

    progressBar1.backgroundColor = UIColor.red.cgColor 
    view.layer.addSublayer(progressBar1) 
    animate1() 

} 

func animate1(){ 

    CATransaction.begin() 
    CATransaction.setCompletionBlock { 

     self.animate2() 
    } 

    let anim = CABasicAnimation(keyPath: "transform") 
    anim.fromValue = progressBar1.transform 
    anim.toValue = transform1 
    anim.duration = 1.00 
    progressBar1.add(anim, forKey: "transform") 
    CATransaction.setDisableActions(true) 
    self.progressBar1.transform = transform1 
    CATransaction.commit() 

} 

func animate2(){ 

    CATransaction.begin() 
    CATransaction.setCompletionBlock { 

     self.animate3() 

    } 

    let anim = CABasicAnimation(keyPath: "transform") 
    anim.fromValue = transform1 
    anim.toValue = transform2 
    anim.duration = 1.00 
    progressBar1.add(anim, forKey: "transform") 
    CATransaction.setDisableActions(true) 
    progressBar1.transform = transform2 
    CATransaction.commit() 
} 

func animate3(){ 

    CATransaction.begin() 
    CATransaction.setCompletionBlock { 

     print("DONE") 

    } 

    let anim = CABasicAnimation(keyPath: "transform") 
    anim.fromValue = transform2 
    anim.toValue = transform3 
    anim.duration = 1.00 
    progressBar1.add(anim, forKey: "transform") 
    CATransaction.setDisableActions(true) 
    progressBar1.transform = transform3 
    CATransaction.commit() 

} 

Answer 1

여기서 변환을 사용할 필요가 없습니다. 너비를 간단하게 애니메이트 할 수 있습니다.

또한 CATransform3DMakeScale (1, 1, 1)이 필요하지 않으므로 CATransform3DIdentity가 일정합니다.

원래 질문에 대한 대답은 0.5, 2.5 인 기본 앵커 포인트에 대해 비율을 조정한다는 것입니다. 따라서 확대 된 막대의 거의 절반이 화면 왼쪽에서 벗어납니다 (또는 정확히 0.5에서 0.5 점은 왼쪽에서 오프 스크린입니다.) 여기서도 번역이 필요하거나 척도를 사용하는 경우 앵커 포인트를 이동해야합니다. 앵커 또는 연결 변환을 망칠 필요가 없으므로 너비를 애니메이션으로 만드는 것이 훨씬 쉬운 방법입니다.