[swift] Swift Core Animation을 이용한 그래프 애니메이션

07 Dec 2023

swift

스위프트 (Swift)는 iOS 개발에서 많이 사용되는 언어이며, Core Animation은 iOS 앱에서 그래픽 및 애니메이션을 관리하기 위한 강력한 프레임워크입니다. 이 블로그 게시물에서는 Swift Core Animation을 이용하여 그래프 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. 그래프 뷰 생성

Core Animation을 사용하여 그래프 애니메이션을 만들기 위해 먼저 그래프를 보여줄 GraphView 클래스를 생성합니다. 이 클래스는 UIView의 서브클래스로 만들어야 합니다. 그래프를 그리기 위해 필요한 속성들 (예: 데이터 배열, 색상, 선굵기 등)을 추가합니다.

class GraphView: UIView {
    var dataPoints: [CGFloat] = []
    var graphColor: UIColor = .blue
    var lineWidth: CGFloat = 2.0
    // 그래프를 그리는 로직 구현
}

2. 그래프 애니메이션 추가

이제 GraphView에 애니메이션을 추가해보겠습니다. 우선 GraphView에 애니메이션을 실행할 메서드인 animateGraph()를 추가합니다. 이 메서드는 CABasicAnimation을 이용하여 그래프를 예쁘게 애니메이션화합니다.

class GraphView: UIView {
    // ...
    
    func animateGraph() {
        // 그래프 애니메이션 로직 구현
        let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
        pathAnimation.duration = 1.0
        pathAnimation.fromValue = 0.0
        pathAnimation.toValue = 1.0
        // 그래프 애니메이션 적용
        graphLayer.add(pathAnimation, forKey: "strokeEndAnimation")
    }
}

위 코드에서 CABasicAnimation은 strokeEnd 키 경로에 대한 애니메이션을 생성합니다. 이 애니메이션은 그래프의 선이 나타나는 정도를 표현합니다. duration을 설정하여 애니메이션의 지속 시간을 조절하고, fromValue와 toValue를 설정하여 애니메이션의 시작과 끝 값을 지정합니다. 마지막으로 graphLayer.add(pathAnimation, forKey: "strokeEndAnimation")을 통해 애니메이션을 그래프에 적용합니다.

3. 사용 예시

이제 GraphView를 실제로 사용해보겠습니다. 예를 들어, 특정 데이터의 변화를 나타내는 그래프를 보여주는 앱을 만든다고 가정해봅시다. 다음은 간단한 예시입니다.

class ViewController: UIViewController {
    lazy var graphView: GraphView = {
        let view = GraphView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        view.center = self.view.center
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 데이터 설정
        graphView.dataPoints = [0.2, 0.8, 0.5, 0.9, 0.4]
        graphView.graphColor = .red
        graphView.lineWidth = 3.0
        
        // 그래프 뷰를 화면에 추가
        view.addSubview(graphView)
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // 그래프 애니메이션 실행
        graphView.animateGraph()
    }
}

위 예시에서는 ViewController 클래스에서 GraphView 인스턴스를 생성하고 데이터 및 그래프 모양을 설정한 다음 화면에 추가합니다. 그런 다음 viewDidAppear 메서드에서 animateGraph()를 호출하여 애니메이션을 실행합니다.

이제 앱을 실행하면 지정된 데이터를 가지고 애니메이션 효과를 가진 그래프가 화면에 표시될 것입니다.

이처럼 Swift Core Animation을 이용하면 간단하고 멋진 그래프 애니메이션을 만들 수 있습니다. Core Animation에 대한 더 자세한 내용은 Apple 공식 문서를 참조하시기 바랍니다.