Transcript iPhone_3

iPhone Seminar Ⅲ
2010 . 05 . 20 . 금
정보통신연구소 유승구 연구원
Rev. No. 1.0
Last modified: 2010/05/20
2015-04-13
NOVAPEX Mobile Co., LTD
Confidential
Agenda
◈ 그래픽과 애니메이션
1. iPhone에서의 그래픽과 애니메이션
2. Quartz
1. Core Graphics
2. Core Animation
3. 예제 : 터치를 이용한 그림 그리기
1. 비트맵 컨텍스트 활용
2. 코어 애니메이션 활용
참고 링크
2
Confidential
1. iPhone에서의 그래픽과 애니매이션 처리
◈ 그래픽관련 핵심 프레임워크
• 코어 그래픽
- 쿼츠는 아이폰 OS의 주된 그래픽 기능을 모두 구현하는 C 라이브러리
- 2D로 그림을 그리는데 필요한 모든 기능을 제공
• 코어 애니메이션
- 애니메이션 기능을 Objective-C 클래스로 구현한 프레임워크
- 레이어(CALayer) 클래스를 제공한다.
3
Confidential
1. iPhone에서의 그래픽과 애니메이션 처리
◈ 그래픽관련 핵심 프레임워크
• UIKit
- UIView, UIScrollView, UIImageView 등의 뷰 관련 클래스를 제공
- 뷰를 전환하는 등의 애니매이션을 제공
- UIImage, UIColor, UIFont 등 뷰와 직접 관련이 이는 도움 클래스들 제공
- 간단한 사각형을 그릴 수 있다.
• OpenGL ES 1.1 / 2.0
- 아이폰이 제공하는 3D 그래픽 라이브러리로 3D 가속 하드웨어를 통해
고성능의 3차원 그래픽을 구현 할 수 있다.
4
Confidential
2. Quartz
◈ 쿼츠란?
• OS에서 사용하는 모든 그래픽 라이브러리를 총칭하는 개념
• OS의 4가지 구성요소 중 미디어 레이어에 해당함
• 라이브러리 : 메모리상의 뷰, 드로잉 함수, 자료형(Opaque Data Type), 객체
• 프레임 워크 : CoreGraphics Framework 추가
코어 애니매이션
(Core Animation)
쿼츠
(Quartz)
코어 그래픽스
(Core Graphics)
5
Confidential
2-1. Quartz – Core Graphics
◈ Virtual Canvas(Page)
• 뷰나 이미지를 가상 캔버스에 그림
• 페인터 모델 드로잉 방식을 사용
6
Confidential
2-1. Quartz – Core Graphics
◈ Graphic Context
• 비트맵 그래픽 컨텍스트
• PDF 문서 컨텍스트
• 윈도우(뷰, 내부 컨트롤 등) 컨텍스트
• 레이어 컨텍스트
• 프린터 출력 컨텍스트
7
Confidential
2-1. Quartz – Core Graphics
◈ 사용가능한 Data type
• CGPathRef : 벡터 그래픽을 사용하여 Path를 생성하고 선이나 색을 칠함
• CGImageRef : Bitmap 이미지와 Mask 이미지
• CGLayerRef : Layer 개념을 이용하여 사용
• CGPatternRef : 패턴 이미지 사용시
• CGColorRef & CGColorSpaceRef : 쿼츠에서 사용되는 색 정보를 사용 할 때
• CGFontRef : 폰트를 그릴 때
• CGPDFDocumentRef : PDF 메타 데이터 접근을 제공
8
Confidential
2-1. Quartz – Core Graphics
◈ Graphic State
• 스택 구조로 저장하고 다시 불러 내는게 가능함
• 한 장의 도화지에 그려진 이미지의 정보(펜 종류라 생각)
• Stroke color & Fill color
• 좌표계 변환값(CTM, Coordinate space transformation)
• 라인의 다양한 설정 값(width, join, cap, dash)
• 알파값(Alpha), 그림자(Shadow), 혼합(Blend)
선굵기 : 3
CGContextSave
CGContext Restore
Grapic State
Grapic State
선굵기 : 6
9
선굵기 : 3
Confidential
2-1. Quartz – Core Graphics
◈ 좌표(Coordinate)
• CGRect 구조체
CGRect
CGPoint
X
슈퍼 뷰
Y
CGSize
width
frame의 예
height
•프레임(Frame)과 바운즈(Bounds)
• 프레임 : 슈퍼 뷰의 서브 뷰로 더해짐으로 화면에 표시,
Bounds의 예
서브뷰의 원점 위치와 크기를 정의
• 바운즈 : 뷰 오브젝트 자신의 내부 좌표계에 정의되는 원점 위치와 크기
10
Confidential
2-1. Quartz – Core Graphics
◈ 좌표(Coordinate)
• 쿼츠좌표, UIKit 좌표
• 쿼츠 함수는 쿼츠 좌표를 기준으로 동작한다.
• 쿼츠 좌표를 CTM을 이용해 UIKit좌표로 변환하여 뿌려진다.
(0,0)
쿼츠 좌표계
CTM
(Current Transformation Matrix)
UIKit 좌표계
(0,0)
11
Confidential
2-1. Quartz – Core Graphics
◈ 소스 코드
12
Confidential
2-1. Quartz – Core Graphics
◈ 소스 코드
13
Confidential
2-1. Quartz – Core Graphics
◈ 소스 코드
14
Confidential
2-2. Quartz – Core Animation
◈ What is Core Animation
• UI 애니메이션 구성의 어려움, Core Animation을 사용한다면?
• rendering, projection, animation을 위한 Obj-C 클래스의 집합
• 프레임워크 : QuartzCore Framework 추가
• 코어 애니메이션의 장점
• 높은 퍼포먼스를 간단한 프로그래밍 모델을 통해 접근하여 사용할 수 있다.
• 뷰 같은 추상적인 객체 레이어의 구조를 통해 동적인 UI를 구성 할 수 있다.
• 가벼운 데이터 구조로 수 백개의 레이어를 동시에 보거나 움직일 수 있다.
• 애니메이션이 동작하는 동안 쓰레드를 통해 모든 반응(상호작용)을 보장한다.
15
Confidential
2-2. Quartz – Core Animation
◈ 코어 애니메이션의 동작방식
A
B
KeyframeAnimation
duration : 4
C
path :
CALayer
CAAnimation
애니메이션 작업을 통해 움직일 대상
16
애니메이션의 설계도
Confidential
2-2. Quartz – Core Animation
◈ Core Animation Class 구조
17
Confidential
2-2. Quartz – Core Animation
◈ CALayer Class
• 코어 애니메이션의 기반으로 UIView같은 추상적인 개념을 제공한다.
• 코어 애니메이션의 모든 타입의 부모 클래스
• 하나의 슈퍼 레이어와 서브 레이어의 집합으로 계층적 구성을 지님
18
Confidential
2-2. Quartz – Core Animation
◈ Core Transition
• 전환 효과는 크게 두 가지 타입으로 분류됨 (암묵적, 명시적)
• 코어 애니메이션이 제공하는 전환 효과 4가지
• kCATransitionFade : 레이어가 서서히 사라지는 효과 (방향지정 못함)
• kCATransitionMoveIN : 다른 레이어 위로 새로운 레이어가 밀고 들어오는 효과
• kCATransitionPush : 기존 레이어를 밀어내고, 자신이 들어오는 효과
• kCATransitionReveal : 레이어가 서서히 나타나는 효과
19
Confidential
2-2. Quartz – Core Animation
◈ 소스 분석 보간법
20
Confidential
2-2. Quartz – Core Animation
◈ 소스 분석 뷰전환
21
Confidential
마무리
감사합니다.
22
Confidential