WEBAPI

WEBAPI

Writing
  • account_tree
  • bug_report

InterfaceAnimation

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

설명

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

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

하위 트리 탐색

  • Constructor

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

    • Animation()

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

  • [[Prototype]]

    • 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()

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

상속 계층 탐색

Object

  • Methods

    • hasOwnProperty()

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

    • isPrototypeOf()

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다.

    • propertyIsEnumerable()

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

    • toLocaleString()

      객체를 나타내는 문자열을  작동하는 지역(locale)의 방식으로 출력이 된다.

    • toString()

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

    • valueOf()

      객체의 원시(primitive) 값을 반환한다.

  • Properties

    • constructor

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

    • __proto__

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

      현재는 표준 사양에 명시되었다.

지원 웹브라우저