jQuery Academy · 강의

사용자 정의 이징 및 애니메이션 콜백

사용자 정의 이징 함수를 구현해 애니메이션의 속도와 흐름을 제어하고, 애니메이션이 완료되거나 단계가 진행되는 정확한 시점에 코드를 실행하도록 콜백을 활용합니다.

사용자 정의 이징 및 애니메이션 콜백은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

기본 애니메이션 속도 넘어서기

애니메이션은 요소를 움직이는 것만이 아니라, 요소가 어떻게 움직이는지도 중요합니다. 이징은 애니메이션의 가속과 감속을 제어하여 움직임을 더 자연스럽거나 극적으로 보이게 합니다.

jQuery는 두 가지 기본 이징 옵션을 제공합니다. 'linear'는 일정한 속도이고, 'swing'은 시작할 때 느리고 중간에 빠르며 끝에서 다시 느려집니다. 하지만 더 다양한 효과가 필요하다면 어떻게 해야 할까요?

기본 이징 살펴보기

jQuery의 기본 이징 옵션 간 차이를 살펴보겠습니다.

'linear': 애니메이션이 시작부터 끝까지 일정한 속도로 움직입니다.
'swing': 기본값입니다. 느리게 시작하고 중간에 속도가 빨라진 다음 끝에서 다시 느려집니다.

둘 다 간단하지만, 애니메이션의 느낌을 더 세밀하게 제어하고 싶은 경우가 많습니다.

jQuery UI로 사용자 지정 이징 사용하기

더 정교한 이징 효과를 얻기 위해 플러그인을 사용하는 경우가 많습니다. 널리 사용되는 선택지로 jQuery UI Easing 구성 요소가 있습니다.

이 구성 요소는 $.easing 객체를 'easeOutBounce', 'easeInOutQuad'와 같은 새로운 함수로 확장합니다. 따라서 미리 정의된 다양한 움직임 곡선을 사용할 수 있습니다.

이를 사용하려면 일반적으로 프로젝트에 jQuery UI 라이브러리를 포함해야 합니다.

코드 데모: EaseOutBounce로 바운스 효과 만들기

jQuery UI의 사용자 지정 이징 함수로 애니메이션을 만들어 보겠습니다. 상자가 갑자기 멈추는 대신 끝에서 튕기는 모습을 확인해 보세요. 이 효과는 'easeOutBounce'를 사용해 구현합니다.

(참고: 이 예제에서는 jQuery UI의 핵심 기능과 효과가 포함되어 있다고 가정합니다.)

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

애니메이션 콜백 이해하기

애니메이션은 비동기 방식으로 실행되므로 애니메이션이 진행되는 동안에도 코드가 계속 실행됩니다. 그렇다면 애니메이션이 끝난 후에 무언가를 실행하려면 어떻게 해야 할까요?

jQuery의 .animate() 메서드는 콜백 함수를 인수로 받습니다. 가장 일반적으로 사용하는 콜백은 complete입니다.

complete 콜백은 선택한 요소의 애니메이션이 완전히 끝났을 때 한 번 실행됩니다.
동작을 연결하거나 "완료" 메시지를 표시할 때 유용합니다.

코드 데모: `complete` 콜백

이 예제에서는 상자에 애니메이션을 적용한 다음, 애니메이션이 100% 끝난 후에만 배경색을 변경하고 메시지를 표시합니다.

이렇게 하면 이후 동작의 시각적 일관성과 적절한 실행 시점을 보장할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

`step` 콜백

때로는 애니메이션이 끝날 때가 아니라 애니메이션이 진행되는 동안 동작을 실행해야 합니다. 이때 step 콜백을 사용합니다.

step 콜백은 애니메이션의 각 단계에서 애니메이션이 적용되는 각 속성마다 실행됩니다. 애니메이션이 실행되는 동안 계속 호출됩니다.

이 콜백은 now(속성의 현재 값), fx(애니메이션 세부 정보가 포함된 객체), tween(더 고급 제어에 사용)과 같은 인수를 받습니다.

코드 데모: `step` 콜백

step 콜백을 사용하여 애니메이션이 적용된 상자가 움직일 때 현재 위치를 표시해 보겠습니다.

이를 통해 실시간 업데이트를 받고 애니메이션의 진행 상황에 반응하는 방법을 확인할 수 있습니다. 여기서는 특히 now 인수를 사용합니다.

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

여러 콜백 사용하기

하나의 애니메이션에서 step 콜백과 complete 콜백을 모두 사용할 수 있습니다.

animate() 메서드는 두 번째 인수로 옵션 객체를 받으며, 이 객체에서 duration, easing 및 콜백 함수를 모두 정의할 수 있습니다.

이를 통해 애니메이션 진행 중에는 진행 상황을 추적하고, 애니메이션이 끝난 후에는 마지막 동작을 실행하는 등 정밀하게 제어할 수 있습니다.

콜백 확인

애니메이션이 실행되는 동안 진행률 표시줄을 계속 업데이트하려면 어떤 jQuery animate() 콜백이 가장 적합할까요?

이징 및 콜백 요약

잘하셨습니다! jQuery 애니메이션을 향상하는 방법을 배웠습니다.

사용자 지정 이징: jQuery UI와 같은 플러그인을 사용하여 'linear'나 'swing'보다 더 동적인 속도 곡선을 적용할 수 있습니다.
complete 콜백: 애니메이션이 끝나는 정확한 시점에 코드를 실행할 수 있습니다.
step 콜백: 애니메이션이 진행되는 동안 실시간 업데이트를 받고 동작을 반복해서 실행할 수 있습니다.

이러한 도구를 사용하면 웹 요소의 시각적 흐름과 상호 작용 타이밍을 훨씬 세밀하게 제어할 수 있습니다.

자주 묻는 질문

“사용자 정의 이징 및 애니메이션 콜백” 강의는 무료인가요?

네 — “사용자 정의 이징 및 애니메이션 콜백” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“사용자 정의 이징 및 애니메이션 콜백”에서 뭘 배우나요?

사용자 정의 이징 함수를 구현해 애니메이션의 속도와 흐름을 제어하고, 애니메이션이 완료되거나 단계가 진행되는 정확한 시점에 코드를 실행하도록 콜백을 활용합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“사용자 정의 이징 및 애니메이션 콜백” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기