레슨 3 / 3·20분
애니메이션과 인터랙션
A-Frame 애니메이션 시스템
A-Frame의 animation 속성을 사용하면 JavaScript 없이 HTML만으로 애니메이션을 만들 수 있습니다. property(변경할 속성), to(목표 값), dur(시간), loop(반복), easing(가감속) 등을 지정합니다. 여러 animation 속성을 동시에 적용하면 복합 애니메이션이 가능합니다. 이벤트와 결합하면 클릭이나 시선에 반응하는 인터랙티브 VR 경험을 만들 수 있습니다.
html
<!-- 기본 애니메이션: 회전 -->
<a-box
position="0 1 -3"
color="#e74c3c"
animation="
property: rotation;
to: 0 360 0;
dur: 3000;
loop: true;
easing: linear;
"
></a-box>
<!-- 위아래 부유 + 회전 — 여러 애니메이션 동시 적용 -->
<a-sphere
position="2 1.5 -4"
color="#3498db"
animation__rotate="
property: rotation;
to: 360 360 0;
dur: 5000;
loop: true;
easing: linear;
"
animation__float="
property: position;
to: 2 2.5 -4;
dur: 2000;
dir: alternate;
loop: true;
easing: easeInOutSine;
"
></a-sphere>
<!-- 크기 변화 (펄스) -->
<a-cylinder
position="-2 0.75 -3"
color="#2ecc71"
animation="
property: scale;
to: 1.3 1.3 1.3;
dur: 1000;
dir: alternate;
loop: true;
easing: easeInOutQuad;
"
></a-cylinder>이벤트 기반 인터랙션
html
<!-- 클릭 시 색상 변경 애니메이션 -->
<a-box
position="0 1 -3"
color="#e74c3c"
class="clickable"
animation__click="
property: material.color;
to: #f39c12;
dur: 300;
startEvents: click;
"
animation__scale="
property: scale;
to: 1.5 1.5 1.5;
dur: 300;
startEvents: click;
dir: alternate;
"
></a-box>
<!-- 마우스 오버 시 커지기 -->
<a-sphere
position="2 1 -4"
color="#3498db"
class="clickable"
animation__mouseenter="
property: scale;
to: 1.3 1.3 1.3;
dur: 200;
startEvents: mouseenter;
easing: easeOutElastic;
"
animation__mouseleave="
property: scale;
to: 1 1 1;
dur: 200;
startEvents: mouseleave;
"
></a-sphere>
<!-- 카메라 + 커서 (레이캐스터) 설정 -->
<a-entity camera look-controls position="0 1.6 0">
<a-entity
cursor="rayOrigin: mouse"
raycaster="objects: .clickable"
></a-entity>
</a-entity>html
<!-- VR 시선(Gaze) 기반 인터랙션 -->
<a-scene>
<!-- 시선 커서 — 1.5초 동안 응시하면 클릭 -->
<a-entity camera look-controls position="0 1.6 0">
<a-entity
cursor="fuse: true; fuseTimeout: 1500"
raycaster="objects: .interactive"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: #ffffff; shader: flat"
animation__fusing="
property: scale;
to: 0.5 0.5 0.5;
dur: 1500;
startEvents: fusing;
"
animation__reset="
property: scale;
to: 1 1 1;
dur: 200;
startEvents: mouseleave;
"
></a-entity>
</a-entity>
<!-- 인터랙티브 객체 -->
<a-box
class="interactive"
position="0 1 -3"
color="#e74c3c"
animation__click="
property: rotation;
to: 0 360 0;
dur: 1000;
startEvents: click;
"
></a-box>
</a-scene>- •animation 속성 — property, to, dur, loop, easing으로 구성
- •animation__이름 — 접미사를 붙여 여러 애니메이션 동시 적용
- •startEvents — 특정 이벤트 발생 시 애니메이션 시작 (click, mouseenter 등)
- •dir: alternate — 정방향/역방향 번갈아 재생 (핑퐁)
- •easing — linear, easeInOutSine, easeOutElastic 등 가감속 곡선
- •cursor + raycaster — 마우스/시선으로 3D 객체 선택
- •fuse: true — VR에서 일정 시간 응시하면 클릭으로 처리
- •raycaster objects — CSS 선택자로 상호작용 대상 지정
💡
raycaster의 objects 속성에 CSS 선택자(.clickable 등)를 지정하면 해당 클래스를 가진 엔티티만 클릭/호버 이벤트를 받습니다. 모든 객체에 레이캐스팅하면 성능이 저하되므로, 반드시 상호작용할 객체만 대상으로 지정하세요.