swift - 使用 CABasicAnimation 将半径从 0 调整为 100
问题描述
我想为一个圆圈制作动画。圆的半径应该从 0 增加到 100。我用 transform.scale 动画试过了。但是当然不可能缩放半径为 0 的圆。当我将圆的半径设置为 1 时,圆是可见的,尽管它不应该在动画的开头。最小的例子:
let circleShape = CAShapeLayer()
let circlePath = UIBezierPath(arcCenter: .zero, radius: 0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*2), clockwise: true)
circleShape.path = circlePath.cgPath
circleShape.fillColor = UIColor.brown.cgColor
let circleAnimation = CABasicAnimation(keyPath: "transform.scale")
circleAnimation.fromValue = 0
circleAnimation.toValue = 100
circleAnimation.duration = 1.9
circleAnimation.beginTime = CACurrentMediaTime() + 1.5
circleShape.add(circleAnimation, forKey: nil)
在动画结束时,半径应保持在新值。
编辑:感谢@Rob mayoff
最终代码:
let circleShape = CAShapeLayer()
let circlePath = UIBezierPath(arcCenter: .zero, radius: 400, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*2), clockwise: true)
circleShape.path = circlePath.cgPath
circleShape.fillColor = UIColor.brown.cgColor
let circleAnimation = CABasicAnimation(keyPath: "transform.scale")
circleAnimation.fromValue = 0.0000001
circleAnimation.toValue = 1
circleAnimation.duration = 1.9
circleAnimation.beginTime = CACurrentMediaTime() + 1.5
circleShape.add(circleAnimation, forKey: nil)
circleAnimation.fillMode = .backwards
解决方案
可能您想要做的是将半径设置circlePath
为您的最终半径:
let circlePath = UIBezierPath(arcCenter: .zero, radius: 0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*2), clockwise: true)
circlePath.clone()
然后从一个接近零的数字动画到 1.0:
circleAnimation.fromValue = 0.0001
circleAnimation.toValue = 1.0
如果你想让动画在未来开始(通过设置beginTime
),那么你可能还想设置填充模式,以便fromValue
在动画开始之前应用到图层:
circleAnimation.fillMode = .backwards
推荐阅读
- javascript - Firebase 是否允许“读取:真”规则查看用户电子邮件?
- scala - 如何在 Scala 中证明爆炸原理(ex falso sequitur quodlibet)?
- vuejs2 - BootstrapVue 表不显示数据
- visual-studio-code - VSCode:增加 linter 警告的不透明度
- python-3.x - 如何在brightway2中使用transverse_tagged_databases函数
- javascript - 如果列等于 0,则删除行(mysql)
- python-3.x - 使用网格搜索的神经网络调整隐藏层数
- android - 有问题的剪辑已经在 onDraw 的 Canvas 上设置
- amazon-web-services - 如何解决“无法连接到代理”错误 - AWS S3
- r - 确定函数参数是否为函数调用