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在创建动画方面会做得更好。