▶ animate 모션 만들기
💻 예제 설명
예제는 버튼을 클릭하면 div 요소가(네모 박스) 위아래로 한 바퀴 돌아가는 간단한 모션을 만들어볼 건데,
이 전 포스팅에서 설명한 callback 함수를 사용법을 이용하여 구현을 해보고,
이 callback 함수를 많이 사용하면 별로 좋지 못한데, 이런 말쯤은 한 번은 들어봤을 것이다.
'콜백 지옥' 이 단어가 왜? 지옥인지 animate 모션 구현 테스트하면서도 이유를 알아볼 것이며,
이 callback 함수를 사용하지 않고 jQuery에서는 queue라는 메서드를 지원하는데
callback 메서드 대안으로 이 메서드를 이용하여 구현해 볼 예정이다.
우선 animate 메서드의 callback 사용법을 알고 싶다면 이전 포스팅 글 참조
animate 메서드의 callback 사용법 링크 페이지 ☜
예제는 아래 이미지에 설명 참조
위 이미지처럼 예제를 구현할 예정인데 위에서 말한 대로
- callback 함수를 이용하여 구현
- queue 메서드를 이용하여 구현
- queue 메서드로 응용하여 무한 반복 모션 구현
이렇게 해볼 예정이다.
🖥 소스 예제
1) callback 함수를 이용하여 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#content{
width: 50px;
padding: 50px;
text-align: center;
color: #fff;
background-color: green;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $con = $('#content');
var bool = false; // 실행 버튼을 여러번 클릭 되는걸 방지하기 위해 사용함.
$('#activeBtn').on('click', function(e){ // 클릭 이벤트 (실행버튼)
if(!bool){
animateAct();
bool = true;
}
});
function animateAct(){ // 네모요소가 한바퀴 도는 기능을 담은 함수
// 콜백 메서드를 이용하여 모션을 구현한 부분 이 부분이 '콜백지옥'
$con.animate({'left':'+=300px'}, 1000, function(){
$(this).animate({'top':'+=250px'}, 1000, function(){
$(this).animate({'left':'-=300px'}, 1000, function(){
$(this).animate({'top':'-=250px'}, 1000, function(){
bool = false;
});
});
});
});
}
});
</script>
</head>
<body>
<button id="activeBtn">실행</button>
<hr>
<div id="content">콘텐츠</div>
</body>
</html>
2) queue 메서드를 사용하여 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#content{
width: 50px;
padding: 50px;
text-align: center;
color: #fff;
background-color: green;
position: relative;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $con = $('#content');
$('#activeBtn').on('click', function(e){ // 클릭 이벤트 (실행버튼)
animateAct();
});
function animateAct(){
$con.queue('quChain', function(next){
$con.animate({'left':'+=250px'}, 1000);
next();
}).queue('quChain', function(next){
$con.animate({'top':'+=250px'}, 1000);
next();
}).queue('quChain', function(next){
$con.animate({'left':'-=250px'}, 1000);
next();
}).queue('quChain', function(next){
$con.animate({'top':'-=250px'}, 1000);
});
$con.dequeue('quChain');
}
});
</script>
</head>
<body>
<button id="activeBtn">실행</button>
<hr>
<div id="content">콘텐츠</div>
</body>
</html>
3) queue 메서드 사용 응용 (무한 반복)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#content{
width: 50px;
padding: 50px;
text-align: center;
color: #fff;
background-color: green;
position: relative;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $con = $('#content');
var bool = false; // 실행 버튼을 여러번 클릭 되는걸 방지하기 위해 사용함.
$('#activeBtn').on('click', function(e){ // 클릭 이벤트 (실행버튼)
bool = false;
$(this).attr('disabled', true);
aniQue();
});
$('#stopBtn').on('click', function(){
bool = true;
$con.clearQueue();
$con.stop().css({'left':'0px', 'top':'0px'});
$('#activeBtn').attr('disabled', false);
});
function aniQue(){
$con.queue('quChain', function(next){
$con.animate({'left':'250px'}, 1000);
next();
}).queue('quChain', function(next){
$con.animate({'top':'250px'}, 1000);
next();
}).queue('quChain', function(next){
$con.animate({'left':'0px'}, 1000);
next();
}).queue('quChain', function(next){
$con.animate({'top':'0px'}, 1000, function(){
if(!bool) aniQue();
});
});
$con.dequeue('quChain');
}
});
</script>
</head>
<body>
<button id="activeBtn">실행</button>
<button id="stopBtn">멈춤</button>
<hr>
<div id="content">콘텐츠</div>
</body>
</html>
💻 예제 구동 설명
1) 예제☜
실행 버튼을 누르면 위 이미지에 보이는 것처럼 빨간색 박스 안에 숫자 순서대로 이동을 한다.
① 번의 animte를 보면 left 지점으로부터 오른쪽으로 300px 만큼 이동한다
1초의 동안에 오른쪽 이동의 행위가 끝나면 그리고 callback 함수를 호출한다.
callback 함수를 보면
② 번의 해당하는 animate가 있다 이건 top 지점으로부터 아래쪽으로 250px 만큼 이동한다. (부호에 주의 +=)
1초 동안에 이 아래쪽으로 이동의 행위가 끝나면 callback 함수를 호출한다.
callback 함수를 보면
③ 번의 해당하는 animate가 있다 이 부분은 left 지점으로부터 현재 위치가 300px 만큼 떨어져 있으니
0px 될 때까지 계속해서 왼쪽으로 이동한다 (부호에 주의 -=)
callback 함수를 보면
④ 번의 해당하는 animate가 있다 이 부분은 처음 자리로 돌아가는 top 지점으로부터 현재 250px 떨어져 있으니
0px 될 때까지 계속해서 위쪽으로 이동한다. (부호에 주의 -=)
자 이렇게 각각의 animate 메서드의 callback 함수를 여러 번 중첩시켜서
하나의 animate메서드 행위가 끝나면 다시 두 번째 animate 행위가 시작되고
두 번째 animate 메서드 행위가 끝나면 세 번째 animate 메서드 행위가 시작되고
세 번째 animate 메서드가 행위가 끝나면 네 번째 animate 메서드 행위가 시작되어서
최초 원래 자리에 있던 요소(div) 자리로 돌아간다.
이처럼 각 animate 메서드에서 제공하는 callback 함수로 여러 번을 사용하여 모션을 만들어봤는데
어떤가? 지금 이 예제는 그냥 단순하기 때문에 느낄지는 모르겠지만
소스가 어떤가? 만약 저게 다른 각도 다른 모양 다른 행위의 animate를
여러 번 더 중첩해서 모션을 만들어야 한다고 가정하면?
소스가 진짜 말 그대로 어지러울 것이다.
저렇게 4번 정도 작성했을 뿐인데.. 저걸 10번이고, 20번이고 중첩한다고 가정하면? 눈이 돌아간다...
그리고 가독성도 매우 나쁘고, 이로 인해서 실수도 분명 생긴다.
callback 함수를 계속해서 callback으로 받고 계속해서 무언가를 callback으로 시작해 callback으로 끝나는
이러한 콜백 반복을 경험하게 되면 나중에 소스 수정하는 것도 힘들다.
이렇게 1번 예제에서는 callback으로 모션을 만들 수는 있지만 추천하지는 않는다.
callback 함수는 단순한 animate 행위의 한 번 실행 후 callback 함수 한 번 호출로 사용하는 게 좋다.
2) 예제 ☜
1번 예제와 같으나 소스가 다르다
1번 callback 함수를 사용하는 것과 비교를 먼저 해보자.
어떤가? 좀 더 가독성이 1번 예제보다 낫지 않은가?
queue 메서드를 이용하면
이렇게 queue 부분만 만들어서 계속 끝나는 시점에다가 붙이기만 하면 된다.
이해도 쉽고, 사용법도 어지럽지도 않고, 꼭 javascript의 프로미스와 닮지 않았는가?
이 queue 메서드는 실행할 행위들을 큐에다가 연속적으로 담아 한 번의 실행으로 queue에 있는
내용을 전부 실행을 한다.
이 queue 메서드가 어떻게 어떤 방식으로 실행이 되는지 확인해보자.
첫 번째 $con이라는 제이쿼리 객체의 요소에다가 queue 메서드를 등록해서 사용할 건데
위 예제 소스에서 $con.queue('❤❤❤', function(next){ 행위를 할 소스 이 예제에선 animate를 실행함 next();});
❤❤❤ : 여기에 들어가져 있는 부분이 현재 'quChain'이라는 문자열 값이 들어가져 있는데,
이건 그냥 개발자가 아무렇게나 정의해서 집어넣으면 된다.
여기에 들어가는 문자열 값으로 이 queue를 실행하려고 개발자 임의대로 넣는 것이다.
그래서 나는 큐 체인이라는 짧고 'quChain'이라는 문자열을 그냥 넣은 것이다.
왜 quChain 일까?라는 생각을 가지는 사람들이 있는데 의미 없다. 단지 이걸 정하는 이유는
queue라는 메서드를 실행시키려고 하는 하나의 id 값이라고 생각하고 가볍게 넘어가면 된다.
저 queue를 실행하기 위해
맨 마지막 줄 $con.dequeue('quChain'); 실행하는 부분 보이는가?
$con에 등록된 queue를 실행시키기 위해
$con.dequeue(); 이걸로 실행을 하는데'quChain'이라는 이름으로 정의된 queue를 실행하라!
라는 의미로 받아들이면 이해하기 쉽다.
그래서 실행 순서는 ①→②→③→④ 이렇게 내림 순서대로 queue를 실행을 한다.
①번 큐를 보면 animate 행위를 하는데 left 지점으로부터 250px 떨어진 곳까지 오른쪽으로 이동하고
②번 큐를 보면 animate 행위를 하는데 top 지점으로부터 250px 떨어진 곳까지 아래쪽으로 이동하고
③번 큐를 보면 animate 행위를 하는데 현재 요소 지점으로부터 left 0px 될 때까지 지점으로 왼쪽으로 이동하고
④번 큐를 보면 animate 행위를 하는데 현재 요소 지점으로부터 top 0px 될 때까지 지점으로 위쪽으로 이동한다.
이렇게 queue 메서드를 이용하면 여러 번의 행위들을 큐에다가 담아 한번에 실행해서
animate 메서드와 같이 사용을 하면 요소를 연속적으로 변화를 주는 효과를 쉽게 구현할 수 있다.
여기서 중요한 부분은 각 queue 메서드마다 매개변수로 next 이녀석을 받는데 이녀석은 바로 function 함수이다.
즉, 다음 queue 로 넘어가기 위해 이 매개변수를 받아서 (); 이렇게 함수 실행하는 명령어 가로 열고 닫고를
붙여서 next(); 이렇게 실행하면 다음 queue 메서드를 실행하라! 라는 의미이다.
이 next() 메서드를 실행을 안하면 다음 queue 메서드를 실행을 안하니 주의해야 한다.
3) 예제 ☜
이 queue 메서드를 이용하여 animate 메서드와 함께 사용해서,
조금만 응용하면 위 예제처럼 무한 반복하는 행위를 만들 수 있다.
queue에 대한 설명은 예제 2번에서 했으므로 간단하게만 하고 넘어가겠다.
실행 버튼을 클릭하면 콘텐츠가 빨간 네모 박스 그려져 있는 순서대로 계속해서 무한 반복을 한다.
그리고 무한 반복하는 도중, 멈춤 버튼을 클릭하면 콘텐츠 네모 박스(div) 요소는 원래 처음 자리로
돌아가고 반복되는 행위를 멈추게 된다.
다시 또 실행 버튼을 클릭하면 다시 또 무한으로 돌고...
이런 무한 반복하는 기능을 구현할 수가 있다.
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - animate(애니메이트) 메서드 사용법, 실행 후 다른 코드 실행(callback) (0) | 2022.05.18 |
|---|---|
| jQuery - effect(효과) 속성(옵션- option) 제어하기 [show / hide / fadeIn / fadeOut / slideUp / slideDown] (0) | 2022.05.17 |
| jQuery - slideToggle(슬라이드토글) 메서드, 실행 후 다른 코드 실행(callback) (0) | 2022.05.16 |
| jQuery - slideUp(슬라이드업) 메서드, 실행 후 다른 코드 실행(callback) (0) | 2022.05.16 |
| jQuery - slideDown(슬라이드다운) 메서드, 실행 후 다른 코드 실행(callback) (0) | 2022.05.16 |