Core Animations 학습하기 - PieGraph

프로젝트 중 흥미롭게 학습한 부분이 있어 기록해보았다.
참고: https://www.tnoda.com/blog/2019-06-18/

 

베지어 곡선이란?

- n개의 점으로부터 얻어지는 n-1차 곡선

 

• 애플에서 제공하는 UIBezierPath를 활용하여 지출에 대한 파이차트를 그려보기로 하였다.
• 자판기 구현 프로젝트 때 활용했던 방법보다는, 애니메이션을 적용하여 active한 UI를 나타내보고자 한다.

---

 

VC에서 animate 메소드 호출

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    reportPieChartView.slices = setupSlices()
    reportPieChartView.animateChart()
}

 

• viewDidAppear 메소드 내부에서, 화면이 보여질 때마다 slice(차트에 표현할 모델)을 setup하고 animateChart 메소드를 호출한다.

 

func animateChart() {
    sliceIndex, // 현재 그리고자 하는 slice의 index
    currentPercent, // radian으로 바꿔줄 percentage
    superView layer의 sublayers,
    이전에 남아있던 percentageLabels 초기화

    if sliceIndex < slices.count {
        addSlice(firstSlice)
        addLabel(firstSlice)
    }
}

 

• 후에, CAAnimationDelegate의 애니메이션이 끝났을 때 연쇄적으로 layer를 그릴 수 있도록 첫번째 slice만 add해준다.

 

    // 각각의 퍼센트와 색이 담긴 슬라이스를 파라미터로 주입하여 그림
    private func addSlice(_ slice: Slice) {
        // strikeEnd키로 애니메이션 생성.
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        // strokeEnd의 경우 value 범위는 0~1까지. 모든 범위에 해당하는 애니메이션
        animation.fromValue = 0
        animation.toValue = 1
        // 각 슬라이스의 애니메이션 시간을 받아옴. 전체 durationd에서 percentage에 해당하는 시간
        animation.duration = getDuration(slice)
        // CAMediaTimingFunction.linear -> 일정한 속도
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
        animation.delegate = self 

 

• CABasicAnimation의 keypath를  strokeEnd로 하여 애니메이션을 생성해준다.
• CABasicAnimation은 자주 쓰던 animate 함수보다 다양한 옵션을 줄 수 있고, 설정한 strokeEnd 이외에도 다양한 keyPath가 존재한다
  • Opacity : 투명도에 대한 애니메이션
  • backgroundColor: 배경색에 대한 애니메이션
    • value 값을 CGColor 타입으로 준다.

animation.fromValue = NSColor.red.cgColor
animation.toValue = NSColor.blue.cgColor

• • position: value를 위치 배열로 받는 위치 변화에 대한 애니메이션 (참고: 애플 공식문서)
• 또한, 애니메이션의 종료 시점에 호출할 함수를 정의하기 위해 delegate를 채택한다.

 

        let canvasWidth = superView.frame.width
        let path = UIBezierPath(arcCenter: superView.center,
                                radius: canvasWidth * 3 / 8,
                                // 0 라디안부터 퍼센트에 해당하는 만큼의 라디안까지 path 생성
                                startAngle: percentToRadian(currentPercent),
                                endAngle: percentToRadian(currentPercent + slice.percent - 0.000001),
                                clockwise: true)

        // 다각형을 그리기 위한 레이어 생성
        let sliceLayer = CAShapeLayer()
        // path 등록
        sliceLayer.path = path.cgPath
        // 여기서 채워지는 컬러는 path의 시작과 끝점을 이어 만든 범위
        sliceLayer.fillColor = nil
        sliceLayer.strokeColor = UIColor(named: slice.category.imageName + "-color")?.cgColor
        // 원 안을 채우는게 아니라 라인을 두껍게 그림
        sliceLayer.lineWidth = canvasWidth * 2 / 8
        // layer를 그리는 범위. 1이 맥시멈이고 그것보다 작은 경우 비율만큼만 그려짐
        sliceLayer.strokeEnd = 1
        // 애니메이션 등록
        sliceLayer.add(animation, forKey: animation.keyPath)

        // 만든 레이어를 추가해줌
        superView.layer.addSublayer(sliceLayer)
    }

 

• UIBezierPath를 통해 startAngle, endAngle에 대한 호를 그려준다.
• 다각형 layer로 CAShapeLayer를 생성해주는데.. 그 전에 layer에 대해 조금 알아보면
• CALayer는 실제로 UIView에 속하며 UIView를 지원해주는 역할을 한다. 각 뷰마다 루트 layer는 하나씩 존재하고 이 루트 layer는 각각 Sublayer들을 갖는다. 참고
• view 내부(아래?)에서 core animation, 그래픽등을 처리하는 역할을 한다.
• 실제로 뷰 디버거를 찍어보니 레이블 뷰처럼 추가되지 않고 다음과 같이 해당 뷰의 레이어에 딱 붙어 나타나는 것을 확인할 수 있었다!

 

 

• 다음, 생성한 레이어의 path에 생성한 호를 등록하고, color, width 등을 설정한다.
• 마지막으로 애니메이션을 추가하고 sublayer로 등록을 해주면 된다.

---

 

다음 슬라이스는 어떻게 그리지?

• 앞서 언급했듯이, 애니메이션이 종료되면 채택된 CAAnimationDelegate에 의해 animationDidStop 메소드가 호출된다.
• 이 메소드에서 다음 slice에 대한 추가 작업을 연쇄적으로 진행하게 된다.

extension ReportPieChartView: CAAnimationDelegate {
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        if flag {
            currentPercent += slices[sliceIndex].percent
            sliceIndex += 1
            if sliceIndex < slices.count {
                let nextSlice = slices[sliceIndex]
                addLabel(nextSlice)
                addSlice(nextSlice)
            }
        }
    }
}

 

---

percentage 레이블 표시

• addSlice와 달리, addLabel은 당연하지만 레이어가 아닌 뷰를 새로 추가해준다.
• 추가할 레이블의 위치를 찾는 방법은 다음과 같다
  • startAngle과 endAngle의 중간 지점 까지 UIBezierPath을 통해 호 모양의 path를 생성한다.
  • path를 닫고 currentPoint를 찾으면 그 곳이 레이블이 center를 기준으로 위치하게 될 방향이다.
  • UILabel을 생성하고 text를 설정하고 constraint를 잡아준다.
  • 레이블이 위치하게 될 point를 알고 있으므로, 각각의 x, y 좌표로부터 center를 빼준 값을 centerAnchor로 잡아주면 된다.

 

 

---

결과

 

 

 

• 레이블에 항목명도 추가해야 한다.
• 레이어와 Core Animation에 대한 학습이 더 필요하다... 

 

 

하고싶은것 : 엔딩 크레딧 코어 애니메이션으로 구현 해보기 ㅎㅅㅎ

글 좀 자주 써야겠다 유령블로그가 되어 버렸다 허허

그나저나 요 템플릿 마크다운 작성이 너무 별로다.. 다른 템플릿 찾아봐야겠는걸