CALayer在动画制作之前已经出现在屏幕上

Question

所以我有一个条形图，每个条形图都是CALayer。我想用不同的延迟为每个图层设置动画。

private func drawBar(xPos: CGFloat, yPos: CGFloat, color: UIColor) {
    // create animation
    let animation = CABasicAnimation(keyPath: "bounds.size.height")
    animation.beginTime = CACurrentMediaTime() + StaticVars.delay
    animation.fromValue = 0
    animation.toValue = mainLayer.frame.height - bottomSpace - yPos
    animation.duration = 2.0
    StaticVars.delay += 0.1

    // create bar
    let barLayer = CALayer()
    barLayer.anchorPoint = CGPoint(x: 1, y: 1)
    barLayer.frame = CGRect(x: xPos, y: yPos, width: barWidth, height: mainLayer.frame.height - bottomSpace - yPos)
    barLayer.backgroundColor = color.cgColor
    barLayer.add(animation, forKey: nil)
    mainLayer.addSublayer(barLayer)
}

这很有效，但有一个问题：图表已经出现在屏幕上，而不是等待延迟（0.1），而不是开始延迟动画每一层。

我不明白为什么图表已经显示。我想要的是当应用程序出现在屏幕上时，条形图不应该是可见的，就在图表开始动画的第一次延迟之后。

Answer 1

如果你希望图层在开始之前看起来具有fromValue（使用beginTime设置），你可以将它配置为通过将fillMode设置为.backwards来“向后”填充：

animation.fillMode = .backwards

如果没有这个，动画将在beginTime之前和beginTime + duration之后的所有时间显示模型值（图层实际帧的高度）：

通过此更改，动画将使用fromValue填充开始时间之前的任何值（通过在开始时间到动画开始之前的任何时间进行钳制）：