본문 바로가기
728x90
300x250
SMALL

Front-end/애니메이션3

Lottie(로띠) 활용법, JSON 애니메이션을 웹에 추가하는 법 Lottie(로띠)란?Lottie는 Airbnb에서 개발한 Json 기반 애니메이션 파일 형식으로, 웹과 모바일에서 가볍고 부드러운 애니메이션을 실행할 수 있도록 해주는 라이브러리다.Lottie는 After Effects에서 만든 애니메이션을 JSON파일로 변환한 후, lottie-web 또는 lottie-react등의 라이브러리를 통해 쉽게 불러와 사용할 수 있다. Lottie의 특징가볍고 빠름 - JSON형식이기 때문에 GIF보다 파일 크기가 작고, 부드러운 애니메이션을 제공플랫폼 호환성 - 웹뿐만 아니라 Android, ios에서도 동일하게 사용 가능코드로 제어 가능 - 애니메이션을 재생, 멈춤, 속도 조절, 특정 프레임 이동 가능반응형 지원 - 벡터 기반 애니메이션이므로 해상도에 영향을 받지 않음.. 2025. 3. 12.
강력한 애니메이션 GSAP, 사용법과 예제 정리 GSAP(GreenSock Animation Platform)은 강력한 JavaScript 애니메이션 라이브러리로, HTML, CSS, SVG, Canvas, WebGL등의 요소를 부드럽고 효율적으로 애니메이션할 수 있도록 도와준다.  GSAP의 주요 특징1. 강력한 성능 : 일반적인 CSS 애니메이션보다 빠르고 부드럽게 작동한다.2. 다양한 애니메이션 가능 : 위치, 크기, 투명도, 색상, 회전 등 다양한 속성 애니메이션 지원3. 체이닝(Chaining)과 타임라인(Timeline) 지원 : 여러 애니메이션을 순차적으로 또는 동시에 실행 가능4. 반응형 지원 : 반응형 웹에서도 문제없이 동작5. 스크롤 애니메이션 연동 가능 : scrollTrigger 플러그인으로 스크롤 기반 애니메이션 구현 가능 1... 2025. 3. 11.
마이크로 인터랙션 마이크로 인태랙션이란?"사용자의 작은 행동에 반응한느 애니메이션 및 상호작용을 의미"쉽게 말하면, 사용자가 버튼을 클릭하거나, 스크롤하거나, 입력할 때 나타나는 작은 애니메이션 효과애니메이션과 인터렉션의 차이애니메이션(Animation) : 단순히 요소를 움직이거나 변형하는 것인터랙션(Interation) : 사용자의 행동에 따라 반응하는 것즉, 모든 인터랙션에는 애니메이션이 포함될 수 있지만, 모든 애니메이션이 인터랙션은 아님마이크로 인터랙션의 4가지 요소요소설명트리거(Trigger)사용자가 클릭, 터치, 스크롤 등 특정 행동을 했을 때 실행됨규칙(Rules)애니메이션이 어떻게 동작할지 정의(버튼 크기 변경, 색 변화 등)피드백(Feedback)애니메이션이 발생하면서 사용자가 시각적으로 변화를 인식반복.. 2025. 3. 9.
728x90
반응형
LIST

티스토리툴바