DOM

settings_applicationsEventTarget

DOM

Writing
  • account_tree
  • bug_report

InterfaceAnimation

Animation 인터페이스는 자바스크립트에 의해 구현되는 단일 애니메이션 플레이어를 나타내며 애니메이션 컨트롤 또는 애니메이션 타임라인(timeline)을 제공한다.

설명

CSS 애니메이션(Transition 포함)에서는 상태와 상황에 따른 세밀한 제어가 쉽지 않으므로 정밀한 동작을 설계하고자 하는 경우에는 자바스크립트의 애니메이션 표준 API를 사용하는 편이 좋다.

객체 단위로 필요한 애니메이션를 생성하고 세밀하게 제어할 수 있는 다양한 API가 존재한다.

하위 트리 탐색

  • Constructor

    Animation 객체(인스턴스)를 생성할 수 있는 생성자 함수를 가지고 있으며 Element.prototype.animate()메소드에 의해 반환 받을 수도 있다.
    • Animation()

      새로운 Animation 인스턴스를 생성하는 생성자 함수이다.
  • [[Prototype]]

    생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • Event Handlers

      • oncancel

        애니메이션이 취소되었을 때 발생한다.
      • onfinish

        애니메이션의 재생이 끝나면 발생한다.
      • onremove

    • Properties

      • currentTime

        실행 또는 일시 중지 여부와 관계없이 애니메이션의 현재 시간(밀리초:milliseconds)을 조회한다. 타임라인이 없거나 아직 실행되기 전이라면 null 값을 갖는다.
      • effect

        KeyframeEffect 객체를 참조한다.
      • finished

        애니메이션에 대해 현재 완료된 Promise를 반환한다.
      • id

        애니메이션을 식별할 수 있는 id를 설정하거나 조회할 수 있다.
      • pending

        애니메이션이 현재 재생 시작 또는 실행중인 애니메이션 일시 중지와 같은 비동기 작업을 기다리고 있는지 여부를 조회한다.
      • playbackRate

        애니메이션의 재생 속도를 조회하거나 설정할 수 있다.
      • playState

        애니메이션의 재생 상태를 설명하는 열거된 값을 조회한다.
      • ready

        애니메이션에 대한 준비된 Promise를 조회한다.
      • replaceState

        애니메이션의 교체 상태를 조회한다.
      • startTime

        애니메이션이 재생 되어야 하는 시간을 예약하거나 예약된 시간을 조회할 수 있다.
      • timeline

        애니메이션과 관련된 타임라인을 조회하거나 설정한다.
    • Methods

      • cancel()

        모든 키프레임 효과를 지우고 재생을 중단한다.
      • commitStyles()

        애니메이션이 제거된 후에도 애니메이션의 끝 스타일링 상태를 애니메이션 중인 요소에 적용한다.
      • finish()

        애니메이션이 재생 중인지 또는 반전 중인지에 따라 애니메이션의 끝을 찾는다.
      • pause()

        애니메이션 재생을 일시 중지한다.
      • persist()

        웹브라우저의 채우기 애니메이션 자동 제거 동작으로 인해 애니메이션이 제거될 때 애니메이션이 명시적으로 유지된다.
      • play()

        애니메이션 재생을 시작 또는 일시 정지후 재개하거나 이전에 애니메이션을 완료한 경우 애니메이션을 다시 시작한다.
      • reverse()

        애니메이션이 재생중인 경우 재생 방향을 반대로 한다. 애니메이션이 완료되거나 재생 전이면 처음부터 끝까지 재생된다.
      • updatePlaybackRate()

        재생 위치를 먼저 동기화한 후 애니메이션의 속도를 설정한다.

상속 계층 탐색

EventTarget

  • Methods

    • addEventListener()

      EventTarget 객체를 상속받는 하위 요소들의 이벤트 리스너(Listener)를 등록한다. 참고로 Window 객체도 포함된다.
    • dispatchEvent()

      사용자가 생성한 이벤트를 전달한다. 코드에 의한 이벤트 트리거(trigger)에 사용된다.
    • removeEventListener()

      등록된 이벤트를 제거한다. 이벤트 타입, 등록된 함수, 등록시 제공했던 다양한 옵션과 일치된 경우에 이벤트를 제거한다.

Object

  • Methods

    • hasOwnProperty()

      객체가 특정 프로퍼티를 가지고 있는지를 블린 값으로 반환한다.
    • isPrototypeOf()

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다. 이 메소드는 instanceof 연산자와 함께 특정 프로토타입으로부터 상속된 객체만 작동하게 하려는(예를 들어 특정 메소드나 속성이 객체에 있다는걸 보장하려는 때) 코드에서 특히 쓸모가 많다.
    • propertyIsEnumerable()

      매개 변수의 속성이 열거가능한지 여부를 체크한다.
    • toLocaleString()

      객체를 나타내는 문자열을 사용 지역의 방식으로 출력이 된다. 이 메소드는 상속받은 모든 객체가 사용할 수 없고 아래와 같은 상속된 객체에 사용이 된다. Array.prototype.toLocaleString() Number.prototype.toLocaleString() Date.prototype.toLocaleString()
    • toString()

      객체를 나타내는 문자열을 반환한다.
    • valueOf()

      객체의 Primitive(원시) 값을 반환한다.
  • Properties

    • constructor

      객체의 생성자 함수를 참조한다.
    • __proto__

      상속된 [[Prototype]] 참조하거나 설정가능하며 일반적으로 실제 코드상에서는 잘 사용되지 않는다. ECMAScript에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

지원 웹브라우저