airbnb 에서 만든 라이브러리로 after effects로 추출한 애니메이션 데이터 (json)을 오픈소스를 이용하여 적용할 수 있다
- 장점
- 벡터 기반이라 용량이 적고 해상도 저하가 없다 (리소스 절감)
- 사용자의 인터렉션에 따라 제어가 가능하다 (ex. play, stop)
- 단점
- after effects 외 에 쓸만한 작업 X
- 제작 과정이 복잡하여 숙련도가 필요하다
💡 cdn url
https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.jsExample
<<div id="report1"></div>
<div id="report2"></div>
<button id="stop">STOP</button>
<button id="play">PLAY</button>
<script type="text/javascript" src="../../resource/js/lottie.min.js"></script>
<script type="text/javascript">
let animation1 = bodymovin.loadAnimation({ // 사용자 액션에 따라 컨트롤 하고 싶을 때
container: document.getElementById("report1"), // required
renderer: "svg", // required
loop: true, // optional
autoplay: true, // optional
path: "../../resource/lottie/motion01.json" // required
});
bodymovin.loadAnimation({ // 자동 재생됨
container: document.getElementById("report2"),
renderer: "svg",
loop: true,
autoplay: true,
path: "../../resource/lottie/motion02.json"
});
document.getElementById("stop").addEventListener("click", () => {
animation1.stop();
});
document.getElementById("play").addEventListener("click", () => {
animation1.play();
});
</script>ref
Frontend Developer