CATransform3DMakeScale 未按预期转换图层宽度

Question

我试图通过将CALayer 的宽度从宽度 1 增加到整个视图的宽度以 3 为增量来使变换动画工作。如果我的理解是正确的，则每个转换都将应用于原始图层大小。如果宽度为 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

这里不需要使用转换；您可以简单地为宽度设置动画。

还有一个常量 CATransform3DIdentity，所以你不需要 CATransform3DMakeScale(1, 1, 1)。

至于您的原始问题，我相信答案是您正在缩放默认锚点，即 0.5、2.5，因此您的放大条几乎有一半在屏幕左侧（或者更准确地说是一半负 0.5 点位于屏幕外左侧）。您还需要在此处进行翻译，或者如果您真的想使用比例尺，则需要移动锚点。动画宽度是一个更简单的解决方案，因为不需要弄乱锚或连接变换。