jQuery 애니메이션에 이징 효과 추가하기
웹 페이지에서 자연스럽고 매력적인 애니메이션을 구현하려면 이징(easing) 효과를 제대로 활용하는 것이 중요합니다. 이징은 애니메이션이 시작하고 끝나는 동안의 가속·감속 패턴을 의미하며, 이를 적용하면 단조로운 움직임도 한층 부드럽고 세련되게 표현할 수 있습니다.
이징 효과를 추가할 때는 애니메이션 속도를 적절히 조절하는 것이 핵심입니다. 무작정 속도를 높이기보다는, animate() 메서드를 사용할 때 애니메이션이 어느 시점에서 멈춰야 할지 미리 설계해 두어야 웹 페이지에 꼭 맞는 완성도 높은 애니메이션을 만들 수 있습니다.
참고로 jQuery는 기본적으로 swing과 linear, 두 가지 이징 함수를 제공하며 기본값은 swing입니다. 보다 다양한 이징 효과가 필요하다면 jQuery UI의 이징 확장 플러그인을 추가로 활용하는 것도 좋은 방법입니다.
예제 개요
여기서는 클릭하면 답변을 입력할 수 있는 textarea(텍스트 영역)로 연결되는 버튼을 예제로 사용합니다.
<button class="btn" id="answer"> Add answer </button>
fadeOut 속성으로 이징 효과 설정
이제 fadeOut() 속성을 적절히 설정하여 이징 효과를 적용합니다. 아래 예제에서는 버튼이 빠른 속도(fast)로 페이드아웃된 뒤, 숨겨져 있던 컨테이너가 나타나면서 높이와 투명도가 부드럽게 애니메이션 처리됩니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body').on('click', '#answer', function() {
var container = $('.new-answer');
container.css('opacity', '0');
$(this).fadeOut('fast', function() {
$(this).hide();
container.show();
container.animate({ height: "200px",
opacity: 1}).animate({
height: "170px" });
});
});
});
</script>
<style>
.btn {
width: 150px;
height: 40px;
color:#666666;
text-decoration: none;
}
.new-answer {
background: none repeat scroll 0 0 #00FFFF;
border: 2px solid #94ACBE;
border-radius: 5px 5px 5px 5px;
margin-bottom: 40px;
}
.new-answer .middle, .top {
padding: 0 10px;
}
.new-answer textarea {
color: #000080;
font: 12px;
height: 120px;
padding: 2px;
width: 100%;
}
</style>
</head>
<body>
<button class="btn" id="answer">Add answer</button>
<div class="new-answer" hidden="true">
<div class="top">
<span>Add a new answer below</span>
</div>
<div class="middle">
<textarea id="question-content"></textarea>
</div>
</div>
</body>
</html>
위 코드를 실행하면 'Add answer' 버튼을 클릭하는 순간 버튼이 서서히 사라지고, 그 자리에서 하늘색 배경의 답변 입력 영역이 부드럽게 펼쳐집니다. 컨테이너의 높이를 200px까지 늘렸다가 170px로 되돌리는 연속 애니메이션 덕분에 마치 스프링처럼 탄력 있는 자연스러운 이징 효과가 완성됩니다.