소개

이런 느낌의 녀석을 만듭니다.

샘플

코드

우선 이것을 그대로 페트와 붙여, 시뮬레이터로 확인해 보세요!
위의 애니메이션과 같은 것을 할 수 있어야합니다.

class ViewController: UIViewController {


    override func viewDidLoad() {
        super.viewDidLoad()

        // グレーの線を作る
        let backLayer = CAShapeLayer()
        backLayer.path = CGPath(rect: CGRect(x: 100, y: 300, width: 200, height: 200), transform: nil)
        backLayer.lineWidth = 20
        backLayer.fillColor = UIColor.clear.cgColor
        backLayer.strokeColor = UIColor.systemGray6.cgColor
        view.layer.addSublayer(backLayer)

　　　　　　　　　　　　　　　// 赤色の線を作る
        let layer = CAShapeLayer()
        layer.path = CGPath(rect: CGRect(x: 100, y: 300, width: 200, height: 200), transform: nil)
        layer.lineWidth = 5
        layer.fillColor = UIColor.clear.cgColor
        layer.strokeColor = UIColor.red.cgColor
        view.layer.addSublayer(layer)
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　// 赤色の線にアニメーションをつける
        let circularProgressAnimation = CABasicAnimation(keyPath: "strokeEnd")
        circularProgressAnimation.duration = TimeInterval(5)
        circularProgressAnimation.fromValue = 0
        circularProgressAnimation.toValue = 1.0
        circularProgressAnimation.fillMode = .forwards
        circularProgressAnimation.isRemovedOnCompletion = false
        layer.add(circularProgressAnimation, forKey: "")

    }

}

path 만들기(CAShapeLayer)

우선 아래의 코드로 선을 어디에, 어떤 크기로 설치할지를 결정합니다.
이번에는 사각형의 path를 만들고 있습니다만, CGPath의 이니셜라이저에는 형태를 원으로 하거나 할 수 있는 것도 있습니다.

backLayer.path = CGPath(rect: CGRect(x: 100, y: 300, width: 200, height: 200), transform: nil)

이렇게 변경하면 회색 경로가 원이 될 것입니다.
빨간색 선에도 이 설정을 하면 원을 그리듯이 빨간색 선이 진행됩니다.
backLayer.path = CGPath(roundedRect: CGRect(x: 100, y: 300, width: 200, height: 200), cornerWidth: 100, cornerHeight: 100, transform: nil)

나머지 lineWidth 등은 아마 알 수 있다고 생각하므로 할애합니다.

선 끝의 모양

빨간색 선으로 아래 코드를 추가하고 다시 빌드해 보세요.

layer.lineCap = .round

이것을 추가하면 애니메이션을 할 때 빨간색 모서리가 둥글게되었다고 생각합니다.
이해하기 어려운 사람은
이하의 애니메이션의 시간을 5에서 10으로 해 보면 알기 쉬울지도 모릅니다!

circularProgressAnimation.duration = TimeInterval(5)

애니메이션 (CABasicAnimation)

다음은 애니메이션에 대한 설명입니다.
①애니메이션의 종류를 선택
keyPath에 의해 애니메이션의 종류를 바꿀 수 있는 것 같습니다.
예를 들어 "strokeEnd"를 "opacity"로 바꾸면 빨간색 선이 점차 어두워지는 애니메이션이 될 것입니다.

let circularProgressAnimation = CABasicAnimation(keyPath: "strokeEnd")

다른 keyPath에 대해서는 애플 문서를 참조하십시오.
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / 도쿠 멘 타치 온 / 쿠아 rtz 이것 / 카바 카시 마치 온

② 애니메이션의 시간을 설정
다음 코드로 애니메이션 시간을 설정할 수 있습니다.

circularProgressAnimation.duration = TimeInterval(5)

③ 애니메이션의 시작과 끝을 선택
fromValue와 toValue에 값을 넣으면 시작과 끝 위치를 결정할 수 있습니다.
예를 들어, 다음과 같이 설정하면 이미 절반 빨간색 선이 그려진 상태에서 시작하여 일주된 위치에서 애니메이션이 끝납니다. 여러가지 값을 넣어 어떤 움직임을 하는지 확인해 보세요. 0에서 1의 범위에서 값을 설정할 수 있는 것 같습니다.

circularProgressAnimation.fromValue = 0.5
circularProgressAnimation.toValue = 1.0

④기타
다음의 코드에 대해서입니다만, fillMode를 .backward로 하면 애니메이션이 반대가 된다고 생각했지만, 되지 않았습니다. isRemovedOnCompletion에 관해서도 true로 해도 애니메이션 후에 사라지지 않았습니다. 잘 모르겠어요...

circularProgressAnimation.fillMode = .forwards
circularProgressAnimation.isRemovedOnCompletion = false

결론

어땠습니까?
이번 애니메이션은 왼쪽 위 모퉁이 시작, 끝이었지만, UIBezierPath를 사용하면 다른 곳을 시작 지점으로 할 수도 있습니다. UIBezierPath에 대해서도 공부해 보겠습니다.