DOM

settings_applicationsEventTarget  >   settings_applicationsAnimation

DOM

  • bug_report

Constructor

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

구문

기본형식
var animation = element.animate(keyframe, options);
기본형식
var myAnimation = new Animation(myKeyframe, document.timeline);

Prototype 체인

Animation

  • 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에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

지원 웹브라우저