본문 바로가기
반응형

분류 전체보기17

Cinema 4D로 Lottie 애니메이션 제작하기 이전 글에서 애프터 이펙트를 활용해 로띠를 만드는 법을 소개했습니다. 용량상의 문제가 거의 없고 개발에도 용이하지만, 로띠가 지원하지 않는 애프터 이펙트 기능들이 많습니다. 그래서 의도한 디자인과 애니메이션을 담을 수 없는 경우가 많습니다. 그렇다면 유려하고 멋진 모션을 로띠에 담을 수는 없을까요? 이번 글에서는 Cinema 4D에서 형태와 모션을 완성한 후에 애프터 이펙트로 불러와 로띠를 제작하는 방법을 소개하고자 합니다. 방법은 이렇습니다. C4D로 디자인과 애니메이션을 완성합니다. 이것의 각 키 프레임마다 아웃라인을 뽑아내 일러스트레이터로 옮기고, 다시 이 패스들을 애프터 이펙트로 보내 애니메이션을 만들면 됩니다. 보통 애프터 이펙트에서는 한 애니메이션 덩어리를 위해 한 가지 소스를 이용합니다. 소.. 2023. 11. 20.
After Effects로 Lottie 애니메이션 제작하기 Lottie는 에어비앤비에서 모바일 프로덕트를 위해 개발한 오픈소스 라이브러리입니다. Lottie는 벡터 데이터를 json 형식의 데이터로 만드는 파일이기 때문에 픽셀의 정보를 가지는 이미지나 동영상 파일에 비해 용량이 굉장히 적습니다. 벡터 기반이기 때문에 해상도에 구애받지 않으며, 또 개발 친화적이기에 IOS, AOS, web 어떤 환경에서도 수정하지 않고 사용할 수 있습니다. 또한 애니메이션 요소들을 상호작용 하도록 수정하기도 용이합니다. 그래서 모바일 프로덕트에 동적 디자인 요소를 추가하기 위해 Lottie를 많이 사용합니다. Lottie는 주로 After Effects에서 디자인을 제작해 json 파일로 추출합니다. After Effects에서 만든 디자인을 Lottie로 제작하는 방법을 설명해.. 2023. 11. 20.
Unity Shader Graph : Position 노드 Object : 오브젝트 좌표계의 위치로, 오브젝트의 XYZ축 기준으로 중심이 0, 가장 바깥쪽이 0.5 입니다. View : 스크린 좌표계의 위치입니다. World : 해당 렌더 파이프라인의 월드 좌표계의 위치입니다. Tangent : 각 면의 탄젠트 방향의 위치입니다. Absolute World : 렌더 파이프라인에 관계 없는 절대좌표 위치입니다. Position 노드를 활용해 움직이는 Object 만들기 기본적으로 Shader graph의 vertex Position은 Object Space로 세팅되어 있습니다. 이 Object Space의 값을 변화시켜 Object를 이동시킬 수 있습니다. 먼저 Position 노드를 생성한 후 Split으로 각 채널을 분리해 줍니다. 그리고 Y축에 해당하는 'G.. 2023. 3. 8.
Unity Shader Graph : Time 노드 Unity shader graph의 Input > Basic > Time 노드는 시간과 연관된 값을 추출합니다. 맨 위의 'Time' 은 일정하게 증가하는 값입니다. 두 번째 'Sine Time' 은 sine 그래프 값입니다.일정한 속도로 -1 에서 1 사이 값을 반복적으로 출력합니다. 마찬가지로 'Cosine Time'은 cosine 그래프 값입니다. 'Delta Time'은 프레임 시간 값입니다. Trigonometrical > Sine, Cosine 노드는 Input(x)를 임의로 정할 수 있는 노드입니다. 따라서 Sine이나 Cosine 노드의 Input에 Time을 넣으면 Time 노드의 'Sine Time', 'Cosine Time'과 같은 결과를 얻을 수 있습니다. Time 노드로 Ring .. 2023. 3. 8.

티스토리툴바