如何解决CABasicAnimation CALayer路径动画方向
我正在尝试使用CABasicAnimation
关键路径来设置图层路径属性的动画。没有得到确切的结果
下面是我正在寻找的路径动画的什么变化
预期动画
注意:-,请忽略切换。.我的重点只是从circular
到moon
动画的路径更改
我尝试过的事情
这是我尝试获取此路径转换动画的代码
@IBDesignable class CustomView: UIView {
private lazy var shapeLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
private func commonInit() {
shapeLayer.frame = bounds
shapeLayer.fillColor = UIColor.black.cgColor
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 3
layer.addSublayer(shapeLayer)
}
override func layoutSubviews() {
shapeLayer.path = drawSunShape(bounds)
}
private func drawSunShape(_ group:CGRect) -> CGPath {
let bezierPath = UIBezierPath()
let radius = group.maxX/2
let center = CGPoint(x: group.midX,y: group.midY)
bezierPath.addArc(withCenter:center,radius: radius,startAngle: -.pi/2,endAngle: 3 * .pi * 0.5,clockwise: true)
return bezierPath.cgPath
}
private func drawMoonShape(_ group:CGRect) -> CGPath {
let rad : CGFloat = group.maxX/2
let center = CGPoint(x: group.midX,y: group.midY)
let big = UIBezierPath()
big.addArc(withCenter: center,radius: rad,startAngle:-.pi/2.0,endAngle: .pi/2.0,clockwise: true)
big.addArc(withCenter: CGPoint(x: rad * cos(.pi/2.0),y: center.y),radius: rad * sin(.pi/2.0),startAngle: .pi/2.0,endAngle: -.pi/2.0,clockwise: false)
big.close()
return big.cgPath
}
private func animateToOffShape() {
let anim = CABasicAnimation(keyPath: "path")
anim.toValue = drawMoonShape(bounds)
anim.duration = 5.0
shapeLayer.add(anim,forKey: nil)
}
}
我从这段代码中学到的
更新
我可以借助@sweeper和@max
来实现这一目标但是我要从中间居中
任何指针如何实现预期结果。谢谢
解决方法
如Max所言,当两个路径具有相同的点数时,贝塞尔曲线路径插值效果最佳。
这可能使您接近您要去的地方...
想法是将圆分成两个弧-保持一个弧恒定,并修改另一个弧:
要计算圆弧,我们从一个完整的圆和所需的新月形开始:
要获取新月形点,我们可以采用原始的完整圆并将其中心向上和向左移动(半径的1/3可得到不错的结果):
因此,我们想将圆分成两个弧形...
我们的第一个弧线将从301°开始,顺时针旋转至149°:
这意味着我们的第二个弧将从149°开始并顺时针旋转至301°:
下一步是获取“修改后的”第二弧:
在这里,我们的第二条弧线将从121°开始,然后 逆时针 到达329°:
结果:
这是一些带有硬编码角度的示例代码。我将由您自己来做数学运算,以获取各种月牙形状的精确角度。每次点击都会在“太阳”和“月亮”形状之间来回动画:
// little degrees-to-radians helper
extension BinaryInteger {
var degreesToRadians: CGFloat { CGFloat(self) * .pi / 180 }
}
class MoonView: UIView {
private lazy var shapeLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
private func commonInit() {
shapeLayer.fillColor = UIColor.cyan.cgColor
// to see outline only
//shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 3
shapeLayer.lineJoin = .round
layer.addSublayer(shapeLayer)
}
private var isOn: Bool = true
override func layoutSubviews() {
super.layoutSubviews()
shapeLayer.frame = bounds
if isOn {
shapeLayer.path = drawSunShape(bounds)
} else {
shapeLayer.path = drawMoonShape(bounds)
}
}
private func drawSunShape(_ group:CGRect) -> CGPath {
let radius = group.maxX/2
let center = CGPoint(x: group.midX,y: group.midY)
let bezierPath = UIBezierPath()
bezierPath.addArc(withCenter: center,radius: radius,startAngle: 301.degreesToRadians,endAngle: 149.degreesToRadians,clockwise: true)
bezierPath.addArc(withCenter: center,startAngle: 149.degreesToRadians,endAngle: 301.degreesToRadians,clockwise: true)
bezierPath.close()
return bezierPath.cgPath
}
private func drawMoonShape(_ group:CGRect) -> CGPath {
let radius: CGFloat = group.maxX/2
let centerA = CGPoint(x: group.midX,y: group.midY)
let offset = radius * 1.0 / 3.0
let centerB = CGPoint(x: centerA.x - offset,y: centerA.y - offset)
let bezierPath = UIBezierPath()
bezierPath.addArc(withCenter: centerA,clockwise: true)
bezierPath.addArc(withCenter: centerB,startAngle: 121.degreesToRadians,endAngle: 329.degreesToRadians,clockwise: false)
bezierPath.close()
return bezierPath.cgPath
}
func animateShape() {
let anim = CABasicAnimation(keyPath: "path")
if isOn {
anim.toValue = drawMoonShape(bounds)
} else {
anim.toValue = drawSunShape(bounds)
}
anim.duration = 0.5
anim.fillMode = .forwards
anim.isRemovedOnCompletion = false
shapeLayer.add(anim,forKey: nil)
isOn.toggle()
}
}
class MoonViewController: UIViewController {
let mView = MoonView()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .yellow
view.addSubview(mView)
mView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(mView)
NSLayoutConstraint.activate([
mView.centerXAnchor.constraint(equalTo: view.centerXAnchor),mView.centerYAnchor.constraint(equalTo: view.centerYAnchor),mView.widthAnchor.constraint(equalToConstant: 200.0),mView.heightAnchor.constraint(equalTo: mView.widthAnchor)
])
mView.backgroundColor = .white
let t = UITapGestureRecognizer(target: self,action: #selector(self.didTap(_:)))
view.addGestureRecognizer(t)
}
@objc func didTap(_ g: UITapGestureRecognizer) -> Void {
mView.animateShape()
}
}
,
定义两条路径很重要。 iOS不够智能,无法在两条任意路径之间自动创建漂亮的过渡。两者的构造越接近,过渡就越好。
例如,如果您这样构造月亮
您可以像这样构建您的圈子
请注意,这两个形状都有四个弧线,并且构成大部分圆的两个大弧线在两个形状之间相同(只是稍微旋转了一点)。特别是如果您使两个形状之间的弧线顺序保持一致,则iOS在创建动画方面会做得更好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。