Skip to main content

11 posts tagged with "iOS"

View All Tags

· 3 min read

Lottie Animation​

  1. What is the Lottie Animation
  • JSON 기반의 이미지 파일
  1. Lottie 라이브러리 설치
  • pod init
  • podfile에 추가 pod 'lottie-ios'
  • pod install
  • open ProjectName.xcworkspace
  1. Lottie 사용법

  • Animation 띄우기

    • private var animationView: AnimationView? // 애니메이션뷰 변수 선언
    • animationView = .init(name: "coffee") // 애니메이션 뷰에 다운받은 coffee.json(로티이미지) 설정
    • animationView!.frame = view.bounds // 애니메이션뷰 프레임 설정
    • animationView!.contentMode = .scaleAscpectFill // 비율 유지하면서 화면 가득 채우기 옵션
    • animationView!.loopMode = .loop // 애니메이션 반복 설정
    • animationView!.animationSpeed = 0.5 // 애니메이션 재생 속도
    • view.addSubView(animationView!) // 베이스 뷰에 애니메이션 뷰 추가
    • animationView!.play() // 애니메이션 재생

  • Progress Image

    • private var progressView: AnimationView? // 변수 선언
    • progressView = .init(name: "download") // download.json 설정
    • progressView.frame = view.bounds
    • progressView.contentMode = .scaleAspectFill
    • view.addSubview(progressView!)

  • url 다운로드 세팅

    • let url = URL(string: "https://archive.org/download/SampleVideo1280x7205mb/SampleVideo_1280x720_5mb.mp4")! // URL 설정
    • let configuration = URLSessionConfiguration.default // url Configuration 설정
    • let operationQueue = OperationQueue() // 비동기 처리를 위한 큐 설정
    • let session = URLSession(configuration: configuration, delegate: self, delegateQueue: operationQueue) // URLSession 생성
    • let downloadTask = session.downloadTask(with: url) // downloadTask 실행
    • downloadTask.resume()

  • 시작, 끝, 완료를 구분하기 위한 enum 설정

    • enum ProgressKeyFrames: CGFloat { case start = 140 case end = 187 case complete = 240 }

  • ProgressView Play

    • progressView?.play(fromFrame: 0, // set start frame toFrame: ProgressKeyFrames.start.rawValue, // set end point loopMode: .none, // 반복 설정 completion: { [self weak] (_) in
      self?.startDownload() // 다운로드 함수 호출 } )

  • startDownLoad()

    • progressView?.play(fromFrame: ProgressKeyFrames.start.rawValue, // set start frame toFrame: ProgressKeyFrames.end.rawValue, // set end frame loopMode: .none, // 반복 설정 completion: { [weak self] (_) in self?.endDownload() // 다운로드 끝 함수 호출 } )

  • endDownload()

    • progressView?.play(fromFrame: ProgressKeyFrames.end.rawValue, toFrame: ProgresssKeyFrames.complete.rawValue, loopMode: .none) )

  • URLSessionDownloadDelegate

    • private func progress(to progress: CGFloat) { let progressRange = ProgressKeyFrames.end.rawValue - ProgressKeyFrames.start.rawValue // set range let progressFrame = progressRange * progress // set frame with progress let currentFrame = progressFrame + ProgressKeyFrames.start.rawValue // set currentFrame

      progressView?.currentFrame = currentFrame // updateFrame

      }

    • func urlSession(_ session: URLSession, downloadTask: URLSessionDownloadTask, didWriteData bytesWritten: Int64, totalBytesWritten: Int64, totalBytesExpectedToWrite: Int64) { let percentDownloaded:CGFloat = CGFloat(totalBytesWritten) / CGFloat(totalBytesExpectedToWrite) // 현재 다운로드 퍼센트 계산 DispatchQueue.main.async { self.progress(to: percentDownloaded) // 메인큐로 progress 함수로 넘겨줌 } }

    • func urlSession(_ session: URLSession, downloadTask: URLSessionDownLoadTask, didFinishDownloadingTo location: URL) { DispatchQueue.main.async { self.endDownload() // 다운로드 완료 } }