lottie영상 두개를 번갈아서 나오게 하는 방법이 있을까요? 채택완료
아무것도모르는퍼블리셔
2년 전
조회 4,342
</p>
<p><div id="banner"></p>
<p> <video id="banner-video" muted autoplay loop playsinline></p>
<p> <source src="./video/영상.mp4"></p>
<p> </video></p>
<p> <div id="banner-lottie"></div></p>
<p> <div id="banner-lottie2"></div></p>
<p></div></p>
<p>
안녕하세요 !
제가 위 코드에서 bodymovin을 사용해서 처음에 #banner-lottie의 lottie영상이 나왔다가 자연스럽게 사라진 다음에 #banner-lottie2의 lottie영상이 또 자연스럽게 나오게 하는 방법이 있을까요?ㅜㅜ 그리고 그걸 계속 반복하게끔 하고싶습니다 !!
꼭 bodymovin이 아니더라도 괜찮습니다 ! 할 수 있는 방법이 있다면 알려주시면 너무 감사하겠습니다..
감사합니다 좋은 하루되세요 !
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
</p>
<p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script></a></p>
<p><div id="banner-lottie" style='position:absolute; left:0; top:0; width:200px;'></div>
<div id="banner-lottie2" style="position:absolute; left:0; top:0; width:200px;opacity: 0; "></div></p>
<p><script></p>
<p>// JavaScript 코드
// lottie 라이브러리 가져오기
const lottie1 = lottie.loadAnimation({
container: document.getElementById('banner-lottie'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '<a href="https://assets9.lottiefiles.com/packages/lf20_PBgNop.json'," target="_blank" rel="noopener noreferrer">https://assets9.lottiefiles.com/packages/lf20_PBgNop.json',</a>
});</p>
<p>const lottie2 = lottie.loadAnimation({
container: document.getElementById('banner-lottie2'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '<a href="https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json'," target="_blank" rel="noopener noreferrer">https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json',</a>
});</p>
<p>// 첫 번째 lottie 애니메이션 실행
lottie1.play();</p>
<p>setInterval(() => {
// 첫 번째 lottie 애니메이션 종료
lottie1.stop();</p>
<p> // 첫 번째 lottie 숨기고 두 번째 lottie 노출
document.getElementById('banner-lottie').style.opacity = 0;
document.getElementById('banner-lottie2').style.opacity = 1;
// 두 번째 lottie 애니메이션 실행
lottie2.play();</p>
<p> // 두 번째 lottie 애니메이션 종료
lottie2.addEventListener('complete', () => {
// 두 번째 lottie 숨기고 첫 번째 lottie 노출
document.getElementById('banner-lottie2').style.opacity = 0;
document.getElementById('banner-lottie').style.opacity = 1;
// 두 번째 lottie 애니메이션 종료
lottie2.stop();
// 첫 번째 lottie 애니메이션 실행
lottie1.play();
});</p>
<p>}, 5000);
</script>
</body>
</html></p>
<p>
부드럽게 움직이지는 않지만... 뭐 전환정도는.....되니... 다음분게 패스~ ㅋㅋ
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인