# lottie

ys4897

오늘은 Lottie 라이브러리를 활용하여 스플래시 스크린에 적용해보자 Lottie 라이브러리는 Airbnb에서 만든 애니메이션 오픈소스 라이브러리이다. Lottie 라이브러리를 사용하기 위해서 build.gradle 파일의 의존성 설정에 추가해주어야 한다. (Sync Now 눌러주는거 잊지말자) Gradle Scripts > build.gradle(Module: app) lottie 최신버전 확인 Lottie 사이트에서 원하는 애니메이션을 고른다. Lottie image download app 우클릭 >

mimmel

🔼🔼🔼 Lottie에서 다운받은 로딩 애니메이션을 적용한 모습이다. Lottie 애니메이션 라이브러리 > Lottie는 React, Ios, Android 등과 호환되는 JSON 기반 애니메이션 파일 형식이다. > 👍 GIF나 MP4등과 같은 형식에 비해 동일한 품질임에도 필요한 용량이 훨씬 작아 웹사이트에 부담이 덜하다. 👍 벡터를 기반으로 하므로 해상도 걱정없이 확대/축소가 가능하다. Lottie 라이브러리 설치하기 > npm install lottie-web Next.js 프로젝트 터미널에 lottie-web 라이브러리를 설치해준다. Lottie 사이트에서 애니메이션 다운받기 Lottie free 애니메이션 다운받는 곳 위의 링크에서 마음에 드는 애니메이션을 고른 후, ![](https://velog.velcdn.com/images/mimme

kjyook

웹 페이지를 만들기 위해 예시 페이지들을 보면서 내가 가장 관심이 갔던 부분은 움직이는 그림들이었다. 저런 애니메이션들은 내가 svg, png 파일들을 주입하는 것처럼 그냥 mp4나 gif 파일을 찾아서 주입하면 되는 건가?라는 의문이 들었고 git 주소를 받아서 뜯어본 결과 Lottie를 이용하여 애니메이션을 주입하신 거였다! <- Lottie 공식 홈페이지 이런 기능의 존재를 알게 되고 사용법을 보면서 Lottie를 사용하는 이유를 알 수 있었다. Lottie의 장점 Lottie는 동영상 파일들에 비해 압도적으로 낮은 용량을 차지한다. 이는 사용자가 웹을 사용할 때 로딩 속도와 직결되기 때문에 엄청난 장점이라고 생각했다. Lottie는 해상도에 구애받지 않아 동적으로 크기 조절이 가능하다. IOS, Andriod, Native, Web 등 다양한 플랫폼에서 사용이 가능하다. 공식 문서도

iepppop

vue3 lottie-web > npm i lottie-web https://www.npmjs.com/package/lottie-web vue-lottie는 Composition API에 직접적인 지원을 제공하지 않는다라고 하여 lottie-web 사용 이 전에 vue-lottie를 적용해봤으나 optional api 사용 예제를 바꿔봐도 적용이 나는 안됐음 적용 고정된 채 스크롤 시에만 움직일 때 >리액트 ver 참고 https://codesandbox.io/s/lottie-scroll-animation-47xog?file=/src/App.tsx:815-863 vue3 @lottiefiles/lottie-interactivity >npm install --save @lottiefiles/lottie-interactivity https://lottiefiles.com/interactivity 스크롤 시 움직이지만 고정 안됨

smurf_

json 파일에서 ty: fl 부분을찾아 K 배열을 변경한다. [R,G,B] 이며 , 0-255범위가 아닌, 0-1의 범위를 갖고있다 ( 0.74 , 0.23,1 등) lottie-colorify 패키지 설치 패키지 설치 lottie-colorify 임포트하기 임포트 위치는 LottieComponent ( 전글 참고 ) Lottie 컴포넌트에서 작성하면된다 참고 : https://www.npmjs.com/package/lottie-colorify?activeTab=readme

smurf_

react-lottie 패키지는 react 18을 지원을 안한다. 그래서 구글링후 lottie-react 받아 설치하니, 인터랙션이 작동을 안한다. 그래서 찾고찾아 찾은 lottie-web 패키지. 이건 `` 컴포넌트를 바로지원하지않아 본인이 직접만들어야함.. 구글링해서 몇개 찾아봤는데 렌더링에서 이상하게 작동해서 svg 가 두번 렌더링된다던지 인터랙션이 안먹히는 오류가 있던가 해서.. 직접 만들어봄 패키지 설치 LottieComponent 생성 (복붙하면됨) 부모컴포넌트에서 Lottie 컴포넌트 호출 오류 피드백 환영합니다

noocgs

lottie란? > 에어비엔비에서 개발한 오픈소스 라이브러리. JSON 기반 애니메이션 파일 형식으로 실시간으로 애니메이션을 렌더링. 백터기반으로 용량이 적고 해상도 저하가 없음. 1. 프로젝트에서 로띠 설치 > npm install --save react-lottie-player 2. 컴포넌트에 로띠 적용

garlicb

유투브에서 최근 Next.js에 대한 장점이나 향후 성장세를 긍정적으로 평가하는 영상이 많아졌다. '개발하는정대리'라는 채널에서 올라온 Next.js 포트폴리오 사이트를 개발하고 배포까지하는 영상을 시청하게 되면서 이번 기회에 Next.js 찍먹을 시도해보았다. 개발하는정대리_Next.js 나만의 포트폴리오 사이트 만들기 (개발하는 김에 배포까지) 1. 환경 스택 설명 Next.js: React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)을 지원하여 초기 로딩 속도를 개선할 수 있다. Notion API: Notion API를 활용하여 Notion DB 데이터를 가져와 사이트에 반영할 수 있다. Tailwind CSS: CSS 프레임워크로, 인라인 코딩 스타일로 생산성을 높여줍니다. (다만 인라인 코드가 좀 더러워진다..) Lottie Animation: Adobe After Effe

jeongye01

이 귀여운 애니메이션은 로그인페이지에서 만날 수 있다. > Lottie 파일은 애니메이션 파일 형식 중 하나이다. Lottie 파일은 크기가 작고(로딩 속도가 빨라서 UX측면에서 좋다), 벡터 기반으로 되어 있어 다양한 디바이스에서 크기를 자유롭게 조절할 수 있다. 디자인툴에서 이를 제작하고 json형식으로 내려받아 개발시 사용하도록 한다. 서비스 url-> https://www.wise24life.site/login lottie 파일 적용하기 nextjs 환경에서 public 폴더에 위 애니메이션(해당 포스팅 섬네일)이 작성된 json 파일을 넣어두었다. lottie-web 라이브러리를 설치했다. 애니메이션 컴포넌트 만들기 로그인 페이지 파일에 배치하기! 참고 https://lottiefiles.com/kr/blog/about-lottie/kr-lottie-vs-gif

okko8522

일단 먼저 로딩이 되긴 하지만 로딩이 Loading... 이 모양 이따구라 바꿔야된다..! 진짜다!! 그래서 바꾸고 netlify로 배포하겠다. 로딩 컴포넌트 구현 일단 나는 그냥 아무런 애니메이션 없으면 로딩 컴포넌트 자체가 보이는 게 꼴보기 싫다. 그래서 애니메이션이라도 취해서 최면을 통해 그 기다리는 시간 마저도심심하지 않게 기다리게 만들어야한다. 그래서 애니메이션을 가져올 거시다. 그 중 json으로 애니메이션을 구현하는 Lottie 애니메이션 라이브러리를 이용할 거시다! Lottie json을 가지고 이미지로 구현해주는 라이브러리다. 이걸 왜 쓰냐면 png, jpg보다 압도적으로 파일 크기가 작아서 가볍고, 벡터에 기반하기 때문에 자유로운 크기 조정이 가능하고, 깨지지 않는다. 또 json 형태라 우리도 읽을 수 있는 형태로 관리도 가능하다. 제작도 쉽다고 하는데 제작은 내 영역이 아니라 패쓰. 하겠다!

ooo3289

lottie는 내가 웹퍼블리셔 첫 취업했을때 바로 접하게 되었다. 딱 한번 사용해 본적있는데 지금은 사용할 기회가 없는지라 더 까먹기 전에 사용법을 기록해 두려고 한다 (나를 위해 ;;) 🤔 로티가 뭐야? 로티는 에어비엔비에서 만들어진 라이브러리이다. 앱은 물론 웹에서도 사용 가능하도록 제작되어있다. LottieFiles라는 곳에 가면 무료로 디자이너들의 애니메이션들도 사용 가능하니 참고하자. (로그인은 필요하다 !) 👉🏼 시작하기 여느 라이브러리들이 그렇듯, 시작을 위해서는 스크립트를 걸어줘야한다. bodymovin으로 가서 lottie.min.js cdn을 가져왔다. 위 스크립트를 헤더에 넣어주면 준비 완료! 👉🏼 원하는 애니메이션 서치 앞서 말했던 [Lottiefiles](https://lottiefile

wlgy33

이번 포스트에서 다룰 내용으로 Android의 Splash Screen을 만드는 건 좋지 않은 방법이다. Android 12 이전까지는 SplashActivity같은 화면을 따로 만들어 구현했다면 Android 12가 나오면서 Splash API가 강제화되었다. Android 12 Splash Screen에 대한 내용은 다른 포스트에서 따로 다룰 것이며 이번 포스트를 진행하는 이유는 순전히 해보고 싶었기 때문이다. 구현은 SplashActivity 화면을 따로 만들어 진행할 것이다. Lottie Lottie는 에어비앤비에서 개발한 JSON 기반의 애니메이션 라이브러리이다. Lottie의 특징 벡터 기반이기 때문에 해상도 저하의 영향을 받지 않고 확대/축소가 가능하다. 용량이 작다. Android, iOS, Web, React Nati

whrudtjr

이하는 After Effects(이하 AE)에서 Bodymovin 혹은 LottieFiles 플러그인을 통해 추출할 수 있는 json 파일의 속성값 구조에 대한 번역이다. 출처 : https://github.com/airbnb/lottie-web/tree/master/docs/json 객체 구조 v : Version(string) lottie 파일을 추출한 Bodymovin의 버전을 표기한다. ip : In Point(number) 원본 AE 컴포지션의 시작 프레임 번호 op : Out Point(number) 원본 AE 컴포지션의 끝 프레임 번호 fr : Frame Rate(number) 초당 프레임률(fps) w : Width(number) 원본 AE 컴포지션과 lottie 결과물의 너비 h : Height(number) 원본 AE 컴포지션과 lottie 결과물의 높이 nm : Name(string) 원본 AE 컴

jerryuhm

Lottie란? Airbnb에서 만든 벡터기반의 애니메이션을 실시간으로 렌더링하는 라이브러리 애니메이션의 재생,정지,크기조절,속도조절등의 자유자재로 핸들링이 가능하다. https://github.com/airbnb/lottie-ios Lottie 사용하기 lottie는 cocoapods, swift package등으로 쉽게 적용하여 사용 가능 pod 'lottie-ios' 애니메이션 데이타는 https://lottiefiles.com 에서 쉽게 다운로드 가능 SwiftUI Lottie 소스 Lottie는 UIKit기반으로 구현된 라이브러리로써 SwiftUI에서 사용하기 위해서는 UIViewRepresentable 프로토콜을 이용하여 wrapping하여 사용할 수 있다. swiftui에서 기본적으로 lottie애니메이션을 사용하는 방법으로 swiftui에서는 간단한 코드로 쉽게 애미메이션 구현이 가능합니다. 애니메이

hui0725

Lottie Animation 여기서 먼저 install을 진행한다. > https://github.com/mifi/react-lottie-player 그리고 여기서 사용할 lottie 파일을 고른다. > https://lottiefiles.com/ install했던 페이지로 돌아가서 파일 양식을 그대로 복붙한다. 받은 lottie 파일을 복분한 파일 양식에 넣는다. 해당 사진 기준으로 적용이 끝났고, animation.js를 적용시켜주면 된다.

soo1608

import React, { useState, useEffect } from 'react'; import "./App.css"; import Lottie from "react-lottie"; import animationSplash from "./lotties/tree_splash.json"; function App() { let [splash, setSplash] = useState(true); useEffect(()=>{ setTimeout(()=>{ setSplash(false) }, 3000) }, []) return ( { splash === true ? : null } ); } function Wrapper() { 🔈🔉🔊📢📣 중요!! const defaultOptions = { loop: true, autoplay: true, an

sjoleee_

프로젝트에서 서버와의 통신 시간이 너무 길어서 그 동안 로딩중 컴포넌트를 보여주기로 했다. 일반적인 spinner를 사용하자니 아기자기한 맛이 부족한 듯 하여 괜찮은 애니메이션을 찾아서 넣어주기로 했다. LottieFiles에서 수많은 무료 로띠들을 사용할 수 있다. Lottie란? > 에어비앤비에서 개발한 JSON 기반의 애니메이션 라이브러리이다. 웹 및 모바일 환경에서 PNG나 GIF같은 비트맵 기반이 아닌, 벡터 기반으로 움직이는 애니메이션을 만들 수 있다. 웹에서 SVG로 출력된다. 출처: 킹무위키 Gif와

kkh3

Lottie는 에어비앤비에서 만든 라이브러리로 iOS, 안드로이드, 웹에서 vector 기반의 애니메이션을 만드는 것을 말한다. Lottie는 JSON 포맷으로 모션을 만들어서 벡터와 애니메이션을 만들고 올리는 것을 말한다. 요번에 적용할 귀여운 애니메이션을 아래와 같다. 그래서 매우 간단하게 적용해서 사용할 수 있는데 그러기 위해서는 이 라이브러리를 먼저 설치해야한다. SPM, cocoapods, 카르타스 등 여러 방법이 있지만 가장 쉽게 SPM으로 만들도록 하겠다. SPM에서 File - Add packages에 들어가서 이 링크를 넣으면 된다. https://github.com/airbnb/lottie-ios <i

leedool3003

보통 앱을 키면 로딩화면에서 이쁘고 멋진 애니메이션을 종종 볼 수 있다. 로띠 라이브러리는 종종 쓸거 같아서 한번 정리해보려 한다. Lottie 라이브러리 import 간단힌 Lottie 라이브러리에 대해 설명하자면 에어비앤비에서 제공하는데, 쉽게 애니메이션을 그려주는 라이브러리이다. 공식문서 를 통해 각자 원하는 방법으로 import 해주시면 됩니다. 개인적으로 SPM을 선호해서 저는 SPM으로 import 했습니다. Lottie 파일 다운로드 따로 디자이너가 있는 회사이거나 팀 프로젝트이면 디자이너분한테 파일을 받으면 되지만 혼자하는 프로젝트이면 [LottieFiles](https://lottiefil

lawn

안녕하세요 🌱 Lawn입니다 이번 프로젝트를 통해 공부한 iOS 개발자를 위한 Lottie 적용법을 작성해보겠습니다. ☘️ Lottie 공식문서 정리 >로티 문서 사이트 바로가기 -> Lottie.io Time Lottie에서 애니메이션을 재생하는 방법에는 여러 가지가 있습니다. Lottie는 시간을 세 가지 방식으로 애니메이션을 실행합니다. 프레임 시간 : (Seconds * Framerate) 예: 프레임 속도가 24일 때 0.5초는 FrameTime 12입니다. 진행 시간 : 0(애니메이션 타임라인의 시작)에서 1(애니메이션 타임라인의 끝)까지 진행 중인 시간을 설명합니다. 시간 : 시간을 초 단위로 설명합니다. 세 가지 모두 AnimationView에서 재생하고 시간을 설정하는 데 사용할 수 있습니다. Basic Playing 애니메이션을 현재