[iOS] 8주차 세미나 정리

[Animation]

- 애니메이션이란?

: 평소 앱서비스를 사용하면서 자연스럽게 접하게 되었을텐데, 동적으로 실행되는 서비스를 애니메이션이라고 한다!

- 버튼 클릭, 화면 전환, 새로고침 등등

 

애플에서는 iOS 앱을 개발할때, 애니메이션이 사용하면 좋은 세가지 분류가 있다!

1. 시스템 상태를 나타내기 위해

 

2. 메뉴 및 전환을 나타내기 위해 (채팅방 버튼을 누르면 메뉴가 펼처지는 애니메이션 볼수있는것처럼)

 

3. 시작적인 피드백을 주기 위해

 

• 정리

애니메이션을 사용하는 세가지 경우는?

1) 시스템 상태를 나타내기 위해

2) 메뉴 및 전환을 나타내기 위해

3) 시각적인 피드백을 주기 위해

 

- 애니메이션 나타내기위해 2가지 방법 사용하는데, UIView와 Core Animation이 있다.

- Core Animaiton은 난이도가 좀 있어서 오늘은 UIView animate만 실습!

 

[Gesture]

터치 액션은 버튼으로만 가능할까?

- 모바일 환경에서 사용자가 스크린을 통해 사용되는 액션이 터치만 있지않고 다양한 제스쳐가있을텐데, 사용자가 스크린을 통해 주입시킬수있는 애니메이션을 대체하기 위해 제스쳐를 사용한다.

 

1) Touch

- 카카오톡 채팅방에서 채팅을 하다가 키보드를 내리고싶으면, 채팅방을 터치해서 키보드를 내리는데 이럴때 사용할 수 있는게 제스쳐다!

 

2) Swipe

앱을사용하는경우가 아니더라도 바탕화면에서 스와이프로 내리면 앱을 검색할수있는 창이 나타나는데, 이런경우에도 제스쳐를 사용한다!

 

• iOS의 Gesture의 종류 (8가지)

자주 사용하는것 : Drag(방향성없음), Swipe(방향성있음-상하좌우), Tap (cf.다 외울필요는 없고, 자주 사용하는것만 알아주면 된다!)

 

- 실제로 개발할때는 제스쳐 클래스 인스턴스를 생성하여 사용할텐데, 아래 7가지 클래스 사용한다!

- 개발할때는 클래스에 맞는 인스턴스를 생성하여 사용하면 된다.

 

[실습]

Animation

1) Gesture를 통해서 액션 구현

- 버튼을 누르면 늘어나도록!

 

• 소스코드

//
//  ViewController.swift
//  week8
//
//  Created by 김민경 on 2022/11/14.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var redView: UIView!
    
    @IBOutlet weak var redViewTopConstraint: NSLayoutConstraint!
    @IBOutlet weak var redViewHeightConstraint: NSLayoutConstraint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // 버튼을 누르면 뷰에 레이아웃을 바꾸도록 구현
    @IBAction func btnDidTap(_ sender: Any) {
        UIView.animate(
            withDuration:3,
            animations: {
                // top, height 반대로 씀 - 수정하기
                self.redViewTopConstraint.constant = 50
                self.redViewHeightConstraint.constant = 500
                self.view.layoutIfNeeded() // UI 변경사항에 대한 업데이트가 필요하다는것을 명령해주는것 (뷰한테)
                
        })
    }
    // UIVIew.animate에는 여러가지 파라미터가 제공되는데, 필요한것만 사용하면 된다.
    
    
    
}

 

Gesture

1) Tap 

- Tap할때마다 늘어났다가 줄었들었다 하도록!

 

• 소스코드

//
//  ViewController.swift
//  week8
//
//  Created by 김민경 on 2022/11/14.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var redView: UIView!
    
    @IBOutlet weak var redViewTopConstraint: NSLayoutConstraint!
    @IBOutlet weak var redViewHeightConstraint: NSLayoutConstraint!
    
    var flag=false
    
    @IBOutlet var redViewTapGesture: UITapGestureRecognizer!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        redViewTapGesture.addTarget(self, action: #selector(redViewDidTap))
    }
    
    @objc func redViewDidTap() { // object-c 함수
        // TODO : 뭔가 작업
        if !flag {
            UIView.animate(
                    withDuration:3,
                    animations: {
                    self.redViewTopConstraint.constant = 50
                    self.redViewHeightConstraint.constant = 500
                    self.view.layoutIfNeeded()
                },
                completion: { _ in // 클로저 공부하기!
                    self.flag=true

                }
            )
        } else {
                UIView.animate(
                    withDuration:3,
                    animations: {
                    self.redViewTopConstraint.constant = 199
                    self.redViewHeightConstraint.constant = 128
                    self.view.layoutIfNeeded()
                },
                completion: { _ in // 클로저 공부하기!
                    self.flag = false
                }
            )
        }
    }
    
}

 

 

+ 공부해두면 좋을 내용

ex. 대화내용창에서 기본 스크롤기능이있는데, 추가로 스와이프기능까지있다면? (제스쳐 여러개 곂치면 어떻게되는지)

반드시 공부해야할부분 중에 @escaping 클로저 공부하기

- 다음주 세미나때 서버 네트워킹 연결할때 반드시 들어가므로 예행연습!!

 

[미션안내]

• 스탠다드 미션

지난주까지 진행했던 미션하면서 개발해놓은 프로젝트에 애니메이션 추가하기 (최소 2~3개 붙여보기) 굳이 저번주꺼아니어도 지난 주차에 추가해서 적용해도 좋음

• 챌린지 미션

이번주 없음 (그동안 해왔던 미션중에 부족한 부분 보충하는 시간가지기)

 

+@escaping이거만큼은 반드시 공부해오기!!

(클로저 공부해본적없으면 클로저부터 공부해오기!)