aframe
생기
수색…
소개
A-Frame의 애니메이션 및 전환은 <a-animation> 요소를 자식으로 사용하여 정의됩니다. 이 시스템은 대략 Web Animations 사양을 기반으로합니다. A-Frame은 내부적으로 tween.js를 사용합니다.
비고
속성
다음은 애니메이션 속성의 개요입니다. 아래에서 좀 더 자세히 설명하겠습니다.
| 속성 | 기술 | 기본값 |
|---|---|---|
| 속성 | 애니메이션화 할 속성입니다. 구성 요소 속성을 지정하려면 componentName.property 구문 (예 : light.intensity )을 사용하십시오. | 회전 |
| 시작하다 | 애니메이션을 시작하기 전에 대기 할 이벤트 이름입니다. | '' |
| 지연 | 애니메이션을 시작하기 전에 대기 할 지연 시간 (밀리 초) 또는 이벤트 이름입니다. | 0 |
| 방향 | 애니메이션의 방향 ( from 과 to ). alternate , alternateReverse , normal , reverse 중 하나입니다. | 표준 |
| ~하다 | 애니메이션의 지속 시간 (밀리 초). | 1000 |
| 편한 | 애니메이션의 기능을 줄입니다. 선택할 수있는 것이 많습니다. | 용이함 |
| 종료 | 애니메이션을 중지하기 전에 대기 할 이벤트 이름입니다. | '' |
| 가득 따르다 | 활발하게 활동하지 않을 때의 애니메이션 효과를 결정합니다. backwards , both , forwards , none . | 포워드 |
| ...에서 | 시작 값. | 현재 값. |
| 반복 | 반복 횟수 또는 indefinite . | 0 |
| 에 | 종료 값. 반드시 지정해야합니다. | 없음 |
시작하다
begin 애트리뷰트는 애니메이션이 언제 재생되어야 하는지를 정의한다.
대기 할 밀리 초를 나타내는 숫자 이거나 대기 할 이벤트 이름 일 수 있습니다. 예를 들어 엔티티 크기를 조정하기 전에 2 초 동안 기다리는 애니메이션을 정의 할 수 있습니다.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
또는 엔티티를 fade 하기 전에 부모 요소가 fade 라는 이벤트를 트리거 할 때까지 기다리는 애니메이션을 정의 할 수 있습니다.
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube').emit('fade');
방향
direction 속성은 시작 값과 최종 값 사이에 애니메이션을 적용하는 방법을 정의합니다.
우리가 교류 방향을 정의 할 때, 애니메이션이 앞뒤로 사이 갈 것입니다 from 와 to 요요 같은 값. 교대 방향은 우리가 애니메이션을 반복 할 때만 영향을줍니다.
| 값 | 기술 |
|---|---|
| 번갈아 하는 | 짝수주기에서 시작 from 끝까지 애니메이션 to 만듭니다. 홀수 사이클에서 애니메이션 온 to 데 from |
| 대체 - 역방향 | 홀수 사이클에서 애니메이션에서 from 에 to . 짝수 사이클에서 애니메이션 온 to 데 from |
| 표준 | 에서 애니메이션 from 에 to . |
| 역 | 에서 애니메이션 to 로 from . |
완화
easing 속성은 애니메이션의 여유 기능을 정의합니다.이 기능은 기본적으로 ease 있습니다. 나열 할 수있는 여유 기능이 너무 많지만 암시 적으로 설명 할 수 있습니다.
하나의 가능한 값은 linear 입니다. 그리고 기본 완화 기능은 ease , ease-in , ease-out 및 ease-in-out .
그런 다음에는 더 많은 여유 기능 그룹이 있습니다. 위의 기본 이징 함수는 각 이징 함수 그룹에 접두사를 붙입니다. easing 함수의 그룹은 cubic , quad , quart , quint , sine , expo , circ , elastic , back , bounce 입니다.
예를 들어, cubic 완화 기능의 그룹으로 구성 할 ease-cubic , ease-in-cubic , ease-out-cubic , ease-in-out-cubic .
가득 따르다
fill 속성은 실제로 활약하지 않을 때의 애니메이션 효과를 정의합니다. 생각 fill 전에 및 / 또는 각 애니메이션주기 후 개체에 애니메이션 세트 값 것과. fill 및 해당 효과에 사용할 수있는 값은 다음과 같습니다.
| 값 | 기술 |
|---|---|
| 뒤로 | 애니메이션을 시작하기 전에,에 시작 값 설정 from 값입니다. |
| 양자 모두 | 역방향 채우기와 전달 채우기의 효과를 결합하십시오. |
| 포워드 | 애니메이션이 끝나면 최종 값은 to 값으로 유지됩니다. 기본 채우기입니다. |
| 없음 | 애니메이션이 시작되기 전에 시작 값을 초기 값으로 설정하십시오. 애니메이션이 끝나면 값을 초기 값으로 재설정하십시오. |
반복
repeat 속성은 애니메이션이 반복되는 빈도를 정의합니다. 애니메이션의 각 반복을 한 사이클이라고합니다. 반복은 애니메이션이 끝나는 지점에서 0 에 도달 할 때까지 각 애니메이션 사이클에서 카운트 다운되는 숫자이거나 repeat 을 indefinite 설정할 수 있으며 애니메이션이 수동으로 제거되거나 중지 될 때까지 계속 repeat 됩니다.
이벤트
<a-animation> 요소는 몇 가지 이벤트를 발생시킵니다.
| 이벤트 이름 | 기술 |
|---|---|
| 애니메이션 끝 | 애니메이션이 끝나면 방출됩니다. 반복 횟수가 0 도달하면 반복 횟수가 발생합니다. 무한 반복의 경우에는 출력되지 않습니다. |
| 애니메이션 시작 | 애니메이션 재생이 시작되면 즉시 방출됩니다. |
애니메이션 예
소개 예제로서, 10 초가 걸리는 Y 축에 대한 엔티티에서 5 미터 궤도를 정의하기 위해 위치를 오프셋하고 회전을 애니메이션 할 수 있습니다. 이 애니메이션은 Y 축을 중심으로 0도 회전하고 360도 회전합니다. 10000 밀리 초의 지속 시간으로 정의되고 애니메이션의 각 사이클에서 최종 값을 유지하며 무한 루프입니다.
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
다른 유형의 속성 애니메이션
A-Frame의 애니메이션 시스템은 다양한 유형의 속성을 애니메이션으로 만들 수 있습니다.
vec3 등록 정보
A-Frame에는 표준 vec3 구성 요소 (예 : position , rotation 및 scale )가 있습니다. 이러한 구성 요소는 X, Y 및 Z의 세 가지 요소로 구성됩니다. from 및 to 속성에 공백으로 구분 된 세 개의 숫자를 하나의 엔티티에서 정의하는 것처럼 전달할 수 있습니다. 이 경우 애니메이션 시스템은 vec3 값을 애니메이션으로 처리한다고 가정합니다.
예를 들어 엔티티를 한 지점에서 다른 지점으로 움직이게하려는 경우 position 구성 요소에 애니메이션을 적용 할 수 있습니다.
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
부울 속성
A-Frame에는 단일 부울 값을 허용하는 표준 구성 요소가 있습니다. 부울 값은 각 애니메이션 사이클의 끝에서 부울을 뒤집어서 "애니메이션"될 수 있습니다.
예를 들어 5 초 후에 엔티티의 가시성을 토글하는 애니메이션을 정의 할 수 있습니다.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
숫자 속성
우리는 숫자 속성도 애니메이트 할 수 있습니다. 예를 들어, 라이트 프리미티브의 강도를 애니메이트 할 수 있습니다.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
색상 속성
색상 유형이있는 모든 구성 요소 속성에 애니메이션을 적용 할 수 있습니다. 예를 들어 상자를 흰색에서 빨간색으로 움직일 수 있습니다.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
구성 요소 등록 정보
다중 속성 구성 요소의 특정 속성에 애니메이션을 적용 할 수 있습니다. 이를 위해, 우리는 도트 구문을 사용하여 구성 요소 속성을 선택합니다 : componentName.propertyName .
예를 들어 콘의 상단 반경을 애니메이션으로 radiusTop geometry.radiusTop 하여 radiusTop 값을 선택할 수 있습니다.
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>