[4주차] 애니메이션 과제

[jjwm10625]

✅ Check List

• 스장의 Approve를 받은 후 머지해주세요.
• 수정 요청이 있다면 반영 후 다시 push해주세요.

---

📎 Work Description

ProgressBarViewController

• CAShapeLayer의 strokeEnd 속성을 사용해 원형 프로그레스바를 구현했습니다!
• CABasicAnimation으로 strokeEnd를 0에서 1까지 변화시키는 애니메이션을 사용하고 있어요~
• repeatCount = .infinity와 timingFunction = .linear를 설정해 무한로딩! 프로그레스바가 되도록 했습니다.

    private func startProgressAnimation() {
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 2.5
        animation.repeatCount = .infinity
        animation.timingFunction = CAMediaTimingFunction(name: .linear)
        animation.isRemovedOnCompletion = false

        progressLayer.add(animation, forKey: "ProgressAnimation")
    }

SkeletonViewController

• calculationModeLinear을 사용해 키프레임이 부드럽게~ 이어지도록 했습니다. 찾아보니 이런 로딩 애니메이션에서 이 옵션을 자주 쓰더라구요!

• startSkeleton()과 stopSkeleton()을 분리해 스켈레톤의 시작과 종료를 설정했어요!
  시작할 때는 기존 콘텐츠를 지우고 스켈레톤만 보이도록 했고, 종료할 때는 레이어 애니메이션을 완전히 제거해서 멈추도록 했습니다.

• 키프레임 애니메이션에서는 .repeat 옵션이 동작하지 않기에... completion에서 다시 skeletonAnimate()를 호출하는 방식으로 반복을 구현했습니다.

private func startSkeleton() {
    isSkeletonActive = true

    gonyaniImageView.image = nil
    loadingLabel.text = nil

    skeletonAnimate()
}

private func skeletonAnimate() {
    guard isSkeletonActive else { return }

    UIView.animateKeyframes(
        withDuration: 1.2,
        delay: 0,
        options: [.calculationModeLinear]
    ) {
        UIView.addKeyframe(withRelativeStartTime: 0,
                           relativeDuration: 0.5) {
            self.gonyaniImageView.alpha = 0.4
            self.loadingLabel.alpha = 0.4
        }

        UIView.addKeyframe(withRelativeStartTime: 0.5,
                           relativeDuration: 0.5) {
            self.gonyaniImageView.alpha = 1
            self.loadingLabel.alpha = 1
        }
    } completion: { _ in
        self.skeletonAnimate()   // 반복
    }
}

private func stopSkeleton() {
    isSkeletonActive = false

    gonyaniImageView.layer.removeAllAnimations()
    loadingLabel.layer.removeAllAnimations()
}

---

📷 Screenshots

기능/화면	iPhone 11 Pro
ProgressBarViewController
SkeletonViewController
어라? 원래 스켈레톤 끝나고 고냐니 보여야하는데 화면녹화를 빨리 껏나바요,, 죄송,, ㅠ

---

💬 To Reviewers

로딩중...