[APP] :: Lottie 애니메이션을 이용한 App Empty State 디자인 ::
267
2023.03.02 13:10
첨부파일
-
1 2023-03-02 13:10:57
-
- 첨부파일: Untitled-2.jpg (745.9K)0 2023-03-02 15:01:31
짧은주소
본문
.
.
.
.
.
※(주)어니언스 의료기록&복약관리 스마트폰 어플리케이션 파프리카케어 App empty state 아이콘 및 이미지 lottie 애니메이션으로 제작.
1. Adobe AfterEffect를 이용하여 애니메이션을 미리 제작함.
2. 적용하고자하는 페이지에 lottie CDN을 적용한다.
<script src="lottie-player@latest/dist/lottie-player.js"" TARGET="_blank" rel="nofollow">https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
lottie 대시보드에서 다운로드 받은 해당 애니메이션 JSON파일을 서버에 업로드 하여 해당 경로로 lottie-player 태그로 불러온다.
<lottie-player src="./src/img/lottie/ani--empty-state--without_wifi.json" background="transparent" speed="1" loop autoplay></lottie-player>
3. 작업기간 (2021.12 ~ 2022.1)
4. Lottie 애니메이션 페이지 : http://topgun8127.ipdisk.co.kr:8000/emptystate/local.htm
.
.
.
.
※(주)어니언스 의료기록&복약관리 스마트폰 어플리케이션 파프리카케어 App empty state 아이콘 및 이미지 lottie 애니메이션으로 제작.
1. Adobe AfterEffect를 이용하여 애니메이션을 미리 제작함.
2. 적용하고자하는 페이지에 lottie CDN을 적용한다.
<script src="lottie-player@latest/dist/lottie-player.js"" TARGET="_blank" rel="nofollow">https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
lottie 대시보드에서 다운로드 받은 해당 애니메이션 JSON파일을 서버에 업로드 하여 해당 경로로 lottie-player 태그로 불러온다.
<lottie-player src="./src/img/lottie/ani--empty-state--without_wifi.json" background="transparent" speed="1" loop autoplay></lottie-player>
3. 작업기간 (2021.12 ~ 2022.1)
4. Lottie 애니메이션 페이지 : http://topgun8127.ipdisk.co.kr:8000/emptystate/local.htm
댓글목록
등록된 댓글이 없습니다.