ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [iOS] CALayer λž€?
    iOS/πŸ€– App 2021. 7. 5. 10:54

    μ•ˆλ…•ν•˜μ„Έμš”πŸΆ

    이번 μ‹œκ°„μ—λŠ” CALayer 에 λŒ€ν•΄μ„œ κ³΅λΆ€ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

     

    이 ν΄λž˜μŠ€λŠ” ν”Όκ·Έλ§ˆμ—μ„œ μƒμ„±ν•œ 이미지λ₯Ό μ½”λ“œλ‘œ λ³€ν™˜ν•  λ•Œ 처음 λ³΄μ•˜λŠ”λ°μš”,,

    μ–΄λ–»κ²Œ μ‚¬μš©λ˜λŠ” ν΄λž˜μŠ€μΈμ§€ κΆκΈˆν•΄μ„œ κ³΅λΆ€ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

     

    μ§€κΈˆ μ‹œμ μ— 보면 μ™œ μΆ”κ°€λ˜μ—ˆλŠ”μ§€ λͺ¨λ₯΄κ² λŠ” μ½”λ“œλ‹€

     

    λ˜ν•œ UIVIew λŠ” 기본적으둜 layer μ†μ„±μœΌλ‘œ λΆˆλ¦¬λŠ” root layer λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€.

     

    iOS μ—μ„œ λͺ¨λ“  λ·°λŠ” layer-backed View 이기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

    κ°„λ‹¨ν•˜κ²Œ layer λ₯Ό μ‚¬μš©ν•˜λŠ”(ν˜Ήμ€ λ ˆμ΄μ–΄μ˜ 지원을 λ°›λŠ”) View라고 μ΄ν•΄ν•˜μ‹œλ©΄ 될 것 κ°™μŠ΅λ‹ˆλ‹€.

     

     

    그럼 μ‹œμž‘ν•΄λ³Όκ²Œμš”πŸ”₯

     


     

    그.런.데.

    곡식 λ¬Έμ„œμ— λ‚˜μ™€μžˆλŠ” CALayer λŠ” 읽으면 무슨 λ‚΄μš©μΈμ§€ 잘 이해가 가지 μ•ŠμŠ΅λ‹ˆλ‹€. (μ–΄λŠ μ •λ„μ˜ 배경지식이 ν•„μš”)

     

    κ·Έλž˜μ„œ Core Animation Documentaion Archive 의 λ‚΄μš©μ„ κ°„λž΅νžˆ μ •λ¦¬ν•œ 글을 μž‘μ„±ν•˜μ˜€μœΌλ‹ˆ, 이 글을 μ°Έκ³ ν•΄μ£Όμ„Έμš”!

     

    >> Core Animation μ΄λž€? <<

     

     

    μ„ μš”μ•½

    0. CA λŠ” Core Animation 을 가리킨닀.

    1. 슀슀둜 κ·Έλ¦¬λŠ” 역할을 ν•˜λŠ” ν΄λž˜μŠ€κ°€ μ•„λ‹ˆλ‹€. λŒ€μ‹  μ½˜ν…μΈ μ— λŒ€ν•œ 속성을 가지고 μžˆλ‹€.

    2. 이 μ ‘κ·Όκ°€λŠ₯ν•œ 속성을 λ³€κ²½ν•  λ•Œ, κ·Έλž˜ν”½ ν•˜λ“œμ›¨μ–΄μ— κ΄€λ ¨ 정보λ₯Ό μ „λ‹¬ν•˜λ©΄μ„œ μ• λ‹ˆλ©”μ΄μ…˜μ΄ μ‹œμž‘λœλ‹€.

    3. λ ˆμ΄μ–΄λŠ” 트리 계측 ν˜•νƒœλ₯Ό κ΅¬μ„±ν•œλ‹€. 3가지 μ’…λ₯˜μ˜ 트리 집합이 μ‘΄μž¬ν•œλ‹€. (Model, Presentation, Render)

    3. UIView κ°€ 생성될 λ•Œ, λ ˆμ΄μ–΄ μ˜€λΈŒμ νŠΈλ„ ν•˜λ‚˜ μƒμ„±λ˜μ–΄ UIView 의 main root layer κ°€ λœλ‹€.

    4. λ ˆμ΄μ–΄λŠ” μ½˜ν…μΈ λ₯Ό λΉ„νŠΈλ§΅ ν˜•νƒœλ‘œ μΊμ‹±ν•œλ‹€.


     

     

    이미지 기반 μ½˜ν…μΈ λ₯Ό κ΄€λ¦¬ν•˜κ³ , κ·Έ μ½˜ν…μΈ μ˜ μ• λ‹ˆλ©”μ΄μ…˜μ„ μˆ˜ν–‰ν•˜κ²Œ ν•΄μ£ΌλŠ” 였브젝트

     

    λ ˆμ΄μ–΄μ˜ μ£Όμš”ν•œ 역할은 μ‹œκ° μ½˜ν…μΈ λ₯Ό κ΄€λ¦¬ν•˜λŠ” κ²ƒμ΄μ§€λ§Œ, μ ‘κ·Ό κ°€λŠ₯ν•œ μ‹œκ°μ  속성도 가지고 μžˆμŠ΅λ‹ˆλ‹€.

    (e.g background color, border, shadow...)

     

    μ‹œκ° μ½˜ν…μΈ λ₯Ό κ΄€λ¦¬ν•˜λŠ” 것 뿐만 μ•„λ‹ˆλΌ, κ·Έ μ½˜ν…μΈ μ˜ κΈ°ν•˜ν•™μ  수치 정보λ₯Ό μœ μ§€ν•˜λŠ” 역할도 ν•©λ‹ˆλ‹€.

     

    이 μˆ˜μΉ˜λŠ” μ½˜ν…μΈ λ₯Ό 화면에 ν‘œμ‹œν•˜λŠ”λ° μ‚¬μš©ν•˜λŠ”λ°, postion, size, transform κ³Ό 같은 값듀이 κ·Έ μ˜ˆμ‹œ μž…λ‹ˆλ‹€.

     

    λ ˆμ΄μ–΄μ˜ 속성 값을 λ³€κ²½ν•˜λŠ” 것을 톡해 μ• λ‹ˆλ©”μ΄μ…˜μ„ μ‹œμž‘μ‹œν‚΅λ‹ˆλ‹€

     

    그런데 직접 λ³€κ²½ν•΄λ³΄μ‹œλ©΄ μ•Œκ² μ§€λ§Œ, μš°λ¦¬κ°€ 보톡 μƒκ°ν•˜λŠ” 슀λ₯΄λ₯΅~ μ›€μ§μ΄λŠ” μ• λ‹ˆλ©”μ΄μ…˜μ΄ μ•„λ‹ˆλΌ κ·Έλƒ₯ 띑- ν•˜κ³  λ°”λ€λ‹ˆλ‹€.

     

    Animate λΌλŠ” 단어 μžμ²΄λŠ” κ·Έλƒ₯ μ‚΄μ•„μžˆλŠ” κ²ƒμ²˜λŸΌ λ§Œλ“ λ‹€λŠ” 의미인데, μ›€μ§μ΄κΈ°λŠ” ν–ˆμœΌλ‹ˆκΉ Animation 이라고 λ§ν•˜λŠ” κ²ƒμœΌλ‘œ μ΄ν•΄ν–ˆμŠ΅λ‹ˆλ‹€...

     

    자주 μ• μš©ν•˜λŠ” μΊ λΈŒλ¦Ώμ§€ μ˜μ˜μ‚¬μ „

     

    λ ˆμ΄μ–΄ μ˜€λΈŒμ νŠΈλŠ” μ§€μ†μ‹œκ°„, λ ˆμ΄μ–΄μ™€ μ• λ‹ˆλ©”μ΄μ…˜μ˜ 속도 등을 CAMediaTiming ν”„λ‘œν† μ½œμ„ μ±„νƒν•˜μ—¬ μΊ‘μŠν™” ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 이 ν”„λ‘œν† μ½œμ€ λ ˆμ΄μ–΄κ°€ κ°€μ§ˆ 수 μžˆλŠ” μœ„μ™€ 같은 μ‹œκ°„μ μΈ 정보듀을 μ •μ˜ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

     

    λ§Œμ•½ λ ˆμ΄μ–΄ μ˜€λΈŒμ νŠΈκ°€ 뷰에 μ˜ν•΄ μƒμ„±λ˜μ—ˆλ‹€λ©΄, λ·°λŠ” μžλ™μ μœΌλ‘œ λ ˆμ΄μ–΄μ˜ delegate 으둜 자기 μžμ‹ μ„ μ„€μ •ν•˜κ³ , μš°λ¦¬λŠ” 이 관계λ₯Ό λ³€κ²½ν•˜λ©΄ μ•ˆλ©λ‹ˆλ‹€.

     

    μš°λ¦¬κ°€ λ”°λ‘œ 직접 μƒμ„±ν•œ λ ˆμ΄μ–΄λΌλ©΄, delegate 을 μž„μ˜λ‘œ μ„€μ •ν•  수 있고, κ·Έ 였브젝트λ₯Ό 톡해 μ½˜ν…μΈ λ₯Ό μ œκ³΅ν•˜κ³  λ™μ μœΌλ‘œ μ–΄λ–€ μž‘μ—…λ“€μ„ μˆ˜ν–‰μ‹œν‚¬μˆ˜ μžˆμŠ΅λ‹ˆλ‹€.

     

    ν•˜λ‚˜μ˜ λ ˆμ΄μ–΄λŠ” λ ˆμ΄μ•„μ›ƒ λ§€λ‹ˆμ € 였브젝트λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. 이 λ§€λ‹ˆμ €λ₯Ό 톡해 μ„œλΈŒ 뷰의 λ ˆμ΄μ•„μ›ƒλ“€μ„ λ…λ¦½μ μœΌλ‘œ 관리할 수 μžˆμŠ΅λ‹ˆλ‹€.

     

     

    πŸ’‘μœ„μ˜ κ°œλ…λ“€μ„ μ΄ν•΄ν•˜μ…¨λ‹€λ©΄,  μ§μ ‘ 속성듀을 변경해보고 λ ˆμ΄μ–΄μ˜ ν•˜μœ„ λ ˆμ΄μ–΄λ₯Ό μΆ”κ°€ν•΄λ³΄λ©΄μ„œ

    λŠλ‚Œμ„ μ΄ν•΄ν•˜μ‹œλ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

     

    πŸ’‘CALayer λŠ” μ»€μŠ€ν…€ λ·°λ₯Ό λ§Œλ“€ λ•Œ μ‚¬μš©ν•©λ‹ˆλ‹€.

     

    끝!


     

    πŸ€–πŸŸ’[우짱의 iOS λΈ”λ‘œκ·Έ]πŸ”΅πŸ’»

    iOSλ₯Ό κ³΅λΆ€ν•˜λ©΄μ„œ 배운 λ‚΄μš©μ„ κΈ°λ‘ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

    λŒ“κΈ€

μ–΄μ œλ³΄λ‹€ λ°œμ „ν•œ λ‚˜