-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
javascript로 변환
20.09.25 19:40 작성 조회수 100
0
안녕하세요. 좋은 강의 열심히 듣고 있습니다.
퀄리티 있는 강의 올려주신 덕분에 jquery도 처음 접하고, vanila javascript 공부할 겸 바꾸는 연습도 하고 있습니다.
그러다가 section5 > step2에서 막히는 부분이 있는데 혹시 괜찮으시면
이 부분을 바꾸려면 어떻게 바꿔야 할지 알려주실 수 있으실까요?ㅠㅠ
아니면 javascript에서 어떤 함수를 찾아보면 좋을지 힌트 부탁드립니다.
답변을 작성해보세요.
0
0
0
깡코딩
지식공유자2020.09.25
안녕하세요 :)
animate에 대해 문의주셨네요
자바스크립트로 애니메이션을 만드는 방법은 다양합니다.
첫번째는 setInterval 함수를 활용해 만드는 방법이구요 아래 주소를 참고해보세요 ^.^
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
두번째는 requestAnimationFrame을 활용해 만드는 방법입니다. 아래 주소를 참고해 보세요~^.^
https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame
세번째는 여러가지 반복문을 통해 만들수 있겠네요~!
마지막으로 첫번째 함수와 두번째 함수는 차이가 있다면 프레임 손실률이 다르고 브라우저 지원 현황이 다릅니다.
interval같은 경우에는 대부분의 브라우저에 대응가능하구요
requestAnimationFrame같은 경우에는 일부 ie(인터넷익스플로러)브라우저에서 지원하지 않습니다.
첨부한 url을 참고해 보시면 브라우저 지원 현황까지 상세히 나와 있으니 참고해서 공부해 보시길 바랍니다:)
_________
한가지 더 알려드리겠습니다!
제이쿼리 애니메이트가 어떻게 동작 하는지 곰곰히 생각해보세요!
먼저 이전 애니메이션을 멈추기 위해 제이쿼리 stop을 호출합니다. 그 다음 animate로 애니메이션이 실행되죠? 그다음 애니메이션 종료된후 콜백함수를 실행합니다
제이쿼리를 사용하지 않으려면 위 세가지 기능을 구현해야 합니다.
1. 스탑기능 : 애니메이션이 실행 되기 전에 이전 애니메이션을 정지 시킬 수 있는 기능을 구현. 즉 인터바나 리퀘스트애니메이션프레임을 사용해 요소가 움직일때 어떤 이벤트가 발생하면 정지 할 수 있는 기능을 구현해야 되겠죠?
2.애니메이션기능 : 위에서 말한 3가지 방법을 통해 반복문으로 구현.
3.콜백함수구현 : 반복문을 돌며 모든 동작을 처리하고 나면 실행되는 함수 구현
위 세가지 기능을 처리할수 있는 함수를 만든다면 제이쿼리 라이브러리에서 지원하는 애니메이션이 아닌
직접 구현한 함수를 통해서 애니메이션을 처리 할 수 있게 됩니다
결과적으론 tlsdo0612님이 만든 애니메이션 함수역시 제이쿼리 라이브러리와 같은 개념이 될 수 있겠지만 돔 접근 방법과 사용법 등에 차이가 있게되겠네요!
그럼 또다른 궁금증이 생길때 언제든 문의주세요 :D
답변 3