#1 로티 강좌 소개 – Lottie.js 강좌

공유하기
#1 로티 강좌 소개 – Lottie.js 강좌

안녕하세요. 드디어 Lottie.js 강좌를 시작합니다. 로티는 애니메이션을 Json 형식의 코드로 변환해서 제작해서 웹이나 앱에서 사용할 수 있도록 제작된 라이브러리입니다. 사용전 설치부터 간단한 사용법과 javascript를 활용해서 이벤트 제어하는 것까지 알아보도록 할게요.
Lottie.js 강좌는 멤버십 회원을 대상으로 제작된 강좌인데, 기초적인 사용법에 대한 부분 까지는 누구나 볼 수 있도록 업로드 될 예정입니다. 고급 강좌부터는 멤버십 회원에게 제공됩니다 🙂

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 이 강좌에서 제가 사용하는 툴은 에프터이펙트와 비주얼 스튜디오 코드(Visual Studio Code)를 사용합니다. 여러분이 VS Code 말고 다른 에디터를 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

Lottie.js 강좌 커리큘럼

기초

  1. 로티 강좌 소개
  2. lottie.js를 사용하기 위한 환경 세팅하기
  3. 바디무빈 플러그인 사용법
  4. 출력된 코드 분석하기

고급

  1. 코드 간단하게 정리하기
  2. 이벤트 – 탭하면 애니멘이션 실행하기
  3. 이벤트 – 느리게 재생, 마우스 오버시 정지, 거꾸로 재생
  4. 스크롤 시 애니메이션 재생하기
  5. 에펙에서 쉬운예제 제작 후 lottie로 출력하기

25