728x90 300x250 SMALL 프론트엔드26 Lottie 애니메이션 제어하기(재생/정지/속도 등) 기본 제어 함수const anim = lottie.loadAnimation({ container: document.getElementById('target'), renderer: 'svg', loop: false, autoplay: false, path: 'sample.json'}); 제어코드anim.play(); // 재생anim.pause(); // 일시정지anim.stop(); // 멈춤anim.setSpeed(2); // 2배속 재생anim.goToAndStop(50, true); // 특정 프레임으로 이동 이벤트 기반으로 연동하기재생일시정지 2025. 5. 6. Lottie란 무엇인가? 초보자도 이해하는 애니메이션 솔루션 Lottie란?Lottie는 Adobe After Effects에서 제작한 애니메이션을 JSON 파일 형태로 웹이나 앱에서 사용할 수 있게 해주는 오픈소스 라이브러리이다.디자이너가 만든 벡터 기반의 애니메이션을 개발자가 코드 한 줄로 쉽게 사용할 수 있어, 최근에는 웹사이트나 모바일 앱에서 로딩 애니메이션, 버튼 효과 등으로 많이 활용되고 있다. https://lottiefiles.com/kr/ 무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi로티파일즈/LottieFiles는 오픈소스 애니메이션 포맷 로티를 제공하는 세상에서 가장 큰 무료 플랫폼입니다. 웹, iOS, 안드로이드, 윈도우를 위한 모션 그래픽 작업을 지원하는 플러그인과 툴을 통lotti.. 2025. 5. 4. jQuery 유지보수를 위한 4단계 리팩토링 전략 jQuery로 작성된 코드가 어떻게 복잡해지고, 그걸 어떻게 구조화하면 좋을지 단계별로 정리해보자 1단계 : 무분별한 직접 호출 방식// index.js$('.tab').on('click', function() { $('.tab-content').hide(); $('.tab-content').eq($(this).index()).show();}); 같은 코드가 다른 곳에도 중복될 가능성 있음.tab이 존재하지 않아도 실행됨이벤트 중복 바인딩 위험2단계 : 네임스페이스 적용var MyApp = MyApp || {};MyApp.Tab = { bindEvents: function() { $('.tab').on('click', function() { $('.tab-content').hide().. 2025. 4. 30. $() 직접 호출 방식이 왜 문제인가? jQuery에서 $(...) 직접 호출이 가져오는 문제들 jQuery를 사용하다 보면 습관처럼 $()를 바로 호출해버리는 경우가 많다.하지만 이 방식이 코드 곳곳에 무분별하게 퍼지게 되면 다음과 같은 문제가 생긴다. 1. 불필요한 DOM 탐색 증가$('.box') 같은 선택자가 여러 번 등장하면 매번 DOM을 새로 탐색한다. 퍼포먼스 저하로 이어질 수 있다.2. 이벤트 중복 바인딩 위험같은 요소에 중복으로 .on()이 걸리는 경우가 자주 발생한다.$('.btn').on('click', function() { alert('clicked!');});예를들어 이렇게 하면 .btn을 클릭할 때마다 실행되는 코드를 지정한다. 그런데 같은 요소에 이 코드를 여러번 실행하면 클릭할 때마다 여러 번 실행된다.$('... 2025. 4. 23. 이전 1 2 3 4 ··· 7 다음 728x90 반응형 LIST