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 点在屏幕外左侧）。您还需要在此处进行翻译，或者如果您真的想要使用比例尺，则需要移动锚点。动画化宽度是一个更简单的解决方案，因为不需要弄乱锚点或连接变换。

CATransform3DMakeScale 未按预期转换层宽度

CATransform3DMakeScale not transforming layer width as expected

ios

swift3

calayer

cabasicanimation