[Swift] 5주차 스터디 - Animation, Lottie

5주차 - animation, lottie

animation

swift에서 애니메이션 효과를 주기 위한 구현 방법들은 다음과 같습니다.

• animate(WithDuration:animations:)

class func animate(
withDuration duration: TimeInterval, 
animations: @escaping () -> Void
)

• animate(WithDuration:animations:completion)
  • 애니메이션의 기본 메서드들이 완료되면 completion이 동작합니다.

class cunf animate (
withDuration duration: TimeInterval, 
animations: @escaping () -> Void, 
comepletion: ((Bool( -> Void)? = nil
)

사용 예제

import UIKit

class ViewController: UIViewController {

    let myView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        myView.backgroundColor = .red
        myView.center = view.center
        view.addSubview(myView)


        //터치하면 애니메이션이 작동하는 버튼 만들기
        let button = UIButton(frame: CGRect(x: (view.frame.size.width-200)/2, y: view.frame.size.height-220, width: 200, height: 200))
        button.backgroundColor = .black
        button.setTitleColor(.white, for: .normal)
        button.setTitle("Start", for: .normal)
        button.addTarget(self, action: #selector(animate), for: .touchUpInside)
        view.addSubview(button)

        }


        //애니메이션 효과를 설정한다. 버튼을 터치하면 1초 후에 myView가 지정한 크기만큼 커진 후 다시 원래 크기로 돌아온다.
        @objc func animate() {
            UIView.animate(withDuration: 1, animations: {
                self.myView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
                self.myView.center = self.view.center
            }, completion: {done in
                if done {
                    UIView.animate(withDuration: 1, animations: {
                        self.myView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
                        self.myView.center = self.view.center
                })
            }
        })

     }


}

lottie

lottie란?

iOS, Android, Windows 등 여러 플랫폼에서 사용할 수 있는 라이브러리로, JSON 기반의 Adobe After Effects 애니메이션 구문을 분석하여 화면에 애니메이션을 렌더링해줍니다.

설치 방법

구글에서 cocoapods를 검색하고, 터미널에서 명령어를 입력해 설치해줍니다. 작업하고자 하는 폴더 경로에서 설치해야 합니다!

$ sudo gem install cocoapods

설치 후 pod init 명령어를 실행하면 작업 폴더에 podfile이 생깁니다.

podfile에 pod를 추가합니다.

pod 'lottie-ios'

프로젝트 경로에서 아래의 명령어를 실행시킵니다.

pod install

lottie를 사용할 곳에서 import 합니다.

import Lottie

lottie 사용하기

로티 홈페이지에서 원하는 애니메이션 파일을 찾습니다.

 

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

Download JSON을 눌러서 저장합니다.

사용 예시

class ViewController: UIViewController {

    let animationView: AnimationView = ()
    override func viewDidLoad() {
        super.viewDidLoad()

        override func viewDidAppear( animate:Bool) {
            setup()
        }
    }

    func setup() {
        //animationView 크기가 view와 같도록 설정
        animationView.frame = view.bounds
        //사용할 JSON 파일의 이름을 적어준다.
        animationView.animation = Animation.named("82611-Done")
        animationView.contentMode = .scaleAspectFit
        //실행
        animationView.play()
        //view안에 Subview로 넣어준다,
        view.addSubview(animationView)
}