# coreanimation

9개의 포스트
post-thumbnail

[iOS] CoreAnimation - 1

🐸 최근에 회사에서 UIButton안에 이미지를 빙글빙글 돌려달라는 요청이 있어서 애니메이션 작업을 했습니다. 이런...예. 이 CoreAnimation, Layer 관련된 작업은 그냥 스택오버플로우나 블로그 복붙만해서.. 공부해볼까 합니다. CoreAnimation이란? Core Animation은 앱을 느리게하거나 CPU에 부담을 주지않고 높은 프레임과 스뭇뜨한 애니메이션을 제공해주는 그래픽 렌더링 및 애니메이션 인프라 입니다. (드로잉 시스템 자체가 아닌 하드웨어에서 앱의 콘텐츠를 합성하고 조작하는 😈인프라 라는게 강조되네요) 애니메이션의 각 프레임을 그리는데 필요한 대부분의 작업은 자동으로 수행됩니다. 개발자가 할 일은 start나 end point같은 animation parameters를 지정해주는것 뿐입니다. CoreAnimation은 그 paramter를 기반으로 프레임을 그리고, **전용 그래픽 하드웨어로 전달하

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

CoreAnimation으로 원을 따라 움직이는 화살표 만들기

원의 둘레를 따라 움직이며 셀렉된 버튼을 가리키는 화살표를 구현한 과정을 정리해보겠습니다. 💡 구현 아이디어 애니메이션의 시작, 종료 지점의 각을 받아서 Arc(호) 모양의 UIBezierPath를 만듭니다. 해당 path를 CAKeyframeAnimation(keyPath: "position") 의 path 로 지정합니다. 애니메이션을 시작합니다. 1. CAShapelayer subclass 정의 처음엔 커스텀 이니셜라이저안에서 super.init() 만 호출하는 형태의 이니셜라이저만 구현했는데, 그렇게 하면 아래와 같은 크래시가 발생했습니다. > Fatal error: Use of unimplemented initiali

2022년 12월 28일
·
0개의 댓글
·
post-thumbnail

UIView 🆚 CALayer 차이점

안녕하세요~ 릴리이입니다😃 오늘은 비슷한 역할을 하는 것 같지만, 다른 UIView와 CALayer의 특징들과 차이점에 대해 공부해보겠습니다. CALayer 어디서 봤더라? UIView의 그림자(shadow)나 경계선(border)을 설정할 때, layer프로퍼티를 통해 설정했던 경험 한 번씩은 있으실 것 같습니다. 뷰의 그림자와 테두리를 그리는데 layer를 거쳐야한다는 걸 보니, 보여지는 부분과 관련된 객체인 것 같고, 포토샵을 할 때 사용하는 layer와 비슷한 역할을 할 것 같습니다🧐 UIView, CALayer의 근본 UIView의 layer 프로퍼티는 CALayer라는 타입입니다. CALayer는 CoreAnimation 프레임워크에 속한 객체입니다. 반면, UIView는 UIKit 프레임워크 소속이지요. 이 둘은 사실 같은 뿌리에서 파생된 객체들이라고 볼 수 있습니다

2022년 11월 8일
·
0개의 댓글
·

CAShapeLayer

A layer that draws a cubic Bezier spline in its coordinate space. 좌표 공간에 3차원 베지어 스플라인을 그리는 레이어입니다. Declaration Overview 모양은 레이어의 컨텐츠와 첫 번째 하위레이어 사이에서 구성됩니다. 모양은 안티알리아스가 적용되어 그려질 것이며, 가능할 때마다 레졸루션 독립성 보존을 위한 래스터라이징 전에 스크린 공간으로 맵핑될 것입니다. 그러나 코어 이미지 필터와 같은 레이어에 적용된 혹은 조상에 적용된 특정 이미지 처리 작업은 로컬 공간 좌표에서 강제로 래스터화될 것입니다. Listing 1은 복잡한 합성 경로를 어떻게 빌드하는지 보여주며, 모양 레이어를 사용해서 표시합니다. 이 예시에서 연속적으로 변형된 타원이 꽃 모양을 형성합니다. 경로를 표시하는

2022년 9월 21일
·
0개의 댓글
·

Core Animation

Render, compose, and animate visual elements. 시각적 요소를 렌더, 구성, 애니메이션 처리합니다. Overview 코어 애니메이션은 CPU 부담이 덜하고 앱이 느려지지 않도록 하면서 높은 프레임 레이트 및 매끄러운 애니메이션을 제공합니다. 애니메이션의 각 프레임을 그리기 위해 필요한 대부분의 작업은 스스로 구현해야 합니다. 시작점과 끝점과 같은 애니메이션 파라미터를 설정해야 하고, 그러면 코어 애니메이션이 나머지를 처리하며, 렌더링을 가속화하기 위해 대부분의 작업을 전용 그래픽 하드웨어에 전달합니다. 더 자세한 내용은 Core Animation Programming Guide를 보시기 바랍니다. Core Animation Programming Guide <https://developer.apple.com/library/archive/

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

CoreAnimation 활용해서 버튼 회전시키기

저번에 Core Graphics를 이용해서 버튼을 그려보는걸 했었는데, (CoreGraphics 활용해서 +버튼 그려보기) 이번에는 CoreAnimation을 활용해서 그 + 버튼을 클릭하면 40도 회전시켰다가, 다시 클릭하면 원래 상태로 돌아오는 것을 구현해보았다 🦄 Core Animation Core Animation은 iOS와 OS X 모두에서 사용할 수 있는 그래픽 랜더링 및 애니메이션 인프라를 말하며, 앱의 뷰 및 기타 시각적 요소를 애니메이션화 하는데 사용된다고 한다. 애플 아카이브 문서의 [Core Animation Basics](https://developer.apple.

2022년 6월 20일
·
0개의 댓글
·

Core Animation

Render, compose, and animate visual elements. 시각적 요소를 렌더, 컴포즈, 애니메이트합니다. Overview 코어 애니메이션은 CPU에 부담을 주지 않고 앱의 느려짐 없이도 높은 프레임 속도 및 부드러은 애니메이션을 제공합니다. 애니메이션의 각 프레임을 그리기 위해 요구되는 대부분의 작업은 직접 수행해야 합니다. 스타트 포인트와 엔드 포인트와 같은 애니메이션 파라미터를 설정할 수 있으며, 코어 애니메이션은 나머지 부분을 수행하고 대부분의 작업을 전용 그래픽 하드웨어에 넘겨 렌더링을 가속화합니다. 더 자세한 내용은 Core Animation Programming Guide를 보시기 바랍니다. Core Animation Programming Guide <https://developer.apple.com/library/archive/d

2022년 6월 19일
·
0개의 댓글
·

CALayer

An object that manages image-based content and allows you to perform animations on that content. 이미지 기반 컨텐트를 관리하고, 해당 컨텐트에 애니메이션 수행을 가능하게 해주는 객체입니다. Declaration Overview 레이어는 보통 뷰에 대한 백업 저장소를 제공하기 위해 사용되면서도, 컨텐트 표시를 위한 뷰 없이도 사용될 수 있습니다. 레이어의 주요 역할은 제공한 시각적 컨텐트를 관리하는 것이며, 레이어 자체가 배경 색상, 경계, 그림자와 같은 설정된 시각적 특성을 갖고 있기도 합니다. 시각적 컨텐트 관리와 더불어 레이어는 스크린에 나타나기 위해 사용되는 컨텐트(위치, 크기, 변형과 같은)의 기하학에 대한 정보 역시 유지합니다. 레이어의 속성을 수정하는 것은 레

2022년 6월 19일
·
0개의 댓글
·
post-thumbnail

Aug 02, 2021, TIL (Today I Learned) - Basic Animation

학습내용 CAAnimation: Core Animation의 추상 클래스. 실제로 사용되지는 않고해당 클래스를 상속받아서 실제로 사용합니다. CALayer: animation과 view에 있는 이미지 기반의 컨텐츠를 표현할 때 사용 A Basic Animation Screen Shot 2021-08-02 at 10.32.40 AM presentationLayer: 애니메이션이 동작할 때 모습을 뜻함 modelLayer: 애니메이션이 동작한 후 실제로 위치할 곳을 나타냄 이 두 layer는 관념적인 표현입니다. fromValue와 toValue 설정을 통해서 presentationLaye를 설정할 수 있고. position 설정을 통해서

2021년 8월 26일
·
0개의 댓글
·