A-Frame Animation Advanced

Introduction and Basic A-Frame Animation Tutorial

• A-Frame animation functionalities are built on anime.js: https://animejs.com, which can be used directly to customize A-Frame animation

• A-Frame animation doesn't render on Observable!

• For basic animation tuorial:

  • VR Wiki page: A-Frame Animation Tutorial 

  • Official documentation page: https://aframe.io/docs/1.4.0/components/animation.html

Dynamically Update the Property of an A-Frame Entity with D3.js

Since A-Frame objects live directly in plain HTML, we can use D3.js to manipualte the data in the HTML dynamically, see D3.js tutorials for more information: D3.js Basic Tutorial 

Advanced Animation Tips

Multiple animations

We can attach multiple animations to one entity by name-spacing the component with double underscores (__); this will give us a roating, moving and color changing object:

<a-entity animation="property: rotation"

         animation__2="property: position"

         animation__color="property: material.color"></a-entity>

Animate on events

We can use the startEvents property to animate upon eventsl; this will give us a box that change color when mouse enter the box:

<a-entity id="mouseCursor" cursor="rayOrigin: mouse"></a-entity>

<a-entity

 geometry="primitive: box"

 material="color: red"

 animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500";

 animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500";>

</a-entity>

Loop

• When the web page first loaded, the event is called loaded

• With loaded events and startEvents we can make looped animation; below is a sphere that move between two positions:

<a-sphere 

color="red" 

animation__position1="

property: position; 

from: 0 0 0; 

to: 0 0 -5; 

dur: 5000; 

easing: linear; 

autoplay: true;

startEvents: loaded" 

animation__position2=" 

property: position; 

from: 0 0 -5; 

to: 5 0 -5; 

dur: 5000; 

easing: linear; 

startEvents: animationcomplete__position1">

</a-sphere>