Swift:CAShapeLayer 를 사용 하여 ProgressBar 만 들 기

Progress Bar 는 작 지만 많은 곳 에서 사용 되 는 물건 입 니 다.인터넷 연결 일 수도 있 고 앱 자체 에 불 러 올 것 이 많 을 수도 있 습 니 다.기본적으로 회전 하 는 국화 가 하나 밖 에 없 는데 개성 있 는 앱 을 만 드 는 데 는 부족 하 다.여 기 는 CAShape Layer 를 이용 하여 개성 있 는 ProgressBar 를 만 듭 니 다.이곳 은 단지 벽돌 을 던 져 옥 을 끌 어 올 리 는 것 일 뿐 이 니,너 는 이 기초 위 에서 너 에 게 더욱 적합 한 것 을 개발 할 수 있다.
CAShape Layer 는 iOS 개발 에서 매우 강 한 것 으로 그 를 이용 하여 다양한 모양 을 개발 할 수 있 고 그 위 에 애니메이션 을 추가 할 수 있다.그래서 CAShape Layer 는 프로 그 레 스 바 를 만 드 는 완벽 한 선택 이다.
이 Progress Bar 는 어떤 거 예요?
우리 가 만 들 려 고 하 는 ProgressBar 는 먼저 어떤 모양 을 갖 춘 다음 에 이 모양 은 계속 애니메이션 을 만 들 고 있다.앱 의 네트워크 요청 이나 정보 불 러 오기 가 완 료 될 때 까지 숨 깁 니 다.이 모양 은 Safari 가 웹 페이지 를 불 러 올 때 처럼 수평 선 일 수도 있 고 동그라미 일 수도 있 습 니 다.한 마디 로 하면 CAShape Layer 로 필요 한 모양 을 만 들 고 그 위 에 애니메이션 을 추가 할 수 있 습 니 다.
그리고 애니메이션 을 추가 하 는 것 도 매우 간단 하 다.CABasic Animation 을 만 들 고 이 애니메이션 을 실행 하면 됩 니 다.
예 를 들 면:

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = CGFloat(0.0)
        animation.toValue = CGFloat(1.0)
        animation.duration = 1.0
        animation.delegate = self
        animation.removedOnCompletion = false
        animation.additive = true
        animation.fillMode = kCAFillModeForwards
//        progressLayer.addAnimation(animation, forKey: "strokeEnd")

ProgressBar 에서 불 러 오 는 진 도 를 나타 낸다 면 CAShapeLayer 의 strokeEnd 속성 대 가 를 통 해 먼저 할 수 있 습 니 다.layers 는 두 가지 중요 한 속성 이 있 기 때문에 하 나 는 strokeStart 이 고 하 나 는 strokeEnd 입 니 다.이 두 속성 은 선 을 그 리 는 것 이 어디에서 시작 해서 어디 까지 끝 나 는 지 정의 하 는 데 쓰 인 다.이 두 속성의 값 범 위 는 0 에서 1 이 므 로 진 도 를 정확하게 표시 하기 위해 서 입 니 다.너 는 시작 과 끝 의 백분율 을 잘 계산 해 야 한다.
코드 를 써 보도 록 하 겠 습 니 다.
앞에서 말 한 바 와 같이 먼저 ProgressBar 의 모양 을 보 여 주 는 CAShape Layer 가 필요 합 니 다.

UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / 2 - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true)

bounds 는:

let bounds = CGRectMake(10, 10, UIScreen.mainScreen().bounds.width - 20, UIScreen.mainScreen().bounds.height - 20)

우선,UIBezierPath 로 원 을 그립 니 다.이 원심 은 bounds 가 정 한 범위 의 중심 에 있 습 니 다.반경 은 바로 이 상자 의 너비 에서 30.0 을 뺀 것 이다.
모든 코드 를 보 세 요:

        var progressLayer = CAShapeLayer()
        progressLayer.frame = bounds
        progressLayer.path = UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / 2 - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true).CGPath
        progressLayer.backgroundColor = UIColor.clearColor().CGColor
        progressLayer.fillColor = UIColor.clearColor().CGColor
        progressLayer.strokeColor = UIColor.lightGrayColor().CGColor
        progressLayer.lineWidth = 4.0
        progressLayer.strokeStart = 0.0
        progressLayer.strokeEnd = 0.0

progressLayer 에 노선 을 설정 할 때 주어진 노선 의 CGPath 가 필요 합 니 다.이곳 은 일부 밑바닥 의 물건 이 므 로 잠시 언급 하지 않 는 다.하지만 기억 해 야 한다.fillColor 는 layer 의 path 로 둘러싸 인 범위 내 에서 어떤 색 을 채 우 는 지 말 합 니 다.다른 속성 은 이해 하기 쉬 워 요.
이 럴 때 progressLayer 를 self.view.layer 에 추가 하고 코드 를 실행 합 니 다.너 는 lightGray Color 의 색깔 의 동 그 라 미 를 볼 수 있 을 것 이다.
이 럴 때 는 우리 가 애니메이션 을 추가 해 야 한다.

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = CGFloat(0.0)
        animation.toValue = CGFloat(1.0)
        animation.delegate = self
        animation.duration = 1.0
        animation.delegate = self
        animation.removedOnCompletion = false
        animation.additive = true
        animation.fillMode = kCAFillModeForwards
        progressLayer.addAnimation(animation, forKey: "strokeEnd")

다시 실행 하면 이 애니메이션 이 나타 납 니 다.