[JavaScript] 자바스크립트 animate(), 이미지 슬라이드 구현

🎯 animate(), 이미지 슬라이드 구현하기

• animate()를 사용해서 이미지 슬라이드 구현하기

 

📝 animate()

element.animate(keyframes, duration)

• CSS와는 별개의 독립적인 애니메이션을 구현할 수 있으며 Animation 인스턴스를 반환한다.
• 반환된 Animation 객체는 애니메이션을 세밀하게 다룰 수 있는 프로퍼티와 메소드, 이벤트를 제공한다.

 

📕 keyframes

• 애니메이션 키프레임을 가지고 있는 배열이며 각 키프레임을 객체로 구현한다. 그리고 객체의 프로퍼티로 애니메이션이 적용될 속성을 정의한다.

 

키 프레임을 정의한 객체(속성 명과 값으로 구성)를 원소로 가지고 있는 배열

// 1
xxx.animate([
    // from keyframe
    {
        opacity: 0,
        backgroundColor: #FFF
    },
    // to keyframe
    {
        opacity: 1,
        backgroundColor: #CCC
    }
], 1000);

// 2
xxx.animate([
    { transform: translateX(0px) },
    { transform: translateX(200px), offset: 0.7 },
    { transform: translateY(400px), offset: 0.8 },
    { transform: translateX(600px) }
], 2000);

 

속성과 값이 배열로 구성된 key-value 쌍을 포함하는 객체

xxx.animate({
      backgroundColor: [#FFF, #FFFF00], // [from, to]
    color: [#000, #0000FF] // [from, to]
}, 2000);

 

📕 duration

• 애니메이션의 지속 시간을 밀리초(milliseconds)로 설정한다.

 

📕 optional

• 하나 이상의 옵션 속성을 가지고 있는 객체를 지정한다.
• id : 생략 가능하며 고유 식별키를 DOMString으로 지정
• delay : 애니메이션을 지연시키는 시간을 밀리초(milliseconds)로 설정한다. 생략 가능하며 기본 값은 0이다.
• direction
  • normal : 정방향 (기본값)
  • reverse : 역방향
  • alternate : 정방향 후 역방향
  • alternate-reverse : 역방향 후 정방향
• duration : 애니메이션이 완료되는 시간을 밀리초(milliseconds)로 설정한다. 선택사항이지만 기본값은 0이므로 설정하지 않는다면 애니메이션이 실행되지 않는다.
• easing : 애니메이션의 속도 변화를 지정한다. 사전에 정의된 값은 linear, ease, ease-in, ease-out, ease-in-out로 지정할 수 있으며 cubic-bezier() 함수도 사용이 가능한다. 생략할 수 있으며 기본 값은 linear이다.
• endDelay : 애니메이션이 끝난 후 지연되는 시간을 밀리초(milliseconds)로 설정할 수 있다. 다른 애니메이션의 종료 시간을 기준으로 애니메이션을 시퀀싱 할 때 주로 사용한다. 생략이 가능하며 기본 값은 0이다.
• fill
  • 요소가 기본적으로 가지고 있는 style과 키프레임에 정의된 style과의 관계를 설정한다.
  • backwards로 설정하면 바로 첫 키프레임의 style을 가지고 애니메이션이 시작되며 애니메이션이 완료되면 원래의 정의된 style로 돌아오지만 forwards로 설정하면 원래의 style을 유지하다가 애니메이션이 시작되며 애니메이션이 종료된 후 마지막 키프레임의 style을 유지한다.
  • both는 시작 키프레임으로 style을 가지고 애니메이션을 시작하며 끝나면 마지막 키프레임의 style을 유지한다. 키프레임에 의해 유지된 값은 외부의 CSS 적용으로 재정의해도 그 값을 그대로 유지한다.
  • 기본 값은 원래의 style을 가지고 애니메이션을 시작하고 끝나면 원래의 style로 돌아오는 none이다.
• iterationStart
  • 반복의 어느 시점에서 애니메이션을 시작해야 하는지를 설정한다.
  • 예를 들어 0.5는 첫 번째 반복의 중간에서 시작을 나타내며 이 값을 설정하면 두 번 반복하는 애니메이션이 세 번째 반복 중 중간에서 종료된다. 생략이 가능하며 기본 값은 0.0이다.
• iterations
  • 애니메이션이 반복되는 횟수를 지정한다. 기본 값은 1이며 요소가 존재하는 한 반복될 수 있도록 Infinity 키워드를 사용할 수도 있다.

 

📝 이미지 슬라이드 구현 코드

// 2) Image Slider
var slider = document.querySelector('#slider');
var slides = slider.querySelector('.slides');
var slide = slides.querySelectorAll('.slide');

var currentSlide = 0; // 현재 화면에 보여지고 있는 슬라이드가 몇 번 슬라이드인지 확인

setInterval(function() {
    var from = -(1024 * currentSlide);
    var to = from - 1024;
    slides.animate({
        marginLeft: [from + "px", to + "px"]
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        fill: "both"
    });
    currentSlide++;
    if (currentSlide === (slide.length - 1)) {
        currentSlide = 0;
    }
}, 3000);

 

📌 참고

• animate()::JavaScript 레퍼런스
• Element.animate() - Web APIs | MDN