UIBezierPath анимация от круга до скругленного квадрата - PullRequest
Новая
       57

UIBezierPath анимация от круга до скругленного квадрата

3 голосов
/ 01 мая 2020

Я пытаюсь анимировать от круга до квадрата с закругленными углами. Насколько я понимаю, количество точек с обоих путей должно быть одинаковым для плавной анимации. Поэтому я написал функцию, которая строит окружности, основанные на нескольких дугах: 

private func circleShape(segmentNumber: Int = 8, radius: CGFloat = 32) -> CGPath {
    let center = self.bounds.center
    let circlePath = UIBezierPath()
    let segmentAngle = CGFloat.pi * CGFloat(2) / CGFloat(segmentNumber)
    var currentAngle: CGFloat = 0

    for _ in 0 ..< segmentNumber {
        let nextAngle = currentAngle + segmentAngle
        circlePath.addArc(withCenter: center, radius: radius,
                startAngle: currentAngle, endAngle: nextAngle, clockwise: true)
        currentAngle = nextAngle
    }

    circlePath.close()
    return circlePath.cgPath
}

Я проверяю количество точек с помощью getPathElementsPointsAndTypes () , и оно увеличивается непропорционально на сегментNumber ( номер сегмента: 1, точки: 13; sN: 2, p: 14; sN: 3, p: 21; sN: 4, p: 16). Поэтому я не могу найти segmentNumber, который дал бы то же количество точек (19), что и функция, которая др aws квадрат: 

private func squareShape(size: CGFloat = 44, radius: CGFloat = 8) -> CGPath {
    let rect = CGRect(center: self.bounds.center, size: CGSize(width: size, height: size))
    let left = CGFloat.pi
    let up = CGFloat(1.5) * CGFloat.pi
    let down = CGFloat.pi / CGFloat(2)
    let right = CGFloat(0.0)
    let squarePath = UIBezierPath()

    squarePath.addArc(withCenter: CGPoint(x: rect.minX + radius, y: rect.minY + radius), radius: radius, startAngle: left, endAngle: up, clockwise: true)
    squarePath.addArc(withCenter: CGPoint(x: rect.maxX - radius, y: rect.minY + radius), radius: radius, startAngle: up, endAngle: right, clockwise: true)
    squarePath.addArc(withCenter: CGPoint(x: rect.maxX - radius, y: rect.maxY - radius), radius: radius, startAngle: right, endAngle: down, clockwise: true)
    squarePath.addArc(withCenter: CGPoint(x: rect.minX + radius, y: rect.maxY - radius), radius: radius, startAngle: down, endAngle: left, clockwise: true)
    squarePath.close()

    return squarePath.cgPath
}

Код анимации: 

let animation = CABasicAnimation(keyPath: "path")
animation.duration = 2
animation.toValue = self.circleShape()
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)

self.testLayer.add(animation, forKey: "pathAnimation")

Результат:

enter image description here

Что можно изменить, чтобы сделать анимацию такой же плавной, как в примере без закругленных ритов?

enter image description here

1 Ответ

4 голосов
/ 01 мая 2020

Вы можете просто иметь два пути 

    func circlePath () -> UIBezierPath {
        return UIBezierPath(roundedRect: CGRect(x:0, y:0, width:50, height:50), cornerRadius: 25)
    }

    func squarePath () -> UIBezierPath {
        return UIBezierPath(roundedRect: CGRect(x:0, y:0, width:30, height:30), cornerRadius: 4)
    }
...