Chapter 09. 애니메이션 효과 다루기. Lesson 01. jQuery 애니메이션 효과 소개. Lesson 02. 기본 애니메이션 효과 다루기

Chapter 09. 애니메이션 효과 다루기. 

Lesson 01. jQuery 애니메이션 효과 소개

02. jQuery 애니메이션 효과 종류

Lesson 02. 기본 애니메이션 효과 다루기

02. 핵심 내용

핵심 01: 나타나고 사라지는 효과

핵심 02: 이징 함수 소개와 활용법

핵심 03: 페이드 인/아웃 효과

핵심 04: 슬라이드 업/다운 효과

핵심 05: options 활용하기

핵심 01: 나타나고 사라지는 효과

사용법 :

$대상.show()

$대상.show([duration][complete])

$대상.show(duration[easing][complete])

$대상.show([options])

$대상.hide()

$대상.hide([duration][complete])

$대상.hide(duration[easing][complete])

$대상.hide([options])

duration  

효과가 지속될 시간 값

단위는 밀리초이며 기본값은 400ms입니다. 문자열(slow, normal, fast)도 사용합니다

easing

사용할 이징(easing) 함수 이름입니다. 이징 함수는 움직임을 구현한 함수입니다

complete

효과가 완료됐을 때 호출할 콜백 함수입니다.

options

duration, easing, complete 매개변수를 하나의 객체로 묶어 간결하게 매개변수를 전달할 수 있습니다

또할 기본적인 매개변수 값 이외에 좀더 다양한 값을 설정할 때 사용합니다

hide() 메서드는 width, height, opacity 값을 이용해 요소의 크기를 부드럽게, 작게 만듬과 동시에 투명하게 만들어 화면에서 보이지 않게 만드는 기능.

애니메이션이 끝난 후 display 속성값을 none을 만들어 주면 화면에서 보이지 않을 뿐 대상 요소가 삭제되거나 하진 않는다

show() 메서드는 hide() 메서드의 반대로 숨겨져 있던 대상 요소의 크기와 투명도 값을 부드럽게 원래대로 만들어준다.

애니메이션이 끝난 후 display 속성값 역시 원래 값으로 복원시켜줌.

예제 01. 다음 실행화면처럼 show() 메서드와 hide() 메서드를 이용해 나타나도 사라지는 효과를 만들어 주세요.

단, 애니메이션 시간은 6초로 하고 애니메이션이 끝나면 각각 "show 완료"와 "hide 완료" 메세지를 출력해 주세요

<script>
$(document).ready(function() 
{
    //  움직일 대상 찾기.
    var $img1 = $("#target");
 
    // 나타나는 효과 시작.
    $("#show").on("click", function() 
    {
        $img1.show(6000, function() 
        {
            alert("show 완료");
        });
    });
 
    // 사라지는 효과 시작.
    $("#hide").on("click", function() 
    {
        $img1.hide(6000, function() 
        {
            alert("hide 완료");
        });
    });
});
</script>

핵심 02. 이징 함수 소개와 활용법

1. 이진 함수란?

2. 이징 라이브러리 사용하기

단계 01: 이징 라이브러리 연결

단계 02: 애니메이션 효과에 이징 함수 연결

예제 02. 다음 실행화면처럼 show() 메서드와 hide() 메서드를 이용해 나타나고 사라지는 효과를 만들어 주세요.

단, 애니메이션 시간은 6초로 하고 나타날 때는 "easeIntElastic" 이징 효과를,

사라질때는 "easeOutElastic" 이징 효과를 적용해 주세요

// 이징 라이브 연결

<script type="text/javascript"  src="../../libs/jquery.easing.1.3.js"></script>
 

<script>
$(document).ready(function() 
{
    //  움직일 대상 찾기.
    var $img1 = $("#target");
 
    // 나타나는 효과 시작.
    $("#show").on("click", function() 
    {
        $img1.show(6000, "easeInElastic");
    });
 
        // 사라지는 효과 시작.
        $("#hide").on("click", function() 
        {
            $img1.hide(6000, "easeOutElastic");
        });
});
</script>

핵심 03. 페이드 인/아웃 효과

사용법 :

$대상.fadeIn()

$대상.fadeIn([duration] [complete])

$대상.fadeIn([duration] [easing] [complete])

$대상.fadeIn(options)

$대상.fadeOut()

$대상.fadeOut([duration] [complete])

$대상.fadeOut([duration] [easing] [complete])

$대상.fadeOut(options)

* show()/hide()와 다른점이라면, fadeIn/fadeOut효과는 투명(opacity) 속성값만 사용할 뿐 크기가 변경되진 않습니다.

예제 03. 다음 실행화면처럼 fadeIn() 메서드와 fadeOut() 메서드를 이용해 나타나고 사라지는 효과를 만들어주세요.

단, 애니메이션 시간은 6초로 하고 나타날 때는 "easeInQuint" 이징 효과를,

사라질 때는 "easeOutQuint" 이징 효과를 적용해 주세요.

또한 애니메이션이 끝난 후 각각 "fadeIn 완료"와 "fadeOut 완료" 메세지를 출력해 주세요

// 이징 라이브러리 연결

   <script type="text/javascript"  src="../../libs/jquery.easing.1.3.js"></script>

<script>
$(document).ready(function() 
{
    //  움직일 대상 찾기.
    var $img1 = $("#target");
 
    // 나타나는 효과
    $("#show").on("click", function() 
    {
        $img1.fadeIn(6000, "easeInQuint", function() 
        {
            alert("fadeIn 완료");
        });
    });
 
    // 사라지는 효과 시작.
    $("#hide").on("click", function() 
    {
        $img1.fadeOut(6000, "easeOutQuint", function() 
        {
            alert("fadeOut 완료");
        });
    });
 
});
</script>

핵심 04. 슬라이드 업/다운 효과

사용법 : 

$대상.slideUp()

$대상.slideUp([duration] [complete])

$대상.slideUp([duration] [easing] [complete])

$대상.slideUp(options)

$대상.slideDown()

$대상.slideDown([duration] [complete])

$대상.slideDown([duration] [easing] [complete])

$대상.slideDown(options)

$대상.slideDown(options)

예제 04. 다음 실행화면 처럼 slideDown() 메서드와 slideUp() 메서드를 이용해 나타나고 사라지는 효과를 만들어 주세요.

단, 애니메이션 시간은 6초로 하고 나타 때는 "easeInBounce" 이징 효과를

사라질 때는 "easeOutBounce" 이징 효과를 적용해 주세요.

<script>
$(document).ready(function() 
{
    //  움직일 대상 찾기.
    var $img1 = $("#target");
 
    // 나타나는 효과
    $("#show").on("click", function() 
    {
        $img1.slideDown(6000, "easeInBounce");
    });
 
    // 사라지는 효과 시작.
    $("#hide").on("click", function() 
    {
        $img1.slideUp(6000, "easeOutBounce");
    });
});
</script>

예제 05. options 활용하기

사용법 : $대상.기본효과메서드(options)

* options을 사용하면 기본 효과 메서드 호출 시 매개변수 값을 순서와 상관없이 

리터럴 객체를 이용해 여러 개의 매개변수 값을 하나의 매개변수로 묶어 호출할 수 있습니다

$target.show(6000, "easeOutBounce", function()
{
    alert("완료");
});

$target.show({
    easing : "easeOutBounce", 
    duration : 6000,
    complete: function()
    {
        alert("완료");
    }
});

duration 

형태: Number,String

초기값: 400

애니메이션 시간을 지정합니다.

easing

형태 : String

초기값: swing

사용할 이징 함수 이름을 지정합니다.

step

형태 : function(Number now, Tween tween)

애니메이션의 프레임이 진행될 때 호출되는 함수입니다.

현재 애니메이션 프레임에 적용된 스타일 속성값을 알아낼 때 주로 사용합니다.

complete

형태 : Function()

애니메이션 완료 후 실행할 함수입니다.

start

형태 : Function(Promise animation)

애니메이션이 시작할 때 호출되는 함수입니다.

시작 전 애니메이션에 필요한 초깃값을 설정할 때 주로 사용합니다. 또한 조건에 따라 애니메이션을 멈출 수도 있습니다.

progress

형태 : Function(Promise animation, progress, remainning, remainingMs)

step 옵션과 동일하게 애니메이션의 프레임이 진행될 때 호출되는 함수입니다.

progress 옵션은 애니메이션 진행률 및 남은 애니메이션 시간을 알 수 있습니다.

done

형태 : Function(Promis animation, Boolean jumpedToEnd)

complete 옵션과 동일하게 애니메이션 완료 후 호출되는 함수입니다.

예제 05. hide 버튼 클릭 시 hide() 메세드를 이용해 타깃을 사라지게 만들어 주세요.

단, 애니메이션 시간은 6초로 하고, "easeOutCubic" 이징 효과를 적용해 주세요.

또한, 진행률과 남은 시간 그리고 진행률에 따른 투명 값을 다음 실행화면처럼 #info에 출력해 주세요

 

<script>
$(document).ready(function() 
{
    //  움직일 대상 찾기.
    var $img1 = $("#target");
    var $info = $("#info");
    // 사라지는 효과
    $("#hide").on("click", function()
    {
        $img1.hide( // 진행시간(duration), 이징함수(easing) 그리고 애니메이션 진행정보를 알 수 있는 progress 옵션을 
                    // 리터럴 객체로 묶은 옵션 정보를 값으로 hide() 메서드를 호출해 줍니다
        {
            duration:6000,
            easing:"easeInBounce",
            progress:function(animation, progress, remainingMs)
            {
                    var percent = parseInt(progress*100); // 진행률을 퍼센트 단위로 계산
                    var reMs = (remainingMs/1000).toFixed(2); // 남은 시간을 형변환해 밀리초를 초단위로 만들어 주기
                    var opacity = parseFloat($img1.css("opacity")).toFixed(2); // 현재 설정된 투명 값(opacity)을 구하기
                    // 진행률과 남은시간 그리고 현재 투명 값을 문자열로 통합하기
                    var info = "진행률 = "+percent+"<br> 남은 시간 = "+reMs+"<br> opacity = "+opacity; 
                            $info.html(info); // 통합한 정보를 #info에 출력하기
            }
        });
    });
});
</script>