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
填充开始时间之前的任何值(通过将开始时间之前的任何时间夹紧到动画开始):
所以我有一个条形图,其中每个条形图都是一个 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
填充开始时间之前的任何值(通过将开始时间之前的任何时间夹紧到动画开始):