0

我想为 a 设置动画CALAyer，使其看起来像是凭空出现的。我想我可以先将图层的变换设置为“缩放到 x：0，y：0”。然后做一个动画，将transform设置为“scale to x: 1, y: 1”，就是identity。我认为这会使图层看起来从无到有扩大。但是，当我尝试实现这一点时，该图层立即出现，没有动画。

MCVE：

class MyView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    func commonInit() {
        backgroundColor = .clear
        clipsToBounds = false
        setupLayers()
    }
    
    var squareLayer: CAShapeLayer!
    
    private func setupLayers() {
        layer.sublayers?.forEach { $0.removeFromSuperlayer() }
        squareLayer = CAShapeLayer()
        layer.addSublayer(squareLayer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        drawLayers()
    }
    
    func drawLayers() {
        squareLayer.fillColor = UIColor.red.cgColor
        squareLayer.path = UIBezierPath(rect: bounds).cgPath
        squareLayer.frame = bounds
    }
}

然后在我的VC中：

@IBAction func click() {
    myView = MyView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
    view.addSubview(myView)
    myView.drawLayers()
    myView.squareLayer.setAffineTransform(.init(scaleX: 0, y: 0))
    CATransaction.begin()
    CATransaction.setAnimationDuration(1)
    self.myView.squareLayer.setAffineTransform(.init(scaleX: 1, y: 1))
    CATransaction.commit()
}

我认为这是因为第一个setAffineTransform调用也是动画的（我不知道为什么会产生影响，但我怀疑这可能会产生影响），所以我尝试将第二个调用移动到完成块中：

@IBAction func click() {
    myView = MyView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
    view.addSubview(myView)
    myView.drawLayers()
    CATransaction.begin()
    CATransaction.setCompletionBlock {
        CATransaction.begin()
        CATransaction.setAnimationDuration(1)
        self.myView.squareLayer.setAffineTransform(.init(scaleX: 1, y: 1))
        CATransaction.commit()
    }
    myView.squareLayer.setAffineTransform(.init(scaleX: 0, y: 0))
    CATransaction.commit()
}

但是，输出是相同的。另一方面，如果我在第一次setAffineTransform通话后稍等片刻，它就会起作用：

@IBAction func click() {
    myView = MyView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
    view.addSubview(myView)
    myView.drawLayers()
    myView.squareLayer.setAffineTransform(.init(scaleX: 0, y: 0))
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        CATransaction.begin()
        CATransaction.setAnimationDuration(1)
        self.myView.squareLayer.setAffineTransform(.init(scaleX: 1, y: 1))
        CATransaction.commit()
    }
}

我不认为这是我应该如何解决这个问题。据推测，在那段时间里，某个生命周期方法被调用（我不知道是哪个），而我应该做的是setAffineTransform在该生命周期方法之后进行第二次调用......（？）

我知道我可以使用CABasicAnimation它，但我不喜欢我需要如何使用委托来检测动画的结束。这让很多事情对我来说非常麻烦。由于延迟 0.1 秒有效，这对 s 来说是不可能CATransaction的，对吧？

如何CALayer使用动画制作外观？

4

1 回答 1

1

另一方面，如果我稍等一下

这是正确的。图层必须是渲染树的一部分才能进行动画处理，因此您不能添加图层并将其作为同一事务的一部分进行动画处理。因此，您的异步调用在附加动画之前等待当前事务提交和下一个事务开始，实际上是一个完全正确的解决方案。

CATransaction.flush()另一种可能是添加图层后调用；这有效地提早提交了当前事务。

于 2021-10-04T08:04:02.973 回答