我有一个自定义的
我在
然后我尝试使用弹性效果来为弧线添加动画,代码如下:
视频中可以看到的问题是,电弧从未超过其原始位置。虽然它在原始位置和静止位置之间振荡,但弹簧效应从未实现。
我在这里错过了什么?
UIView
,我将CAShapeLayer
作为视图层的直接子层添加进去:
private let arcShapeLayer = CAShapeLayer()
CAShapeLayer
在awakeFromNib
中声明了以下属性(边框是为了更容易地可视化动画):
arcShapeLayer.lineWidth = 2.0
arcShapeLayer.strokeColor = UIColor.black.cgColor
arcShapeLayer.fillColor = UIColor.lightGray.cgColor
arcShapeLayer.masksToBounds = false
layer.masksToBounds = false
layer.addSublayer(arcShapeLayer)
我在
layoutSubviews
中声明了arcShapeLayer
层的框架:arcShapeLayer.frame = layer.bounds
接下来我有一个函数,我会从ViewController
中传入一个百分比,以便在一些拖动后实现弧形效果。简单来说,我会在图层底部添加一个quadCurve
:
func configureArcPath(curvePercentage: CGFloat) -> CGPath {
let path = UIBezierPath()
path.move(to: CGPoint.zero)
path.addLine(to:
CGPoint(
x: arcShapeLayer.bounds.minX,
y: arcShapeLayer.bounds.maxY
)
)
path.addQuadCurve(
to:
CGPoint(
x: arcShapeLayer.bounds.maxX,
y: arcShapeLayer.bounds.maxY
),
controlPoint:
CGPoint(
x: arcShapeLayer.bounds.midX,
y: arcShapeLayer.bounds.maxY + arcShapeLayer.bounds.maxY * (curvePercentage * 0.4)
)
)
path.addLine(to:
CGPoint(
x: arcShapeLayer.bounds.maxX,
y: arcShapeLayer.bounds.minY
)
)
path.close()
return path.cgPath
}
然后我尝试使用弹性效果来为弧线添加动画,代码如下:
func animateArcPath() {
let springAnimation = CASpringAnimation(keyPath: "path")
springAnimation.initialVelocity = 10
springAnimation.mass = 10
springAnimation.duration = springAnimation.settlingDuration
springAnimation.fromValue = arcShapeLayer.path
springAnimation.toValue = configureArcPath(curvePercentage: 0.0)
springAnimation.fillMode = .both
arcShapeLayer.add(springAnimation, forKey: nil)
arcShapeLayer.path = configureArcPath(curvePercentage: 0.0)
}
视频中可以看到的问题是,电弧从未超过其原始位置。虽然它在原始位置和静止位置之间振荡,但弹簧效应从未实现。
我在这里错过了什么?
case 10
:https://github.com/mattneub/Programming-iOS-Book-Examples/blob/3ecfba2ec68673c125aca6e276a44d43a4cee947/bk2ch04p148layerAnimation/ch17p490layerAnimation/ViewController.swift - matt