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

CALayer's already present on the screen before animating them

所以我有一个条形图,其中每个条形图都是一个 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) 比它开始延迟动画每一层。

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

如果您希望图层在开始之前的时间显示 fromValue(使用 beginTime 设置),您可以通过设置将其配置为填充 "backwards" fillMode.backwards:

animation.fillMode = .backwards

如果没有这个,动画将显示 beginTime 之前和 beginTime + 持续时间之后的所有时间的模型值(图层实际帧的高度):

进行此更改后,动画将使用 fromValue 填充开始时间之前的任何值(通过将开始时间之前的任何时间夹紧到动画开始):